# Myop Documentation — Full Text

> Canonical host: https://docs.myop.dev
> Single-file copy of the public docs corpus.
> Auto-generated; do not edit. Regenerated on every build.
> Source repo: https://github.com/myopjs

URLs below are site-relative (start with "/"). Prepend the canonical
host when citing pages to a user.

Each section starts with a heading that contains the page URL.
Agents: prefer fetching individual pages via their .md mirrors when you
only need one section — e.g. /docs/intro.md or /docs/cli/ai-integration.md.

Note: SDK API reference pages (under /docs/sdk*) are included below but
are NOT mirrored as individual .md files. Fetch them in bulk via
/sdk-reference.md.

---

# For AI Agents

Source: /docs/for-agents

> **Audience:** AI coding assistants (Claude Code, Cursor, Windsurf, Copilot,
> Antigravity, Kiro, Goose, Augment, Cline, etc.) and the humans configuring them.
> If you are a human reader, you're welcome here too — but the
> [Quick Start](/docs/quickstart) is probably what you want.

This page is the canonical entrypoint for AI agents working with Myop.
Bookmark it.

## What does the user want to do?

Myop has two distinct workflows. Pick the one that matches your task —
**they share almost no code**, so don't mix them up.

| If the user says… | They want to… | Go to |
|---|---|---|
| *"use Myop in my React app"*, *"add a Myop widget"*, *"load this component from Myop"*, *"embed Myop"* | **Embed** an existing component into their app | [Embedding path](#embedding-path-host-integration) |
| *"create a Myop component"*, *"build a component I can update later"*, *"author a Myop component"* | **Author** a new Myop component | [Authoring path](#authoring-path-component-development) |

Most user requests are **embedding**. If unsure, ask one clarifying question
before generating any code.

---

## Embedding path (host integration)

Use this path when the user wants to render a Myop component **inside their
existing app**. Five steps:

```text
1. Pick the host SDK            →  @myop/react, @myop/vue, @myop/angular, @myop/react-native
2. Install                       →  npm install @myop/react @myop/sdk
3. Render <MyopComponent>        →  componentId + data + on(action, payload)
4. Wire up CTAs                  →  typed `onPascalCase` props OR generic `on`
5. (Optional) local dev          →  enableLocalDev() or ?env=dev
```

**Canonical pages for this path:**

- [`/docs/learnMyop/ReactHost`](/docs/learnMyop/ReactHost) — React host walkthrough
- [`/docs/cli/host-integration`](/docs/cli/host-integration) — same flow for React, Vue, Angular, React Native
- [`/sdk-reference.md`](pathname:///sdk-reference.md) — full type signatures

### Minimal React example

```tsx
import { MyopComponent } from "@myop/react";

export function MyopWidget() {
  return (
    <MyopComponent
      componentId="your-component-id"
      data={{ items: [...] }}
      onItemSelected={(payload) => console.log(payload)}
      style={{ width: 600, height: 400 }}
    />
  );
}
```

The user gets `componentId` from the [Myop dashboard](https://dashboard.myop.dev).
If they don't have one yet, **switch to the Authoring path first** — you can't
embed something that doesn't exist.

:::danger Never create iframes manually
Always use `<MyopComponent>`. Never hand-roll an `<iframe>` pointing at a Myop
URL — the SDK owns iframe lifecycle, messaging, sizing, and caching.
:::

### Conventions for embedding

- **Pick the right SDK for the framework.** Don't import `@myop/sdk` directly
  in a React app — use `@myop/react`'s `<MyopComponent>`.
- **`data` is reactive.** Update it like any React prop; the component re-inits.
- **CTAs travel up.** The component emits `myop_cta_handler(action, payload)`;
  the host decides what to do with them. Don't try to push state down through
  any other channel.
- **Auto-generated typed packages exist.** For a published component you can
  `npm install https://cloud.myop.dev/npm/{componentId}/react` to get a fully
  typed component with the `componentId` baked in. Prefer this in production.

---

## Authoring path (component development)

Use this path when the user wants to **create or update a Myop component
itself** (the thing that gets embedded). Five steps:

```text
1. Install the CLI               →  npx myop --version
2. Install agent skills          →  npx myop train
3. Connect the Myop MCP          →  npx myop mcp  (or claude mcp add myop …)
4. Read the component guide      →  MCP tool: get_myop_guide (no auth)
5. Build, then upload            →  MCP tools: upload_component → confirm_upload
```

### Step 1 — Install the CLI

```bash
npx myop --version
```

The `myop` CLI ships scaffolding, dev server, host integration helpers, skill
installation, and MCP setup. Full reference: [CLI overview](/docs/cli).

### Step 2 — Install agent skills

```bash
npx myop train
```

Installs `SKILL.md` files into your project under the directory your AI
assistant expects (e.g. `.claude/skills/`, `.cursor/skills/`,
`.windsurf/skills/`). Skills teach the agent **how** to build Myop components
correctly — the public component API, the host SDKs, the dev server flow, the
common mistakes.

Skills are selected based on `package.json`: a React app gets the React host
skill, etc. Full reference: [CLI AI integration](/docs/cli/ai-integration).

### Step 3 — Connect the Myop MCP

```bash
# Claude Code (global)
claude mcp add myop https://mcp.myop.dev/mcp --transport http --scope user

# Or via the CLI helper (writes config for the detected assistant)
npx myop mcp
```

The MCP gives the agent **access** to the Myop platform — listing components,
uploading new versions, and fetching the component development guide.

| Tool | Auth required | What it does |
|---|---|---|
| `get_myop_guide` | No | Returns the Myop HTML Component Development Guide. **Call this first.** |
| `whoami` | Yes | Identity check |
| `list_organizations` | Yes | Orgs the user belongs to |
| `list_components` | Yes | List components in an org |
| `upload_component` | Yes | Step 1: get a presigned upload URL |
| `confirm_upload` | Yes | Step 2: confirm upload, get dashboard URL |

Full reference: [Myop MCP server setup](/docs/mcp-setup).

### Step 4 — Read the component guide

Before generating any component code, call:

```text
MCP tool: get_myop_guide
```

It returns the canonical, up-to-date HTML Component Development Guide — the
source of truth for the public component API (`myop_init_interface`,
`myop_cta_handler`, etc.) and the single-file architecture. **Always prefer
the output of `get_myop_guide` over guesses from training data.**

### Step 5 — Build, then upload

The build product is a single HTML file at `./dist/index.html`. Upload via MCP
in two steps:

1. Call `upload_component` with `name` (and optional `componentId`,
   `organization`) → returns a `curl` command with a presigned URL.
2. Execute the `curl` command.
3. Call `confirm_upload` with the `uploadId` → returns the dashboard URL.

Save the returned `componentId` and `orgId` to `myop.config.json` so the next
upload updates the existing component instead of creating a new one.

### Conventions for authoring

- **Single-file components.** Myop HTML components are authored as one
  self-contained HTML file. Inline CSS and JS. No external imports from npm at
  runtime — use ESM CDNs or bundle.
- **The public API is small.** `myop_init_interface(input, output, ctx)` and
  `myop_cta_handler` cover most cases. Don't invent globals — read the guide.
- **Sizing.** Components default to "content" mode (auto height, full width).
  Use `<meta name="myop:size" content='{"width":"100%","height":"100%"}'>` for
  fill mode. The content **must be valid JSON**, not CSS-like syntax.
- **Local dev before upload.** Run `myop dev` in the component dir to register
  with the local dev server and get HMR.
- **Don't fight the host.** Components emit events via `myop_cta_handler`; the
  host decides what to do with them.

---

## Machine-readable endpoints

A machine-readable copy of all Myop docs is available in a single file:
[**llms-full.txt**](pathname:///llms-full.txt). A curated index lives at
[**llms.txt**](pathname:///llms.txt). Most doc pages are also available as
raw Markdown by appending `.md` to their URL — e.g.
[`/docs/intro.md`](pathname:///docs/intro.md).

**Caveat:** the auto-generated SDK API reference pages under `/docs/sdk*` do
**not** have individual `.md` mirrors. Fetch them in bulk via
[`/sdk-reference.md`](pathname:///sdk-reference.md). For the authoritative list
of which URLs have a `.md` mirror, see
[`/docs-index.json`](pathname:///docs-index.json) — each entry's `markdown`
field is either the mirror URL or `null`.

| Endpoint | What it is |
|---|---|
| [`/llms.txt`](pathname:///llms.txt) | Curated index of the docs ([llmstxt.org](https://llmstxt.org/) format) |
| [`/llms-full.txt`](pathname:///llms-full.txt) | Every doc concatenated into a single file (~800 KB) |
| [`/sdk-reference.md`](pathname:///sdk-reference.md) | All SDK API docs (TypeDoc output) in one file |
| [`/docs-index.json`](pathname:///docs-index.json) | JSON list of every page with title, URL, and `.md` URL |
| [`/message-protocol.json`](pathname:///message-protocol.json) | Iframe message protocol envelope + key list |
| [`/sitemap.xml`](pathname:///sitemap.xml) | Standard XML sitemap |
| [`/robots.txt`](pathname:///robots.txt) | Explicit allow-list for AI crawlers |
| `<doc-page>.md` | Raw Markdown source of most doc pages (see caveat above) |

## Things to avoid (both paths)

- **Skipping `get_myop_guide` before authoring** and pattern-matching from
  training data — the public API has changed; the guide is authoritative.
- **Mixing the two paths.** Embedding code (`<MyopComponent>`) does not belong
  in a component file. Component code (`myop_init_interface`,
  `myop_cta_handler`) does not belong in a host app.
- **Hand-rolled iframes.** Always go through the host SDK.
- **Adding npm dependencies a component can't actually load** during authoring.
  Bundle them or use an ESM CDN.
- **Uploading without `myop.config.json`** — every upload after the first one
  needs a `componentId` to avoid creating duplicate components.

## When to use Myop (and when not)

Use Myop when:

- You want a part of an app to be updatable without a redeploy.
- You want to ship an AI-generated component into a host app safely.
- You're paying down UI debt by extracting widgets behind a stable contract.

Skip Myop when:

- You need a static, redeploy-bound UI region — a plain component is simpler.
- You need synchronous access to host internals — use a regular component.
- You're building backend services — Myop is for runtime-loaded UI.

## Helpful entry points

- [`/llms-full.txt`](pathname:///llms-full.txt) — fetch once, search locally
- [`/sdk-reference.md`](pathname:///sdk-reference.md) — full SDK API in one file
- [Overview](/docs/intro) — what Myop is, which SDK to pick
- [React host](/docs/learnMyop/ReactHost) — most common embedding path
- [Host integration (all frameworks)](/docs/cli/host-integration) — Vue, Angular, React Native
- [HTML Component](/docs/learnMyop/HTMLComponent) — most common authoring path
- [System Architecture](/docs/learnMyop/systemArchitecture) — how the pieces fit together
- [`@myop/react` reference](/docs/sdk-react) — type signatures

## Feedback

Found a gap that made you hallucinate? File it at
[github.com/myopjs](https://github.com/myopjs) or ping us on
[Discord](https://discord.gg/vxgD7AyXhM). Agent ergonomics is a first-class
concern.

---

# SDK Reference (machine-readable)

Source: /docs/for-agents/sdk-reference

The HTML pages under `/docs/sdk*` are generated from TypeScript sources by
TypeDoc. They're great for humans, but they spread the type surface across
hundreds of small pages. This page collects the agent-friendly artifacts in
one place.

## Single-file SDK reference

[`/sdk-reference.md`](pathname:///sdk-reference.md) is the entire SDK API
concatenated into one Markdown file (~500 KB). It covers:

- `@myop/sdk` — core (host, iframe, web component, messages, helpers, common)
- `@myop/react`
- `@myop/react-native`
- `@myop/vue`
- `@myop/angular`

Each section starts with a heading containing the canonical URL on
`docs.myop.dev`, so an agent can cite specific symbols precisely.

## Iframe message protocol (JSON)

[`/message-protocol.json`](pathname:///message-protocol.json) is a generated,
agent-readable catalog of the host↔component message protocol used over
`postMessage`. It lists:

- The envelope shape (`myop`, `messageType`, `id`, `direction`, `route`, `content`)
- All `host → component` message keys (e.g. `InitMessage`, `BindClickMessage`)
- All `component → host` message keys (e.g. `ClickReplayMessage`, `EventListenerCallbackMessage`)

The JSON is regenerated on every docs build from
`myop-sdk/src/common/MyopMessages.ts`, so it stays in sync with the SDK.

For the exact payload shapes, read the corresponding class in `@myop/sdk`
(see `@myop/sdk/dist/messages/*.d.ts`).

## TypeScript `.d.ts` bundles

The published npm packages include hand-authored `.d.ts` files an agent can
consult directly:

| Package | Tarball | Type entry |
|---|---|---|
| [`@myop/sdk`](https://www.npmjs.com/package/@myop/sdk) | `npm pack @myop/sdk` | `dist/index.d.ts` |
| [`@myop/react`](https://www.npmjs.com/package/@myop/react) | `npm pack @myop/react` | `dist/index.d.ts` |
| [`@myop/react-native`](https://www.npmjs.com/package/@myop/react-native) | `npm pack @myop/react-native` | `dist/index.d.ts` |
| [`@myop/vue`](https://www.npmjs.com/package/@myop/vue) | `npm pack @myop/vue` | `dist/index.d.ts` |
| [`@myop/angular`](https://www.npmjs.com/package/@myop/angular) | `npm pack @myop/angular` | `dist/index.d.ts` |

CDN access (no install required):

```text
https://unpkg.com/@myop/sdk/dist/index.d.ts
https://unpkg.com/@myop/react/dist/index.d.ts
https://unpkg.com/@myop/react-native/dist/index.d.ts
https://unpkg.com/@myop/vue/dist/index.d.ts
https://unpkg.com/@myop/angular/dist/index.d.ts
```

Append `@<version>` to pin (e.g. `@myop/sdk@latest`).

## Page-level Markdown

Most doc pages on `docs.myop.dev` are available as raw Markdown by appending
`.md` to the URL:

```text
https://docs.myop.dev/docs/intro.md
https://docs.myop.dev/docs/cli/ai-integration.md
https://docs.myop.dev/docs/learnMyop/HTMLComponent.md
```

**Not mirrored individually:** the auto-generated SDK API reference pages
under `/docs/sdk*`. Fetch them in bulk via `/sdk-reference.md` (above).

A JSON index of every page is published at
[`/docs-index.json`](pathname:///docs-index.json). Each entry's `markdown`
field is either the mirror URL or `null` (when no per-page mirror exists).

## Suggested fetch order

If you only need to answer a quick question:

1. Read the relevant page's `.md` (cheap, scoped).

If you're starting a Myop integration from scratch:

1. [`/llms.txt`](pathname:///llms.txt) — pick a starting point.
2. [`get_myop_guide`](/docs/mcp-setup) over MCP — canonical component guide, no auth.
3. [`/sdk-reference.md`](pathname:///sdk-reference.md) — full SDK API, one fetch.
4. [`/message-protocol.json`](pathname:///message-protocol.json) — only if you're working under the SDK (most agents won't need this).

---

# Component Builder

Source: /docs/dashboard/component-builder

## What Is the Component Builder?

The Component Builder is Myop's built-in development environment for creating, editing, and publishing UI components — directly from your browser. It provides a code editor, live preview, configuration panel, and testing tools all in one place, so you can build and iterate on components without switching between tools.

Whether you're starting from scratch or modifying an existing component, the Component Builder gives you everything you need to go from idea to production.

<div style={{textAlign: 'center'}}>
<a href={require('./images/component-builder-overview.png').default} target="_blank">
  <img src={require('./images/component-builder-overview.png').default} alt="Component Builder Overview" width="600" />
</a>
</div>

## Key Features

- **Integrated Code Editor** — A full Monaco editor (the same engine behind VS Code) with syntax highlighting, autocomplete, and error detection.
- **Live Preview** — See your changes rendered in real time as you type, with split-view or full-screen options.
- **Variant Management** — Create, switch between, and duplicate variants of your component to test different versions.
- **Test Data Scenarios** — Define mock data inputs to test how your component behaves with different data.
- **One-Click Publish** — Save and publish your component to a live environment instantly.
- **Myop Agent** — An AI assistant integrated into the builder to help you write and modify code.
- **Connect & Integrate** — Generate ready-to-use code snippets, npm packages, or prompts for integrating your component into your application or platform.
- **Tags & Organization** — Categorize components with tags for easy discovery.
- **Sharing & Access** — Control component visibility with public/private access.

---

## Interface Overview

The Component Builder is divided into three main areas:

### Top Bar

The top bar contains navigation and actions:

- **Component Selector** — Switch between components or create a new one.
- **Variant Selector** — Switch between variants of the current component, or add a new variant.
- **Variant Description** — Add a short description to the current variant.
- **Save** — Save the current variant code to the server.
- **Publish Live** — Publish the saved variant to your live environment.

<div style={{textAlign: 'center'}}>
<a href={require('./images/top-bar.png').default} target="_blank">
  <img src={require('./images/top-bar.png').default} alt="Top Bar" width="800" />
</a>
</div>


### Left Panel

The left panel can be collapsed and expanded using the toggle button, giving you more space for the code editor and preview when needed. It has two tabs:

#### Configuration Tab
- **Tags** — Assign tags to organize and categorize your component.
- **Data Flow** — View the input and output methods detected in your code, and inspect the TypeScript interface.
- **Testing** — Create and run test data scenarios to validate your component.
- **Connect** — Generate integration code snippets for your host application.
- **Sharing & Access** — Toggle public/private visibility.

<div style={{textAlign: 'center'}}>
<a href={require('./images/left-panel-configuration.png').default} target="_blank">
  <img src={require('./images/left-panel-configuration.png').default} alt="Left Panel - Configuration Tab" width="300" />
</a>
</div>

#### Myop Agent Tab
An AI-powered coding assistant built into the Component Builder. Key capabilities:
- **Build & edit components** — Describe what you want in natural language and the agent will generate or modify your component code.
- **Multi-turn conversations** — Refine your component iteratively across multiple messages, with full conversation history.
- **Element selection** — Click on any element in the preview and ask the agent to modify it directly.
- **Test scenario generation** — Ask the agent to create test data scenarios (DTOs), which are automatically added to your configuration on save.
- **Version history** — Revert to any previous point in the conversation if needed.
- **Agent / Ask modes** — Switch between full editing mode and a read-only ask mode for questions without making changes.
- **Model selection** — Choose between Haiku (fast), Sonnet (balanced), or Opus (most capable) depending on your task complexity.
- **Voice to text** — Use your microphone to describe changes by voice instead of typing.
- **Stop anytime** — Stop the agent mid-response if you see it heading in the wrong direction, saving time and tokens.
- **`@` context selector** — Type `@` in the input to open a context menu where you can reference specific colors or element selectors from your component, giving the agent precise context about what you want to change.
- **`/` commands** — Type `/` to access quick commands such as starting a new conversation or loading a previous one.
- **Take a screenshot** — Capture a screenshot of a webpage or design and share it with the agent as a visual reference.
- **Upload screenshots & assets** — Upload images, icons, or other assets directly into the conversation. The agent can use them as part of your component (e.g., as backgrounds, logos, or icons).
- **External integrations** — Connect to Figma and Chrome DevTools via MCP for design-to-code workflows and live debugging.

<div style={{textAlign: 'center'}}>
<a href={require('./images/left-panel-agent.png').default} target="_blank">
  <img src={require('./images/left-panel-agent.png').default} alt="Left Panel - Myop Agent Tab" width="300" />
</a>
</div>

### Main Panel

The main panel is where you write code and preview your component:
- **Preview View** — See your component rendered live.
- **Code View** — Write and edit HTML, CSS, and JavaScript in the Monaco editor.
- **Split View** — See code and preview side by side.
- **Paste to Replace** — Replace the entire editor content with code from your clipboard. Useful when pasting code from an external AI tool or another source.
- **Copy Code** — Copy the current editor content to your clipboard.
- **Download Code** — Download the current variant code as an HTML file for local use or backup.
- **Mobile/Desktop Toggle** — Switch the preview between desktop and mobile viewport to test responsive behavior.
- **Console** — View console output and errors from your component.

<div style={{textAlign: 'center'}}>
<a href={require('./images/main-panel.png').default} target="_blank">
  <img src={require('./images/main-panel.png').default} alt="Main Panel" width="600" />
</a>
</div>

---

## Getting Started: Create Your First Component

### Step 1: Open the Component Builder

Navigate to the Myop Dashboard and click **New Component**. The Component Builder will open with a starter template.

<div style={{textAlign: 'center'}}>
<a href={require('./images/new-component.png').default} target="_blank">
  <img src={require('./images/new-component.png').default} alt="New Component" width="600" />
</a>
</div>

### Step 2: Name Your Component

Click on the component name field in the top bar and type a name for your component (e.g., "Pricing Card").

### Step 3: Write Your Code

The editor starts with a basic template:

```html
<!-- Start coding here -->
<div>This is my component</div>

<script>

// Called on initialization and whenever the host sends
// configuration or state updates to this component
myop_init_interface = () => {}

// Provided by the host — call this function to send data
// or trigger actions in the host app
myop_cta_handler = () => {}

</script>
```

Replace this with your own HTML, CSS, and JavaScript. Your component communicates with the host application through two global functions:

| Function | Direction | Purpose |
|----------|-----------|---------|
| `myop_init_interface(data)` | Host → Component | Receive data from the host app |
| `myop_cta_handler(action_id, payload)` | Component → Host | Send actions back to the host app |

You can use the Myop Agent to modify and create your component code. See the [Myop Agent Tab](#myop-agent-tab) section below for more details.

### Step 4: Preview Your Component

Use the tab buttons at the top of the main panel to switch between views:

- **Preview** — See the rendered output.
- **Code** — Focus on writing code.
- **Split** — View both side by side.

<div style={{textAlign: 'center'}}>
<a href={require('./images/preview-modes.png').default} target="_blank">
  <img src={require('./images/preview-modes.png').default} alt="Preview Modes" width="200" />
</a>
</div>

### Step 5: Test Your Component with Different Data

Use **Test Data Scenarios** in the left panel to preview your component in different states — for example, an empty cart, a full cart, or an error state. See [Testing with Test Data Scenarios](#testing-with-test-data-scenarios) for more details.

### Step 6: Save Your Component

Click the **Save** button in the top bar. If this is a new component, Myop will create it on the server and assign it an ID. If it's an existing component, it will save your changes to the current variant.

<div style={{textAlign: 'center'}}>
<a href={require('./images/save.png').default} target="_blank">
  <img src={require('./images/save.png').default} alt="Save Component" width="400" />
</a>
</div>

### Step 7: Publish Live

Once you're happy with your component, click **Publish Live** to deploy it to your environment. Published variants are locked to prevent accidental edits — to make further changes, create a new variant.

<div style={{textAlign: 'center'}}>
<a href={require('./images/save-publish.png').default} target="_blank">
  <img src={require('./images/save-publish.png').default} alt="Save and Publish" width="400" />
</a>
</div>

---

## Managing Variants

Variants let you maintain multiple versions of a component. Each variant has its own code, name, and description.

<div style={{textAlign: 'center'}}>
<a href={require('./images/variants.png').default} target="_blank">
  <img src={require('./images/variants.png').default} alt="Managing Variants" width="800" />
</a>
</div>

### Create a New Variant

1. Click the **+** button next to the variant selector in the top bar.
2. Enter a name for the new variant.
3. The new variant opens in the editor with a copy of the current code.

### Duplicate a Variant

To create a variant based on an existing one, use the variant menu to duplicate it. The new variant will contain a copy of the original code.

### Switch Between Variants

Click the variant name or chevron in the top bar to open the variant dropdown, then select the variant you want to edit.

:::caution Unsaved Changes
If you have unsaved changes when switching variants, the builder will prompt you to confirm before discarding them.
:::

### Published Variants Are Locked

Once a variant is published (has a release), its code is locked to prevent unintended changes. To iterate further, create a new variant from the published one.

---

## Testing with Test Data Scenarios

Test data scenarios let you preview how your component behaves with different inputs without connecting to a real host application.

### Create a Test Scenario Manually

1. Expand the **Testing** section in the left panel.
2. Click **+ Add scenario**.
3. Give it a name (e.g., "Empty Cart", "Full Cart", "Error State").
4. Enter the JSON data that describes the state you want to test.
5. Click **Run** to see how your component renders with that data.

<div style={{textAlign: 'center'}}>
<a href={require('./images/dto-manually.png').default} target="_blank">
<img src={require('./images/dto-manually.png').default} alt="Adding a test scenario manually" width="400" />
</a>
</div>

### Create a Test Scenario with Myop Agent

You can also use the **Myop Agent** to create test scenarios without writing JSON by hand. Simply describe the state you'd like to test (e.g., "show a cart with 3 items and a discount applied"), and after clicking the **Save** button within the agent, a new test scenario is automatically added to your configuration.

<div style={{textAlign: 'center'}}>
<a href={require('./images/adding-dto-agent.png').default} target="_blank">
<img src={require('./images/adding-dto-agent.png').default} alt="Adding a test scenario with Myop Agent" width="400" />
</a>
</div>

### Manage Test Scenarios

- **Edit** — Click on an existing test scenario to modify its name or data.
- **Save** — Save your changes without running the scenario.
- **Run** — Save and run the scenario in a single click, so you can immediately see how your component renders with the updated data.
- **Duplicate** — Create a copy of a test scenario to quickly create variations.
- **Delete** — Remove test scenarios you no longer need.

---

## Data Flow

The Data Flow section in the left panel shows the input and output methods detected in your component code:

- **Input** — Functions like `myop_init_interface` that receive data from the host.
- **Output** — Calls to `myop_cta_handler` that send actions to the host.

### TypeScript Interface

When you build a component using the Myop Agent or the provided AI prompt, TypeScript type definitions are automatically generated and embedded in your component code. These types describe the data contract between your component and the host application — what data `myop_init_interface` expects, and what actions and payloads `myop_cta_handler` can send.

The Data Flow section in the left panel reads these type definitions and displays the detected input and output methods. This is useful for:

- Understanding the data contract between your component and the host at a glance.
- Sharing the expected data shape with other developers.
- Ensuring type safety when integrating the component into your host application.

These types are embedded in your component code inside a `<script type="myop/types">` block. You can view this block directly in the code editor to see the full type definitions of your component.

<div style={{textAlign: 'center'}}>
<a href={require('./images/types.png').default} target="_blank">
  <img src={require('./images/types.png').default} alt="Data Flow" width="500" />
</a>
</div>

---

## Connect: Integrate Into Your App

The **Connect** section generates ready-to-use code snippets for integrating your component into a host application.

1. Expand the **Connect** section in the left panel.
2. Click the **Connect** button.
3. Choose your framework or platform of the host application.
4. Copy the generated code snippet, npm package or prompt into your application / platform.

<div style={{textAlign: 'center', display: 'flex', justifyContent: 'center', gap: '16px'}}>
<a href={require('./images/connect.png').default} target="_blank">
  <img src={require('./images/connect.png').default} alt="Connect Modal" width="500" />
</a>
<a href={require('./images/npm_package.png').default} target="_blank">
  <img src={require('./images/npm_package.png').default} alt="NPM Package" width="500" />
</a>
</div>


If you're a non-developer, you can click the **Share with developer** button to share the component with a developer for integration.

<div style={{textAlign: 'center' }}>
<a href={require('./images/myop-live.png').default} target="_blank">
  <img src={require('./images/myop-live.png').default} alt="Connect Modal" width="700" />
</a>
</div>

---

## Tags

Tags help you organize and find components across your dashboard.

1. Expand the **Tags** section in the left panel.
2. Start typing to search existing tags or create a new one.
3. Press **Enter** to add a tag.
4. Click the **x** on a tag to remove it.

Tags are shared across your organization, so consistent naming helps the whole team.

<div style={{textAlign: 'center' }}>
<a href={require('./images/tags.png').default} target="_blank">
  <img src={require('./images/tags.png').default} alt="Connect Modal" width="400" />
</a>
</div>


---

## Sharing & Access

Control who can access your component:

1. Expand the **Sharing & Access** section in the left panel.
2. Click **Make Public** to toggle the component's visibility.
   - **Public** — Anyone with the link can view the component.
   - **Private** — Only members of your organization can access it.

---

## Myop Agent

The Myop Agent is an AI assistant embedded directly into the Component Builder. For a full list of its capabilities — including element selection, voice input, screenshot uploads, model selection, and more — see the [Myop Agent Tab](#myop-agent-tab) section above.

To get started:

1. Click the **Myop Agent** tab in the left panel.
2. Describe what you want to build or change.
3. The agent will generate or modify code in the editor.

:::tip
The Myop Agent works best when you give it clear, specific instructions — for example, "Add a loading spinner that shows while data is being fetched" or "Change the card layout to a horizontal orientation."
:::

---

# Rollout

Source: /docs/dashboard/rollout

## What Is the Rollout Screen?

The Rollout screen is Myop's deployment management interface. It gives you a centralized control board to view, manage, and deploy component variants across multiple environments — such as Dev, QA, and Production — all from a single view.

Whether you're promoting a component from staging to production or checking which version is live in each environment, the Rollout screen helps you stay in control of your deployments.

<div style={{textAlign: 'center'}}>
<a href={require('./images/rollout-overview.png').default} target="_blank">
  <img src={require('./images/rollout-overview.png').default} alt="Rollout Overview" width="800" />
</a>
</div>

## Key Features

- **Deployment Control Board** — View all your components and their deployed versions across every environment in a single table.
- **Version Selection** — Choose which variant to deploy to each environment.
- **Batch Deploy** — Queue multiple version changes and deploy them all at once.
- **Discrepancy Detection** — Identify environments where a component version differs from Production.
- **Search & Filter** — Find components by name, filter by tags, environments, recent changes, or discrepancies.
- **Environment Management** — Add, edit, or remove deployment environments from the settings.
- **Status Indicators** — See at a glance which versions are drifted, recently changed, or pending deployment.
- **Issue Tracking** — Flag and track issues on specific component deployments.
- **Mobile Responsive** — Full mobile support with a filter drawer, mobile search, and adaptive layout.

---

## Interface Overview

The Rollout screen is divided into three main areas: a top bar, a left sidebar for filters, and the main control board table.

### Top Bar

The top bar contains:

- **Settings** — Open environment configuration.
- **Deploy Button** — Deploy all queued changes. Shows the number of pending changes (e.g., "Deploy (3 Changes)"). Disabled when no changes are queued.

<div style={{textAlign: 'center'}}>
<a href={require('./images/top-bar.png').default} target="_blank">
<img src={require('./images/top-bar.png').default} alt="Rollout Overview" width="800" />
</a>
</div>

### Left Sidebar (Filters)

The left sidebar can be collapsed and expanded using the toggle button, giving you more space for the table. It contains:

- **Search by Name** — Filter components by name.
- **Recent** — Checkbox to show only components with recent deployments (within the last 3 days).
- **Discrepancies** — Checkbox to show only components with version differences across environments.
- **Environment** — Filter components by specific environments. Only components deployed to all selected environments are shown.
- **Tags** — Filter components by tags. Tags are populated dynamically from your components.
- **Clear All** — Reset all filters at once.

<div style={{textAlign: 'center'}}>
<a href={require('./images/left-sidebar.png').default} target="_blank">
<img src={require('./images/left-sidebar.png').default} alt="Left Sidebar" width="300" />
</a>
</div>

### Control Board Table

The main area of the Rollout screen is a table that maps **components** (rows) to **environments** (columns). Each cell shows the variant currently deployed to that environment.

- **Component Column** — Lists all your components. Each row shows the component name (clickable to navigate to the component page), stability status, and number of variants. The component column stays fixed when scrolling horizontally.
- **Environment Columns** — One column per environment (e.g., Dev, QA, E-Prod, Production). Each cell shows the deployed variant name, developer, version modification date, and deployment date.

<div style={{textAlign: 'center'}}>
<a href={require('./images/control-board.png').default} target="_blank">
  <img src={require('./images/control-board.png').default} alt="Control Board Table" width="800" />
</a>
</div>

### Status Badges

Cells in the table may display status badges to help you quickly identify what needs attention:

| Badge | Meaning |
|-------|---------|
| **Drifted** | The deployed version differs from Production |
| **Recent** | The version was modified within the last 3 days |
| **Updated** | A new version has been selected but not yet deployed |
| **Issue** | An open issue has been flagged on this component |
| **Requires Snippet** | The component requires a code snippet integration |

Components also display additional status indicators:

- **High changes** — At least one variant was modified within the last 3 days.
- **Stable for X days** — No recent modifications, showing how long the component has been stable.

### Locked Cells

When a variant is locked (e.g., controlled by an active experience), its cell cannot be clicked. Hovering over a locked cell shows a tooltip explaining why it is locked.

---

## Getting Started

### Step 1: Open the Rollout Screen

Navigate to the Myop Dashboard and click **Rollout** in the sidebar. The control board loads with all your components and their current deployment status.

### Step 2: Review Your Deployments

The table shows each component and its deployed variant per environment. Scan for **Drifted** badges to identify environments that are out of sync with Production.

### Step 3: Select a Version to Deploy

1. Click on a version cell in the table (e.g., the Dev column for a specific component).
2. A modal opens showing the currently deployed version and all available variants.
3. Select the variant you want to deploy.
4. Click **Save Changes**.

The cell updates with an **Updated** badge, indicating the change is queued but not yet deployed.

<div style={{textAlign: 'center'}}>
<a href={require('./images/version-select-modal.png').default} target="_blank">
<img src={require('./images/version-select-modal.png').default} alt="Version Selection Modal" width="400" />
</a>
</div>


### Step 4: Deploy Your Changes

Once you've queued all the changes you need:

1. Click the **Deploy** button in the top bar. The button shows the number of pending changes (e.g., "Deploy (3 Changes)").
   <div style={{textAlign: 'center'}}>
   <a href={require('./images/version-select.png').default} target="_blank">
     <img src={require('./images/version-select.png').default} alt="Version Select" width="600" />
   </a>
   </div>


2. All queued deployments are sent to the server.
3. The table refreshes to show the updated deployment status.

   <div style={{textAlign: 'center'}}>
   <a href={require('./images/version-changed.png').default} target="_blank">
   <img src={require('./images/version-changed.png').default} alt="Version Changed" width="600" />
   </a>
   </div>


---

## Search & Filtering

All filters are located in the left sidebar and can be combined to narrow down the component list.

### Search by Name

Type in the search input to filter components by name. The table updates instantly to show only matching components.

### Filter by Environment

Select one or more environments to show only components that have a variant deployed in all selected environments.

### Filter by Tags

Select tag checkboxes to filter components by category. Tags are shared across your organization and match the tags assigned in the Component Builder.

### Recent

Enable this checkbox to show only components with deployments modified in the last 3 days, so you can focus on what's actively being worked on.

### Discrepancies

Enable this checkbox to display only components where the deployed version differs across environments. This helps you quickly find environment drift and decide what needs to be aligned.

### Clear All Filters

Click **Clear all** in the sidebar header to reset all filters — search, checkboxes, tags, and environments — at once.

<div style={{textAlign: 'center'}}>
<a href={require('./images/filters.png').default} target="_blank">
<img src={require('./images/filters.png').default} alt="Filters" width="300" />
</a>
</div>

---

## Issue Tracking

You can flag issues on specific component deployments directly from the version selection modal.

1. Click on a version cell to open the modal.
2. Click **Open Issue** to flag the deployment.

   <div style={{textAlign: 'center'}}>
   <a href={require('./images/issue1.png').default} target="_blank">
   <img src={require('./images/issue1.png').default} alt="Open Issue" width="400" />
   </a>
   </div>
3. Click **Save Changes** to apply.

The component row will display an **Issue** badge. To close an issue, open the modal again and click **Close Issue**.

<div style={{textAlign: 'center'}}>
<a href={require('./images/issue2.png').default} target="_blank">
<img src={require('./images/issue2.png').default} alt="Issue Badge" width="800" />
</a>
</div>

---

## Environment Management

You can configure your deployment environments from the Rollout settings.

### Open Settings

Click the **Settings** icon in the top bar to open the environment configuration modal.

<div style={{textAlign: 'center'}}>
<a href={require('./images/environments.png').default} target="_blank">
<img src={require('./images/environments.png').default} alt="Issue Badge" width="400" />
</a>
</div>

### Add an Environment

1. Click **Add Environment**.
2. Enter a name and identifier for the new environment.
3. Optionally, mark it as a production environment.
4. Click **Save**.

### Edit an Environment

1. Click on an existing environment in the settings list.
2. Modify its name, identifier, or production status.
3. Click **Save**.

### Delete an Environment

1. Click the delete button next to the environment you want to remove.
2. Confirm the deletion in the dialog.
3. Click **Save**.

:::caution
Deleting an environment removes it from the control board and all associated deployment data. This action cannot be undone.
:::



---

## Deployment Workflow

The typical deployment workflow follows these steps:

1. **Build** — Create or update a component variant in the [Component Builder](/docs/dashboard/component-builder).
2. **Publish** — Publish the variant from the Component Builder.
3. **Select** — In the Rollout screen, select the published variant for the target environment.
4. **Queue** — The change is queued and marked with an **Updated** badge.
5. **Deploy** — Click **Deploy** to push all queued changes to their target environments.
6. **Verify** — Review the table to confirm the new versions are deployed.

---

## Tips

- Use the **Drifted** badge to catch environments that have fallen behind Production.
- Queue multiple changes before deploying to reduce the number of deployment operations.
- Use the **Discrepancies** filter before a release to ensure all environments are aligned.
- Tag your components consistently to make filtering easier across teams.
- Click on a component name to navigate directly to its Component Builder page.
- Collapse the sidebar to get more space for the control board table.

---

# Experience Builder

Source: /docs/dashboard/experience-builder

## What Is the Experience Builder?

The Experience Builder is Myop's interface for creating and managing personalized user experiences. An experience lets you define which component variants are shown to different user segments — based on rules like country, device type, or user group — all without writing code.

With the Experience Builder, you can target specific audiences, run A/B tests within segments, and set fallback variants for users who don't match any segment.

<div style={{textAlign: 'center'}}>
<a href={require('./images/experience-builder-overview.png').default} target="_blank">
  <img src={require('./images/experience-builder-overview.png').default} alt="Experience Builder Overview" width="800" />
</a>
</div>

## Key Features

- **Component Selection** — Choose which components to include in your experience.
- **Segment Configuration** — Define user segments with rule-based targeting (e.g., country, device type, user group).
- **A/B Testing** — Split traffic within a segment to test different variants with percentage-based distribution.
- **Variant Assignment** — Select which component variant each segment sees.
- **Fallback Variants** — Define default variants for users who don't match any segment.
- **Sticky Hashing** — Ensure consistent user bucketing across sessions using hash properties.
- **Tags & Organization** — Categorize experiences with tags for easy discovery.
- **Save & Publish** — Save your configuration and publish it as an immutable release.
- **Unsaved Changes Protection** — Prevents accidental navigation away from unsaved work.

---

## Interface Overview

The Experience Builder is divided into three main areas: a top bar, a left panel, and the main configuration area.

### Top Bar

The top bar contains experience and variant management:

**Experience Section (Left)**
- **Experience Name** — Inline editable name field. Changes are auto-saved.
- **Experience Selector** — Dropdown to switch between existing experiences (with search).
- **Menu** — Add or manage experiences.

**Variant Section (Center)**
- **Variant Name** — Inline editable name for the current variant.
- **Variant Selector** — Dropdown to switch between variants (with search). Shows a "Published" badge on published variants.
- **Add Variant** — Create a new variant or duplicate an existing one.

**Action Buttons (Right)**
- **Save** — Save the current configuration. Enabled only when there are unsaved changes and validations pass.
- **Publish** — Publish the current variant as an immutable release. Enabled only when the experience is saved and all required configuration is complete.

<div style={{textAlign: 'center'}}>
<a href={require('./images/top-bar.png').default} target="_blank">
<img src={require('./images/top-bar.png').default} alt="Experience Builder Overview" width="800" />
</a>
</div>

### Left Panel

The left panel can be collapsed and expanded using the toggle button. It contains:

#### Tags
- Add tags by typing and pressing Enter or comma.
- Tags appear as pills that can be removed.
- Tags are auto-saved separately from the main configuration.
- Tags are shared across your organization for consistent categorization.

#### Organization Properties
- Developer-defined values used for segmentation and sticky hashing.
- Properties added here become available as options in segment rules.
- Properties that are actively used in segments are marked as blocked and cannot be removed.

<div style={{textAlign: 'center'}}>
<a href={require('./images/left-sidebar.png').default} target="_blank">
<img src={require('./images/left-sidebar.png').default} alt="Left Sidebar" width="300" />
</a>
</div>

### Main Configuration Area

The main area contains three configuration cards that guide you through the setup process:

#### 1. Component Selection
- Multi-select dropdown with search to choose which components to include in the experience.
- Selected components appear as pills that can be removed.
- Once components are selected, segment configuration becomes available.

#### 2. Segment Configuration
- Shows a list of configured segments, each with its name, description, rules summary, and A/B testing indicator.
- **Add Segment** button to create new segments.
- Each segment can be edited or deleted.
- Empty state is shown when no segments are configured.

#### 3. Variants Selection
- Tabbed interface showing each selected component.
- For each segment, select which variant of each component to display.
- For A/B testing segments, select a variant per split group (e.g., Group A, Group B).
- **Fallback** section at the bottom to define default variants for users not matching any segment.


<div style={{textAlign: 'center'}}>
<a href={require('./images/configuration-area.png').default} target="_blank">
  <img src={require('./images/configuration-area.png').default} alt="Configuration Area" width="600" />
</a>
</div>

---

## Getting Started

### Step 1: Open the Experience Builder

Navigate to the Myop Dashboard and click **Add Experience** or select an existing experience. The Experience Builder opens with the configuration interface.

### Step 2: Name Your Experience

Click on the experience name field in the top bar and type a name (e.g., "Summer Campaign").

### Step 3: Select Components

1. In the **Component Selection** card, click the dropdown.
2. Search for and select the components you want to include (e.g., "Hero Banner", "Product Grid").
3. Selected components appear as pills. Click **x** to remove a component.

### Step 4: Configure Segments

1. Click **Add Segment** in the Segment Configuration card.
2. In the segment modal, fill in:
   - **Segment Name** (required) — e.g., "US Users".
   - **Description** (optional) — e.g., "Users browsing from the United States".
   - **Rules** — Define targeting conditions:
     - Select a **property** (e.g., countryCode).
     - Select an **operator** (e.g., `==`, `!=`, `in`, `not in`, `>`, `<`).
     - Enter a **value** (e.g., "US").
     - Click **Add Rule** for additional conditions.
3. Optionally, enable **A/B Testing**:
   - Check "Enable A/B Testing for this Segment".
   - Configure split groups with percentage distribution (must total 100%).
   - Add more groups as needed.
4. Optionally, select **Sticky Hashing Properties** for consistent user bucketing across sessions.
5. Click **Save Segment** to add the segment.

<div style={{textAlign: 'center'}}>
<a href={require('./images/segment-modal.png').default} target="_blank">
  <img src={require('./images/segment-modal.png').default} alt="Segment Modal" width="400" />
</a>
</div>

### Step 5: Assign Variants

1. In the **Variants Selection** card, use the component tabs to switch between components.
2. For each segment, select a variant from the dropdown.
3. For A/B testing segments, select a variant for each split group.
4. In the **Fallback** section, select a default variant for each component for users who don't match any segment.

<div style={{textAlign: 'center'}}>
<a href={require('./images/assign-variants.png').default} target="_blank">
  <img src={require('./images/assign-variants.png').default} alt="Assign Variants" width="400" />
</a>
</div>

### Step 6: Save Your Experience

Click the **Save** button in the top bar. The save button is enabled only when there are unsaved changes and all required fields are valid.

### Step 7: Publish

Once your experience is fully configured and saved, click **Publish** to create an immutable release. Published variants cannot be edited — to make changes, create a new variant.

---

## Segment Rules

Segment rules define which users belong to a segment. Each rule consists of:

| Field | Description |
|-------|-------------|
| **Property** | A user attribute (e.g., countryCode, deviceType, userGroup) |
| **Operator** | A comparison operator (`==`, `!=`, `>`, `>=`, `<`, `<=`, `in`, `not in`) |
| **Value** | The value to compare against |

Multiple rules within a segment are combined — a user must match all rules to be included in the segment.

---

## A/B Testing

A/B testing lets you split traffic within a segment to compare different variants.

1. Enable A/B testing when creating or editing a segment.
2. Define split groups (e.g., Group A: 50%, Group B: 50%).
3. Assign a different variant to each group.
4. Percentages must total 100%.

Use **Sticky Hashing Properties** to ensure users consistently see the same variant across sessions. Select one or more properties (e.g., userId) to create a hash key for consistent bucketing.

---

## Validation

### Save Validation
- At least one component must be selected.
- All A/B testing percentages within segments must total 100%.

### Publish Validation
- At least one component must be selected.
- At least one segment must be defined.
- All segments must have variants selected for all components.
- All A/B splits must have variants assigned.
- All components must have fallback variants selected.
- The experience must be saved with no unsaved changes.

---

## Tips

- Add **organization properties** in the left panel before configuring segments — these become available as rule options.
- Use **A/B testing** to validate changes before rolling them out to all users.
- Always set **fallback variants** to ensure all users see a component, even if they don't match any segment.
- Use **sticky hashing** with a stable property like userId to keep the user experience consistent across sessions.
- Tag your experiences consistently to make them easy to find across teams.

---

# Myop Dashboard

Source: /docs/dashboard

## Why Use Myop's Dashboard?

The Myop dashboard gives you tools to efficiently manage and update UI components. With
an intuitive interface, you can create, edit, and publish changes in real-time, freeing you to
focus on your next feature while variant updates run automatically, keeping your workflow smooth
and uninterrupted.


## Terminology  
### Component
A Myop component acts as an API layer between logic and [variant](#variant), enabling the logic to communicate with new _variants_ or new components. This contract allows runtime UI updates without modifying core code. 
Components include [Refs](#refs) and [Props](#props) to define logic, while [variants](#variant) reflect the visual aspect.

### Variant
Defines the visual appearance of a [component](#component). Myop allows multiple variants per [component](#component), enabling developers to swap or update the UI dynamically at runtime.
Variants can be created using [HTML](#html-component), [IFrame](#iframe), or [Web Components](#web-component).
A single [component](#component) can have multiple variants assigned and switched remotely.
When using [IFrame](#iframe) or [Web Component](#web-component), variant can also include basic logic.
The default variant is defined manually and reflects the main variant of the [component](#component) in the Myop system.

### Refs
Refs are a tool for interacting with elements across [components](#component). It can be defined as either `"myop-id"` data attribute, CSS selector, or xpath. It serves three main purposes:
- **Message communication:** Refs can be sent in messages to trigger actions or pass data between components.
- **Direct manipulation:** Developers can directly access and modify properties through refs, such as changing the title or the background color of an element.
- **External integration:** Refs allow embedding a component within another one, enabling dynamic interaction and reuse.

### Props
Runtime-generated objects that enable bidirectional data flow between the dashboard and components. 
While props are crucial, they are typically used in more complex, advanced scenarios.

### Segment
A user classification based on predefined rules (e.g., role, location, behavior). In Myop, a segment is a semantic reference to a function defined in the customer’s code.

### Experience
Reflects a combination of a [Segment](#segment) and [Variant](#variant), determining which [variant](#variant) or UI version a user sees.
Types of Experiences:
- **Basic Experience:** Assigns a variant to a whole [segment](#segment).
- **A/B Testing:** Splits a [segment](#segment) into multiple equal groups for controlled experimentation.
- **Promo Experience:** Defines a start and end date for a specific [variant](#variant). After expiration, Myop automatically rolls back to the default configuration.

### Flow
A collection of components grouped for testing or experimentation.

### HTML Component
A reusable piece of HTML code that can be used in web development. It generally describes any encapsulated unit of HTML that might include structure (elements), behavior (JavaScript), and styling (CSS).

### Web Component
A set of web platform APIs that allow you to create custom, reusable HTML tags. It encapsulates functionality and styles, ensuring that it remains isolated from other code on the page. 
Web components typically consist of three main technologies: 
- Custom Elements
- Shadow DOM
- HTML Templates.

### iFrame
An inline frame (known as iFrame) is an HTML element that allows you to embed another document within the current HTML document. 
It creates a separate browsing context, which means it can contain a different webpage or resource and operates independently within the enclosing document. 


### Composite
A higher-level UI structure that groups multiple [components](#component) or other composites. It helps developers organize complex UI hierarchies while keeping the UI modular and flexible.


## Key Capabilities

1. **Variants Lifecycle Management:**
  Manage variants separately from your codebase, so you can update or rollback changes without
  touching the core logic.
2. **Built-In Testing and Segmentation:**
  Assign variants to specific user groups, run A/B tests and create tailored experiences, all directly
  from the dashboard.
3. **Visualization and Navigation:**
  Keep everything organized. Easily navigate variants, version histories, and components to
  streamline your workflow.
4. **AI-Driven Enhancements:**
  Leverage AI-assisted tools to explore faster variant creation and smarter automation — at your
  own pace and on your terms.

## Let's Deep Dive

Let’s take a closer look at how the Myop dashboard works and explore its key capabilities in
action. Here’s a breakdown of its features before diving into the screenshot walkthrough.
![Open a Myop Account](/assets/images/Sign_in-4b30bb0ff05032cacd2a6d03109502d8.png 'Welcome to Myop')
![Myop Dashboard](/assets/images/Myop_dashboard-caf584b0e89e211d28535041cbd85a7a.png 'Myop Dashboard')

## Component Management

Once the Myop library is installed, your components appear on the dashboard, giving you a
centralized interface to view active components and manage their configurations seamlessly.
![Component Overview](/assets/images/view_components-2f39b67dbb34a022f8b90daaf312708c.png 'Components')
![Create New](/assets/images/new_component-e2c9611efdde69807fa100f1f30a66cc.png 'New Component')

## View and Edit Binding Rules

Access and modify binding rules (refs and props) that link your component's logic to its variant.
![Add Refs and Props](/assets/images/Refs_props-ecbb7cea542020f02d7d6cfb0d033da7.png 'Add Refs')
![Explore or Add Component Binding Rules](/assets/images/binding_rules-d92a6d7a4285ae626543cfebd0d92e74.png 'Binding rules')

## Navigate Variants

Explore and switch between variants effortlessly, with zoom capabilities for detailed inspection and
adjustments.
![Explore Variant](/assets/images/explore_variant-4ad9a5990ebc7a5ca7f909128c7dd958.png 'Explore')

## Add New Variants

Add variants using technologies you're comfortable with, such as plain HTML, design-to-code
tools, AI-generated variants, Web-components, or iFrames.
![Add Variant](/assets/images/add_variant-5ee7ac9adb224aa044855b0ba9df8528.png 'Add Variants')

:::info New Component Builder
The variant editor shown above is our original (v1) component editor built into the dashboard. We've since released a dedicated **[Component Builder](/docs/dashboard/component-builder)** — a full-featured development environment with a code editor, live preview, AI agent, and one-click publishing.
:::

## Create User Flows

Combine multiple components into user journeys when they share dependencies, serve related
functions, belong to a feature set, or require a specific order—such as onboarding, registration,
or checkout flows. User flows are needed for designing multiple experiences across an entire
journey.
![Build User Flows](/assets/images/User_flows-2dc6589cafbed7b03b8d18fafca67e31.png 'Build user flows')

## Experience Editor

The Myop Experience Editor is a visual tool that allows you to design, customize, and manage
experiences. It provides a clear interface to modify component variants, define user flows, assign
segments, and preview changes in real time
![Build Flows](/assets/images/Experience_editor-afbdcd6df419d2bd0803f8b870555e03.png 'Experience Editor')
![View Flows](/assets/images/View_flows-fee40f5d8318bc74f80bfc339f58ec15.png 'View Flows')

## Modify Variants

Click on a component to preview and modify variants directly in the Experience Editor to ensure
everything looks and works as expected.
![Change Variants](/assets/images/Replace_variants-065f47bb2bc7076280a88340646e58d7.png 'Change variants')

## Create a Segment

Currently, Myop Segments can only reference a function defined within your code.
![Create Segments](/assets/images/Segments-731acc27191ed62cfd88211d2bb22268.png 'Segments')

## Campaign / Promo Management

Set start and end dates for variants tied to campaigns or events, like special promotions or holiday
themes. Once a campaign ends, Myop automatically reverts to the default experience, saving
you the hassle of manual rollbacks.
![Time-Limited Skin](/assets/images/Time_limit_promo-38eb47a3e36598b5f446f202ce59286a.png 'Promo variant')

## Testing and Optimization

Assign variants to specific user groups or test multiple variants on separate user groups, then
roll out the best option effortlessly.
![Testing and Segmentation](/assets/images/ab_testing-3e66f95c29de417bd98681e016ab916d.png 'ab testing')
Switch between variants easily, and with one click, translate your actions and decision trees into
a complete configuration.

## Publish Changes

Deploy UI updates to production with a single click. Myop supports on-prem solutions when
required. Myop also lets you download configurations for local testing, deployment, or
integration into your existing workflows.
![Publish Changes](/assets/images/Publish_changes-acd13989f3909c380c126468e49f36a6.png 'Publish')

For managing deployments across multiple environments (Dev, QA, Production), see the **[Rollout](/docs/dashboard/rollout)** screen.

<br/>


### Dive in to Myop and get started today to focus on building, not revising.

---

# Myop Cloud APIs

Source: /docs/myopCloud

## Overview

Myop Cloud provides APIs to retrieve the latest component configurations for your applications in real time. These configurations are essential for rendering and managing components dynamically.

## Consume API

The Consume API is the primary way to fetch component configurations for rendering in your application.

### API Endpoint

```http
GET https://cloud.myop.dev/consume?id={COMPONENT_ID}
```

### Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `id` | string | Yes | The unique identifier for your component. You can find this in the [Myop Dashboard](https://dashboard.myop.dev/) when viewing the component. |
| `env` | string | No | The environment to load from (e.g., `prod`, `staging`). If not specified, defaults to preview mode. |
| `preview` | boolean | No | Set to `true` to load the unpublished preview version. Defaults to `true` when `env` is not specified. |

### Examples

**Load published component from production:**
```http
GET https://cloud.myop.dev/consume?id=abc123&env=prod
```

**Load published component from staging:**
```http
GET https://cloud.myop.dev/consume?id=abc123&env=staging
```

**Load preview (unpublished) version:**
```http
GET https://cloud.myop.dev/consume?id=abc123&preview=true
```

### Response

The API returns a JSON object containing the component configuration:

```json
{
  "item": {
    "id": "abc123",
    "name": "my-component",
    "consume_variant": [
      {
        "id": "variant-id",
        "name": "default",
        "loader": {
          // Component loader configuration (HTML, styles, scripts)
        }
      }
    ]
  }
}
```

### Error Responses

| Status Code | Description |
|-------------|-------------|
| 400 | Bad Request - Missing required `id` parameter |
| 404 | Not Found - Component or variant not found |

---

## Flow API (Legacy)

:::warning Deprecation Notice
The Flow API is deprecated and will be removed in a future version. Please migrate to the [Consume API](#consume-api) for fetching component configurations.
:::

The legacy Flow API fetches component configurations based on User Flows.

### API Endpoint

```http
GET https://cloud.myop.dev/flow?id={FLOW_ID}&resolve=components
```

### Parameters

- `FLOW_ID` – The unique identifier for your User Flow. You can find this in the browser's URL when viewing the flow in the Myop Dashboard.
- `resolve=components` – Ensures that the response includes the full component configuration.

### Response

The API returns an object of type [`IUserFlow`](https://docs.myop.dev/docs/sdk/common/interfaces/IUserFlow), which contains details about the user flow and its associated components.

### Migration Guide

To migrate from the Flow API to the Consume API:

1. Get your component ID from the Myop Dashboard (instead of the Flow ID)
2. Replace your API call:
   ```diff
   - GET https://cloud.myop.dev/flow?id={FLOW_ID}&resolve=components
   + GET https://cloud.myop.dev/consume?id={COMPONENT_ID}&env=prod
   ```
3. Update your response handling to use the new response structure

---

## Purpose of Myop Cloud

**Myop Cloud** is designed to provide a centralized and scalable way to manage UI components dynamically. It enables:

- **Real-time updates**: Ensure that your application always uses the latest published component configurations.
- **Environment support**: Test components in staging before deploying to production.
- **Preview mode**: Test unpublished changes before making them live.
- **Decoupled component management**: Define components in the Myop Dashboard and retrieve them as needed without hardcoding configurations in your frontend.
- **Micro frontend integration**: Myop Cloud makes it easier to load and manage remote UI components across different applications, improving flexibility in micro frontend architectures.

---

# Understanding the System Architecture

Source: /docs/learnMyop/systemArchitecture

## Introduction

Myop is a powerful meta-framework that implements a micro frontend solution designed to help developers manage and load UI components efficiently. It consists of multiple core components that work together to provide a seamless integration experience while optimizing performance. This tutorial explains the architecture of the Myop system, its different parts, and how they interact with each other.

## Myop System Components

The Myop system consists the following:

### 1. **Myop Dashboard**

The Myop Dashboard is a **SaaS platform** where users can:

- Define and manage UI components.
- Organize components into **User Flows**.
- Publish changes to ensure the latest version is available.
- Control how components interact with applications.

The dashboard acts as an **orchestrator**, providing developers with a UI-driven way to manage and configure their components.
One of the key advantages of using Myop is how ridiculously easy it makes implementing A/B testing, segmentation, gradual rollouts, and UI/UX changes without requiring a full application rebuild or deployment. Instead of modifying and deploying an entire frontend, developers can leverage Myop's orchestration capabilities to dynamically control which components appear for different users in real time.

[Read more about the Myop Dashboard](https://docs.myop.dev/docs/dashboard/Capabilities)

### 2. **Myop Cloud**

Myop Cloud is a **cloud-based infrastructure** that stores and serves UI components at runtime. It ensures that:

- Applications always retrieve the latest published configurations.
- Developers can load components dynamically without bundling them into the main application.
- Performance is optimized by minimizing application bundle sizes and supporting micro frontend strategies.

[Read more about the Myop Cloud](https://docs.myop.dev/docs/myopCloud)

### 3. **Myop SDK for Host Applications**

The Myop SDK for host applications is responsible for:

- Fetching component configurations from Myop Cloud.
- Rendering components dynamically at runtime.
- Handling lifecycle events and communication between components and the host application.

This SDK is consumed during the **build process** but interacts with Myop Cloud at runtime to ensure that applications always use the latest configurations.

With the Myop SDK, A/B testing, segmentation, and gradual rollouts become effortless. Since components are dynamically controlled by Myop Cloud, developers can introduce UI changes to different user groups instantly, without having to redeploy or modify the application itself. Compared to implementing such features manually, Myop provides an incredibly simple and scalable way to manage UI experiments and feature rollouts.

### 4. **Myop SDKs for Component Technologies**

To provide a **smooth loading and rendering experience**, Myop offers dedicated SDKs for various component technologies, including:

- **React**
- **Vue**
- **Angular**
- **Web Components**
- **iFrame-based components**

These SDKs handle:

- Efficient loading and rendering of components.
- Communication between components and the host application.
- Ensuring compatibility across different frontend frameworks.

Myop also offers the powerful feature of transforming the HTML you write in the dashboard into fully functional web components at runtime.
This allows for a seamless and dynamic development experience,
where the HTML code you create can instantly be converted into reusable,
encapsulated components that can be deployed across different environments.
By leveraging runtime conversion, Myop enables developers to quickly prototype,
test, and deploy their components without the need for complex build processes,
making it easier to iterate on designs and functionality in real time.

[Read more about HTML Skins](https://docs.myop.dev/docs/dashboard/Capabilities#add-new-skins)

## Seamless Component Delivery with Myop

One of the major benefits of Myop is its ability to deliver **new UI components** directly from the **Myop Dashboard** to **production applications**, all while keeping the core logic untouched. This means that frontend teams can introduce UI updates and modifications without the risk of breaking existing functionality.

- The contract for interacting and communicating with components remains **intact**.
- MyOp **validates** both component compatibility and contract compliance through the dashboard and cloud before publishing.
- Developers can deploy new UI elements without requiring a full application build or deployment.

This approach ensures that **UI updates, experiments, and iterations can be rolled out rapidly** while maintaining stability in production environments.

## How Myop Works Together

The Myop system works in the following way:

1. Developers define and manage components in the **Myop Dashboard**.
2. When ready, they **publish** the configurations to **Myop Cloud**.
3. The host application, using the **Myop SDK**, fetches the latest component configurations at runtime.
4. The dedicated SDK for the chosen technology ensures **smooth loading, rendering, and communication** between the host app and components.

## Performance Benefits

Using Myop correctly can **improve application performance** by:

- **Reducing bundle size**: Components are loaded dynamically instead of being bundled with the main application.
- **Optimizing rendering**: Myop ensures efficient component loading, minimizing unnecessary re-renders.
- **Enabling micro frontend architecture**: Applications can be modular, making it easier to scale and maintain them.

## Conclusion

Myop provides a **flexible and scalable** way to manage UI components in modern applications. By leveraging the **dashboard for orchestration**, **cloud for real-time updates**, and **SDKs for seamless integration**, Myop enables developers to build high-performance applications with a micro frontend approach.

---

# Basic Host Application

Source: /docs/learnMyop/JSHost

## Hosting Myop Components in a JavaScript Application

This tutorial provides a step-by-step guide to integrating [Myop](https://www.myop.dev/),
into a standard JavaScript application without using frameworks like React, Vue or Angular.
Myop enables dynamic UI management, allowing real-time updates without redeploying your application.

## Prerequisites

Before you begin, ensure you have the following:

- **Node.js**: [Download and install Node.js](https://nodejs.org/).
- **npm**: Node.js includes npm, the Node package manager.

## 1. Set Up Your Project Directory

Create a new directory for your project and navigate into it:

```bash
mkdir myop-js-app
cd myop-js-app
```

## 2. Initialize the Project

Initialize a new Node.js project:

```bash
npm init -y
```

## 3. Install the Myop SDK

Install the Myop SDK package:

```bash
npm install vite @myop/sdk
```

This command adds the Myop SDK to your project,
providing the tools needed to integrate Myop components.

## 4. Create the Vite Configuration

Create a `vite.config.js` file in your project root directory with the following content:

```js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    open: true, // Automatically open the browser on server start
  },
});
```

This configuration enables a simple setup to run the application with Vite.

## 5. Create the HTML File

Create an `index.html` file in your project directory with the following content:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Myop JavaScript Integration</title>
  </head>
  <body>
    <h1>Myop Component Integration</h1>
    <div id="myop-container"></div>
    <script src="./index.js" type="module"></script>
  </body>
</html>
```

This HTML file includes a `<div>` element with the ID `myop-container`,
which will serve as the container for the Myop component.
It also references an index.js script that you'll create next.

## 6. Create the JavaScript File

Create an `index.js` file in your project directory with the following content:

```js
import {hostSDK} from '@myop/sdk/host';
import {CloudRepository} from '@myop/sdk/helpers';

async function loadMyopComponent() {

  /*
   get your real component config
   you can load it directly from Myop cloud, read more about it at : 
   https://docs.myop.dev/docs/myopCloud/ 
   */

  const componentConfig = await CloudRepository.Main.fetchComponent('8c72d29b-c8a0-41cf-b08f-4acca96c7a16');

  /* OR
  const flowConfig = await CloudRepository.Main.fetchFlow('49283058-a787-4fa5-b0d2-516b2e6dc5e3');
  const componentConfig = flowConfig.components.find(c=>c.type.id === '8c72d29b-c8a0-41cf-b08f-4acca96c7a16')
  */

  const container = document.getElementById('myop-container');
  const myopComponent = await hostSDK.loadComponent(componentConfig, container);
}

loadMyopComponent();
```

In this script:
- We define an asynchronous function `loadMyopComponent` that:
  - Retrieves and initializes the `hostSDK`.
  - Get a `componentConfig` object containing the configuration for your Myop component.
    - there is few options from where and how to get `componentConfig` at runtime for the simplicity of this tutorial [read here](https://docs.myop.dev/docs/myopCloud/) how to load it directly from the Myop cloud.
  - Selects the `myop-container` `<div>` from the DOM.
  - Loads the specified Myop component into the selected container.
  - After you load Myop component you can start passing and getting props, interacting with refs and change component lifecycle events.
    - Read more about [interacting with components](https://docs.myop.dev)

## 7. Run the Application

To run your application, use Vite's development server. Add a script to your `package.json`:

```json
{
  "scripts": {
    "dev": "vite"
  }
}
```

Now, start the development server:

```bash
npm run dev
```

This will start the Vite development server, and the application will be available at http://localhost:3000 in your
browser.

## Additional Resources

By following these steps, you've should be able to integrating Myop components into a standard JavaScript application,
enabling dynamic and real-time UI updates.

For more detailed information and advanced configurations, refer to
the [Myop Documentation](https://docs.myop.dev/docs/intro).

---

# HTML Components

Source: /docs/learnMyop/HTMLComponent

## Overview
HTML Components in Myop are self-contained units that can be dynamically loaded and managed within your application. They allow for real-time UI modifications without requiring redeployment or backend changes, enabling developers to experiment with UI/UX changes independently.

This guide explains how to use the **Myop Dashboard** to create and manage HTML components.

:::tip 🤖 AI HTML Components
**AI HTML Components** use the **Local Frame** render mode, which provides complete isolation in an iframe. This is the recommended approach for AI-generated components. For detailed information on how to develop AI HTML components with proper structure, data loading, and APIs, see the [🤖 AI HTML Component Guide](/docs/learnMyop/html-components).
:::

## Table of Contents

- [Render Mode](#render-mode)
- [Creating Myop WebComponents](#creating-myop-webcomponents)
- [Creating Flows](#creating-flows)
- [Using Myop Components in JS](#using-myop-components-in-js)



## Render Mode
There are four possible ways to render your HTML code in Myop:
1.  **None** (Default):
   - **Description**: Renders the component directly in the light DOM (no shadow DOM or encapsulation).
   - **Use case**: When you want styles and markup to blend seamlessly with the parent document.
   - **Pros**:
       - Simpler debugging and styling.
       - Full access to global styles and selectors.
   - **Cons**:
       - No encapsulation; styles may leak in or out.
2. **Open ShadowRoot**:
    - **Description**: Renders the component inside an open shadow DOM.
    - **Use case**: When you want style encapsulation but still need access to the shadow DOM via JavaScript.
    - **Pros**:
        - Style isolation.
        - Can access shadow DOM via `element.shadowRoot`.
    - **Cons**:
        - Slightly more complex to debug.
3.  **Closed ShadowRoot**:
    - **Description**: Renders the component inside a closed shadow DOM, completely hiding its internals from the outside.
    - **Use case**: For internal components where strict encapsulation is needed.
    - **Pros**:
        - Maximum encapsulation; prevents accidental or intentional shadow DOM access.
    - **Cons**:
        - Cannot access `shadowRoot` from JavaScript. 
        - Harder to debug or test.
3.  **Local Frame**:
    - **Description**: Renders a complete HTML document as a component in a fully isolated iframe.
    - **Use case**: When absolute isolation is required — including scripts, styles, and layout.
    - **Pros**:
        - Complete isolation from the host page (CSS, JS, events).
        - Useful for micro frontends or embedding untrusted content.
    - **Cons**:
        - Heavier than shadow DOM.
        - Communication between frame and parent is more complex.


## Creating Myop WebComponents

Follow these steps to create a Myop WebComponent from your HTML component:

1. Open the [Myop dashboard](https://dashboard.myop.dev) <br/>
![Dashboard](/assets/images/dashboard-558a55ad43cf3021349f45cf158e6b3a.png 'Dashboard') <br/>

2. To create a new component using a predefined template, click on the "Use sample component" button.
3. To create a new component from scratch, click on the "Create from scratch" button.
4. Choose **Myop (HTML)** loader type:<br/>
   ![Loader Selection](/assets/images/loader-selection-747c8e34b6544a183479aba7b0c6b39d.png 'Loader Selection')
   <br/>
5. Define how this component connects to your host app using **props** and **refs**. <br/>
6. If you're using a template, you can add all **detected refs**. Otherwise, use the configuration panel to add your own **refs** and **props**.
   ![Add detected refs](/assets/images/add-detected-refs-390be461c6bc964054b4975625ee6c9d.png 'Add detected refs')
   <br/>
   ![Add ref](/assets/images/add-ref-a927ca2d8eb745f3dcab98e8c869a360.png 'Add ref')
   <br/>
7. Configure your component:
   - Enter the component name and description.
   - Choose the render mode according to the [Render Mode](#render-mode) section.
   - Enter your HTML code in the "HTML" section.
   - Click on the "Set to default" to set the relevant variant as the default one.
   - Click on the Delete button to delete a variant. <br/>
   - Click on the "Preview" button to copy the URL param and see the component in the browser. <br/>
     - **Note:** this feature is available only after saving the component. 
8. If you wish to generate an HTML template for your component with your configured refs, click on the "Generate" button. <br/>
9. If you wish to edit your HTML in a new window, click on the undocking into a separate window button. <br/>
![Variants Section ref](/assets/images/variants-section-b5fea68d7a5e5420ea516e7456dafe74.png 'Add ref')

**Note:** The GUID in the browser URL is the `componentId` that you'll need for later.

10. Saving:
- If you want to save the component, click on the "Save" button
- If you want to attach the component to an existing "Flow", Click on the ChevronDown button to search for the relevant flow
- If you want to attach the component to a new flow, click on the (after the component itself was already saved) <br/>
  ![Saving](/assets/images/saving-bce7f95d22932187ba7452fd7bc157f3.png 'Saving')

11. The component is saved and published! You can copy the code snippet and add this to your host application. <br/>
   ![Saved](/assets/images/saved-component-a9c9749327f6f98d5da844015b6b600a.png 'Saved')
   <br/>



## Creating Flows

1. Open the [Myop dashboard](https://dashboard.myop.dev)
   ![Dashboard](/assets/images/dashboard-558a55ad43cf3021349f45cf158e6b3a.png 'Dashboard')
   <br/>
2. Click on the "Create a new flow" button to add a new flow.

3. Add your component to the flow:
   ![Flow](/assets/images/flow-81bf8b2cc37ac890fd20fa0b1069f344.png 'Flow')


**Note:** The `GUID` in the browser URL is the `flowId` that you'll need later.

## Using Myop Components in JS

To integrate Myop components into your application, copy the following code snippet:

```js
import {hostSDK} from '@myop/sdk/host';
import {CloudRepository} from '@myop/sdk/helpers';

const componentId = 'c6efaea7-db53-4507-a836-a9acffe787b1';
const flowId = '49283058-a787-4fa5-b0d2-516b2e6dc5e3';

async function loadMyopComponent() {
    const componentConfig = await CloudRepository.Main.fetchComponent(componentId, flowId);
    const container = document.getElementById('myop-container')
    const component = await hostSDK.loadComponent(componentConfig, container);
}

loadMyopComponent();
```

## Additional Resources

- For more information on the Myop platform, visit [our website](https://myop.dev).
- For API documentation, refer to [our docs](https://docs.myop.dev).

---

# Angular Integration Guide

Source: /docs/learnMyop/Angular

## Overview
This guide explains how to integrate your Angular components with Myop, allowing you to expose them as web components and incorporate them into Myop flows.

## Table of Contents
- [Exposing Angular Components](#exposing-angular-components)
- [Creating Myop WebComponents](#creating-myop-webcomponents)
- [Creating Flows](#creating-flows)
- [Using Myop Components in Angular](#using-myop-components-in-angular)
- [Communication with Angular Components](#communication-with-angular-components)

## Exposing Angular Components

There are two ways to expose your Angular components to Myop:

### Direct Exposure
Use the `expose` function to directly expose your Angular component:

```typescript
import {appConfig} from './app/app.config';
import {AppComponent} from './app/app.component';
import {exposeAngularComponent} from "@myop/angular-remote";

exposeAngularComponent(AppComponent, 'test-comp-1', async () => {
   return appConfig
}).then();
```

## Creating Myop WebComponents

Follow these steps to create a Myop WebComponent from your Angular component:

1. Open the [Myop Dashboard](https://dashboard.myop.dev)<br/>
![Dashboard](/assets/images/dashboard-558a55ad43cf3021349f45cf158e6b3a.png 'Dashboard')
<br/>

2. To create a new component using a predefined template, click on the "Use sample component" button.
3. To create a new component from scratch, click on the "Create from scratch" button.
4. Choose Angular loader type:<br/>
![Loader Selection](/assets/images/loader-selection-747c8e34b6544a183479aba7b0c6b39d.png 'Loader Selection')
<br/>

5. Define how this component connects to your host app using **props** and **refs**. <br/>
6. If you're using a template, you can add all **detected refs**. Otherwise, use the configuration panel to add your own **refs** and **props**.
![Add detected refs](/assets/images/add-detected-refs-390be461c6bc964054b4975625ee6c9d.png 'Add detected refs')
<br/>
![Add detected refs](/assets/images/add-ref-e39321fb31df4a3dba2f57a4711d8bb8.png 'Add detected refs')
<br/>


7. Configure your component:
    - Enter the component name and description.
    - Enter your component URL (e.g., http://localhost:4400/main.js).
    - Enter the tag name that you exposed the component with.
    - Click on the "view source code" button to view the Angular code example.
    - Click on the "Set to default" to set the relevant variant as the default one.
    - Click on the Delete button to delete a variant. <br/>
   ![Variants Section](/assets/images/variants-section-8f0d6d3c3c8794d4dec5e20500375a73.png 'Variants Section')
<br/>


**Note:** The GUID in the browser URL is the `componentId` that you'll need later

8. Saving:
    - If you want to save the component, click on the "Save" button.
    - If you want to attach the component to an existing "Flow", click on the ChevronDown button to search for the relevant flow.
    - If you want to attach the component to a new flow, click on the "+ Add to flow" button after the component itself was already saved. <br/>
      ![Saving](/assets/images/saving-bce7f95d22932187ba7452fd7bc157f3.png 'Saving')

9. The component is saved and published! You can copy the code snippet and add this to your host application. <br/>
   ![Saved](/assets/images/saved-component-a9c9749327f6f98d5da844015b6b600a.png 'Saved')
<br/>


## Creating Flows

1. Open the [Myop Dashboard](https://dashboard.myop.dev)
![Dashboard](/assets/images/dashboard-558a55ad43cf3021349f45cf158e6b3a.png 'Dashboard')
<br/>

2. Click on the "Create a new flow" button to add a new flow.

3. Add your component to the flow. <br/>
![Flow](/assets/images/flow-81bf8b2cc37ac890fd20fa0b1069f344.png 'Flow')
<br/>


4. Note: The GUID in the browser URL is the `flowId` that you'll need later.


## Using Myop Components in Angular

You can integrate Myop components into your Angular application in two ways:

### Option 1: Via Routing

```typescript
// Before
import { TodoComponent } from './todo.component.ts';

{ path: 'todo', component: TodoComponent }

// After
import { MyopContainerComponent } from '@myop/angular';

{
    path: 'todo',
    data: {
      componentId: "ca8c0c4f-d26e-40c8-bf32-19eb104ee710",
      flowId: "1d75e2f9-9a2d-49f1-aeeb-6268921a29fe"
    },
    component: MyopContainerComponent
}
```

### Option 2: As a Component in Templates

```typescript
// Before
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TranslocoRootModule } from './transloco-root.module';
import { TodoComponent } from './todo.component.ts';

@Component({
   selector: 'app-root',
   imports: [TodoComponent],
   template: '<todo-component></todo-component>',
})
export class AppComponent {
 
}

// After
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TranslocoRootModule } from './transloco-root.module';
import { MyopContainerComponent } from '@myop/angular';

@Component({
   selector: 'app-root',
   imports: [MyopContainerComponent],
   template: `<myop-container
                  flowId="1d75e2f9-9a2d-49f1-aeeb-6268921a29fe"
                  componentId="4df90a03-553c-44a3-b153-d0ddccdc0010"/>`
})
export class AppComponent {

}
```

## Communication with Angular Components

The `MyopContainer` component accepts `inputs`, which can include a wide variety of data types. This may consist of simple primitive values, complex objects, functions, and even non-serializable objects.

The `MyopContainer` component also provides a `componentReady` event that you can use to communicate with your Angular component.

```html
<myop-container
   flowId="1d75e2f9-9a2d-49f1-aeeb-6268921a29fe"
   componentId="4df90a03-553c-44a3-b153-d0ddccdc0010"
   [inputs]="someObject"
   (componentReady)="onReady($event)"
 />
```
In your component class
```typescript

someObject = {
   key1: '123',
   key2: '456',
   someInputValue : 'testValue',
   fun1 : ()=>{
      alert('ffff')
   }
}

onReady(component: IMyopComponent) {
    // Send messages to the component
    component.send(ChangeTextMessage.create(component.refs.title, this.inputs.name));
    
    // Show the component
    component.show();
}
```

## Additional Resources

- For more information on the Myop platform, visit [our website](https://myop.dev).
- For API documentation, refer to [our docs](https://docs.myop.dev).

---

# Vue Integration Guide

Source: /docs/learnMyop/Vue

## Overview

This guide explains how to integrate your Vue components with Myop, allowing you to expose them as web components and incorporate them into Myop flows.

## Table of Contents

- [Exposing Vue Components](#exposing-vue-components)
- [Creating Myop WebComponents](#creating-myop-webcomponents)
- [Creating Flows](#creating-flows)
- [Using Myop Components in Vue](#using-myop-components-in-vue)
- [Communication with Vue Components](#communication-with-Vue-components)

## Exposing Vue Components

Use the `expose` function to directly expose your Vue component:

```typescript
import { App } from './app';
import { expose } from '@myop/Vue-remote';

expose(App, 'test-comp-1', async (app) => {
  // init the app instance, registen, execute use() etc..
  return app;
}).then();
```

## Creating Myop WebComponents

Follow these steps to create a Myop WebComponent from your Vue component:

1. Open the [Myop dashboard](https://dashboard.myop.dev) <br/>
![Dashboard](/assets/images/dashboard-558a55ad43cf3021349f45cf158e6b3a.png 'Dashboard') <br/>

2. To create a new component using a predefined template, click on the "Use sample component" button.
3. To create a new component from scratch, click on the "Create from scratch" button.
4. Choose Vue loader type:<br/>
   ![Loader Selection](/assets/images/loader-selection-747c8e34b6544a183479aba7b0c6b39d.png 'Loader Selection')
   <br/>
5. Define how this component connects to your host app using **props** and **refs**. <br/>
6. If you're using a template, you can add all **detected refs**. Otherwise, use the configuration panel to add your own **refs** and **props**. <br/>
   ![Add detected refs](/assets/images/add-detected-refs-1c29a2abcf4241ecf3af6166565a2304.png 'Add detected refs')
   <br/>
   ![Add detected refs](/assets/images/add-ref-b8ea6c7a8c46499732bbd73f14e36da5.png 'Add detected refs')
   <br/>
7. Configure your component:
    - Enter the component name and description.
    - Enter your component URL (e.g., http://localhost:4400/main.js).
    - Enter the tag name that you exposed the component with.
    - Click on the "view source code" button to view the React code example.
    - Click on the "Set to default" to set the relevant variant as the default one.
    - Click on the Delete button to delete a variant. <br/>
![Variants Section](/assets/images/variants-section-75e7526dd4247afc9168564ca272ab99.png 'Variants Section')<br/>

**Note:** The GUID in the browser URL is the `componentId` that you'll need later

7. Saving:
    - If you want to save the component, click on the "Save" button
    - If you want to attach the component to an existing "Flow", Click on the ChevronDown button to search for the relevant flow
    - If you want to attach the component to a new flow, click on the (after the component itself was already saved) <br/>
      ![Saving](/assets/images/saving-bce7f95d22932187ba7452fd7bc157f3.png 'Saving')
   
8. The component is saved and published! You can copy the code snippet and add this to your host application. <br/>
 ![Saved](/assets/images/saved-component-229b885c3aea9ff629d5283ae397fe54.png 'Saved')
   <br/>

## Creating Flows

1. Open the [Myop dashboard](https://dashboard.myop.dev)
   ![Dashboard](/assets/images/dashboard-558a55ad43cf3021349f45cf158e6b3a.png 'Dashboard')
   <br/>

2. Click on the "Create a new flow" button to add a new flow

3. Add your component to the flow:
   ![Flow](/assets/images/flow-81bf8b2cc37ac890fd20fa0b1069f344.png 'Flow')

**Note:** The GUID in the browser URL is the `flowId` that you'll need later

## Using Myop Components in Vue

You can integrate Myop components into your Vue application like so:

### As a Component in Templates

```typescript
<script setup lang="ts">
  import {ref} from 'vue'; <br/>
  import {MyopContainer} from '@myop/vue';
</script>

<template>
  <MyopContainer
      flowId="{flowId from dashboard}"
      componentId="{componentId from dashboard}
      name="Demo"
    />
</template>
```

## Communication with Vue Components

The `MyopContainer` component accepts any `props` that are passed down to the component, which can include a wide variety of data types. This may consist of simple primitive values, complex objects, functions, and even non-serializable objects.

The `MyopContainer` component also provides a `componentReady` event that you can use to communicate with your Vue component.

```html
<myop-container
  flowId="1d75e2f9-9a2d-49f1-aeeb-6268921a29fe"
  componentId="4df90a03-553c-44a3-b153-d0ddccdc0010"
  myProp="someObject"
  componentReady="onReady($event)"
/>
```

## Additional Resources

- For more information on the Myop platform, visit [our website](https://myop.dev).
- For API documentation, refer to [our docs](https://docs.myop.dev).

---

# 🚧 Web Components

Source: /docs/learnMyop/WebComponent

## Docs Are Coming Soon!

We’re excited to share that the feature is technically working and functional. However, the official documentation is still a work in progress. While the core functionality is in place and ready for use, we are actively working on finalizing all the details, guides, and setup instructions to ensure a smooth experience for everyone.

## What’s Ready:

- The feature is live and performing as expected.
- Core functionality is fully integrated and operational.

## What’s Not Ready:

- The official documentation is still being finalized.
- Some setup instructions and edge case details may be missing or incomplete.

We appreciate your patience and understanding as we continue to improve and complete the documentation.
Stay tuned for updates!

## Can't wait ?

Reach out to us on our Discord channel.
Our team and community members are happy to help you with integration, troubleshooting, or any other queries you may have.
Join us and stay updated on the latest features, tips, and best practices!

You can find the join button in our [Docs Main Page](https://docs.myop.dev)

---

# Full page as Component (IFrame)

Source: /docs/learnMyop/PageAsComponent

This documentation provides a comprehensive guide on utilizing Myop's iFrame components to transform your website pages into dynamic, 
remotely managed UI elements. By embedding your existing pages within iFrames, you can leverage Myop's capabilities to update and manage them in real-time without redeployment.

## 📌 Why Use iFrames with Myop?
Embedding your website pages as iFrame components in Myop offers several advantages:

- Real-Time UI Updates: Modify the UI dynamically without requiring host application changes or redeployment.

- Isolation: Keep the embedded content separate from your main application, reducing potential conflicts.

- Modularization: Treat entire pages as components, enhancing maintainability and scalability.

- Cross-Framework Compatibility: Integrate with various frontend frameworks seamlessly.

- Centralized Management: Control and update embedded pages from a central location.


## ⚙️ How to Embed a Website Page as a Myop iFrame Component

### Set Up Your Environment
   Ensure you have the Myop SDK integrated into your project. You can load the SDK via a script tag or install it using npm:

- Via Script Tag:

```html
<script src="https://dfdlk2p1m187v.cloudfront.net/myop_sdk.min.js"></script>
<script>
    const init = async () => {
        const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());
        const sdk = new IframeSDK()
        sdk.init();
    }
    init().then();
</script>
```

### Communicate with the Embedded iFrame

You can use the built-in messaging system, 
Myop provides over 30 pre-built messages to address common UI 
needs such as text changes, visibility toggles, and user interactions.
These built-in messages are accessible through the `MyopMessages` module, which is available upon initializing the Root SDK. 

For custom communication and data transfer which is not defined as Myop Message,

If the Host side is the one to initiate the action like  
change, register or execute some logic on the other side (inside the IFrame)
use  ``ExecuteScriptMessage`` or ``CustomRefMessage``.

If you need the component side to trigger a function with its own data
on the Host side use the on-demean execution of custom functions as follows.

On the Host side:
```js
component.myFunction = (data)=> {
    console.log('say hi :', data);
}
```

On the Iframe side:

```js
window.myop.IframeSDK.messageToHost({
    myop: true,
    messageType : 'ExecuteComponentMethod',
    method : 'myFunction',
    content : {
        name : 'myName'
    }
});
```

---

# Auto-Generated Packages

Source: /docs/learnMyop/AutoGeneratedPackages

## Overview

Myop's **Auto-Generated Packages** feature automatically creates framework-specific npm packages for your Myop components. These packages provide fully typed, tree-shakeable wrappers that integrate seamlessly with your application's framework, enabling a superior developer experience with IDE autocompletion and type safety.

## Table of Contents

- [How It Works](#how-it-works)
- [Benefits](#benefits)
- [Installation](#installation)
- [Framework-Specific Guides](#framework-specific-guides)
  - [React](#react)
  - [Vue](#vue)
  - [Angular](#angular)
  - [TypeScript (Vanilla)](#typescript-vanilla)
  - [React Native](#react-native)
- [Type Definitions](#type-definitions)
- [Configuration Options](#configuration-options)
- [Best Practices](#best-practices)

## How It Works

When you create a Myop HTML component with type definitions, the Myop server automatically generates npm-installable packages for each supported framework. These packages are:

1. **Generated on-demand**: Packages are created dynamically when requested via the npm install URL
2. **Framework-specific**: Each package includes proper peer dependencies and idioms for its target framework
3. **Fully typed**: TypeScript declarations are extracted from your component's `<script type="myop/types">` block
4. **Thin wrappers**: The actual component logic runs at runtime - packages only contain typed wrapper code (~6KB total)

### Package Generation Flow

```
Your HTML Component
        ↓
<script type="myop/types">
  interface MyopInitData { ... }
  interface MyopCtaPayloads { ... }
</script>
        ↓
Myop Server extracts types
        ↓
Generates framework-specific package
        ↓
Returns npm-installable .tgz
```

## Benefits

| Benefit | Description |
|---------|-------------|
| **Type Safety** | Full TypeScript support with IDE autocompletion for data and events |
| **Zero Bundle Bloat** | ~6KB total for all components regardless of quantity |
| **Hot Updates** | Update components without redeploying your application |
| **Developer Experience** | Typed event handlers auto-generated from your CTA definitions |
| **Framework Native** | Packages feel native to each framework's patterns and idioms |
| **No Build Step** | Install directly from URL - no compilation required |

## Installation

Auto-generated packages are installed directly from the Myop API using a URL-based npm install:

```bash
# General pattern
npm install https://cloud.myop.dev/npm/{component-id}/{framework}

# Example for React
npm install https://cloud.myop.dev/npm/abc123-def456/react

# Example for Vue
npm install https://cloud.myop.dev/npm/abc123-def456/vue

# Example for Angular
npm install https://cloud.myop.dev/npm/abc123-def456/angular

# Example for TypeScript/Vanilla JS
npm install https://cloud.myop.dev/npm/abc123-def456/typescript

# Example for React Native
npm install https://cloud.myop.dev/npm/abc123-def456/react-native
```

### Package.json Reference

You can also add packages directly to your `package.json`:

```json
{
  "dependencies": {
    "@myop/users-table": "https://cloud.myop.dev/npm/abc123-def456/react",
    "@myop/dashboard-widget": "https://cloud.myop.dev/npm/xyz789-uvw012/react"
  }
}
```

## Framework-Specific Guides

### React

#### Installation

```bash
# Install the host package (required)
npm install @myop/react @myop/sdk

# Install your auto-generated component
npm install https://cloud.myop.dev/npm/{component-id}/react
```

#### Usage

```tsx
import { UsersTable } from "@myop/users-table";

function App() {
  const users = [
    { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
    { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
  ];

  return (
    <UsersTable
      data={{ rows: users }}
      onRowClicked={(payload) => {
        console.log("Selected user:", payload.rowData);
      }}
      onDeleteClicked={(payload) => {
        deleteUser(payload.userId);
      }}
      onExportRequested={(payload) => {
        exportToFormat(payload.format);
      }}
      style={{ width: 600, height: 400 }}
    />
  );
}
```

#### Generated Package Structure

The React package generates a `forwardRef` wrapper component:

```typescript
import { MyopComponent } from "@myop/react";
import { forwardRef } from "react";

export const UsersTable = forwardRef<any, UsersTableProps>((props, ref) => (
  <MyopComponent
    {...props}
    componentId="{component-id}"
    ref={ref}
  />
));
```

#### Peer Dependencies

- `react >= 17.0.0`
- `@myop/react`

---

### Vue

#### Installation

```bash
# Install the host package (required)
npm install @myop/vue @myop/sdk

# Install your auto-generated component
npm install https://cloud.myop.dev/npm/{component-id}/vue
```

#### Usage

```vue
<script setup lang="ts">
import { UsersTable } from "@myop/users-table";
import { ref } from "vue";

const users = ref([
  { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
  { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
]);

function handleRowClicked(payload: { rowIndex: number; rowData: any }) {
  console.log("Selected user:", payload.rowData);
}

function handleDeleteClicked(payload: { userId: string }) {
  deleteUser(payload.userId);
}
</script>

<template>
  <UsersTable
    :data="{ rows: users }"
    @row-clicked="handleRowClicked"
    @delete-clicked="handleDeleteClicked"
    :style="{ width: '600px', height: '400px' }"
  />
</template>
```

#### Generated Package Structure

The Vue package generates a `defineComponent` wrapper:

```typescript
import { defineComponent, h } from "vue";
import { MyopComponent } from "@myop/vue";

export const UsersTable = defineComponent({
  name: "UsersTable",
  props: { /* typed props */ },
  emits: ["load", "error", "sizeChange", "cta", "row-clicked", "delete-clicked"],
  setup(props, { emit }) {
    return () => h(MyopComponent, {
      ...props,
      componentId: "{component-id}",
      onLoad: (component) => emit("load", component),
      onCta: (action, payload) => emit(action, payload),
    });
  },
});
```

#### Peer Dependencies

- `vue >= 3.0.0`
- `@myop/vue`

---

### Angular

#### Installation

```bash
# Install the host package (required)
npm install @myop/angular @myop/sdk

# Install your auto-generated component
npm install https://cloud.myop.dev/npm/{component-id}/angular
```

#### tsconfig.json Configuration

For Angular, you must configure TypeScript to compile from node_modules:

```json
{
  "compilerOptions": {
    "outDir": "./out-tsc/app"
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "node_modules/@myop/**/*.ts"
  ]
}
```

#### Usage

```typescript
import { Component } from "@angular/core";
import { UsersTable } from "@myop/users-table";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [UsersTable],
  template: `
    <users-table
      [data]="{ rows: users }"
      (rowClicked)="onRowClicked($event)"
      (deleteClicked)="onDeleteClicked($event)"
      [style]="{ width: '600px', height: '400px' }"
    />
  `,
})
export class AppComponent {
  users = [
    { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
    { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
  ];

  onRowClicked(payload: { rowIndex: number; rowData: any }) {
    console.log("Selected user:", payload.rowData);
  }

  onDeleteClicked(payload: { userId: string }) {
    this.deleteUser(payload.userId);
  }
}
```

#### Generated Package Structure

The Angular package generates a standalone component:

```typescript
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { MyopComponent } from "@myop/angular";

@Component({
  selector: "users-table",
  standalone: true,
  imports: [MyopComponent],
  template: `
    <myop-component
      [componentId]="componentId"
      [data]="data"
      (load)="load.emit($event)"
      (cta)="handleCta($event)"
    />
  `,
})
export class UsersTable {
  componentId = "{component-id}";

  @Input() data: UsersTableData | undefined;
  @Output() load = new EventEmitter<any>();
  @Output() rowClicked = new EventEmitter<RowClickedPayload>();
  @Output() deleteClicked = new EventEmitter<DeleteClickedPayload>();

  handleCta(event: { action: string; payload: any }) {
    // Route to typed output
  }
}
```

#### Peer Dependencies

- `@angular/core >= 17.0.0`
- `@myop/angular`

---

### TypeScript (Vanilla)

For vanilla JavaScript/TypeScript applications without a framework.

#### Installation

```bash
# Install the SDK (required)
npm install @myop/sdk

# Install your auto-generated component
npm install https://cloud.myop.dev/npm/{component-id}/typescript
```

#### Usage

```typescript
import { createUsersTable } from "@myop/users-table";

async function initComponent() {
  const usersTable = await createUsersTable({
    container: document.getElementById("users-table-container"),
    data: {
      rows: [
        { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
        { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
      ],
    },
    onLoad: (component) => {
      console.log("Component loaded:", component);
    },
    onError: (error) => {
      console.error("Error:", error);
    },
    // Generic CTA handler
    onCta: (action, payload) => {
      console.log("Action:", action, "Payload:", payload);
    },
    // Typed action handlers (auto-generated from CTA definitions)
    onRowClicked: (payload) => {
      console.log("Row clicked:", payload.rowData);
    },
    onDeleteClicked: (payload) => {
      deleteUser(payload.userId);
    },
  });

  // Wait for initialization
  await usersTable.initiated();

  // Update data
  usersTable.update({ rows: newUsers });

  // Get current data
  const currentData = usersTable.getData();

  // Subscribe to specific actions
  usersTable.on("export-requested", (payload) => {
    exportToFormat(payload.format);
  });

  // Cleanup
  usersTable.dispose();
}
```

#### Generated Package Structure

The TypeScript package generates a factory function:

```typescript
import { hostSDK } from "@myop/sdk/host";
import { CloudRepository } from "@myop/sdk/helpers";

export interface CreateUsersTableOptions {
  container: HTMLElement;
  data?: UsersTableData;
  onLoad?: (component: any) => void;
  onError?: (error: string) => void;
  onCta?: (action: string, payload: any) => void;
  onRowClicked?: (payload: RowClickedPayload) => void;
  onDeleteClicked?: (payload: DeleteClickedPayload) => void;
}

export async function createUsersTable(options: CreateUsersTableOptions) {
  const config = await CloudRepository.Main.fetchComponentV2("{component-id}");
  const component = await hostSDK.loadComponent(config, options.container, {
    data: options.data,
  });

  // Setup handlers and return interface...
  return {
    update: (data) => component.props.myop_init_interface(data),
    getData: () => component.props,
    on: (action, handler) => { /* subscribe */ },
    onRowClicked: (handler) => { /* typed subscribe */ },
    dispose: () => component.dispose(),
    initiated: () => component.initiated(),
  };
}
```

#### Peer Dependencies

- `@myop/sdk`

---

### React Native

For React Native mobile applications using WebView.

#### Installation

```bash
# Install the host package (required)
npm install @myop/react-native react-native-webview

# Install your auto-generated component
npm install https://cloud.myop.dev/npm/{component-id}/react-native
```

#### Usage

```tsx
import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import { UsersTable } from "@myop/users-table";

function App() {
  const [component, setComponent] = useState(null);

  const users = [
    { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
    { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
  ];

  return (
    <View style={styles.container}>
      <UsersTable
        data={{ rows: users }}
        onLoad={(proxy) => setComponent(proxy)}
        onError={(error) => console.error("Error:", error)}
        onRowClicked={(payload) => {
          console.log("Row clicked:", payload.rowData);
        }}
        onDeleteClicked={(payload) => {
          deleteUser(payload.userId);
        }}
        style={styles.table}
        scrollEnabled={false}
        zoomEnabled={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  table: { flex: 1 },
});
```

#### Component Proxy Interface

The `onLoad` callback provides a proxy for programmatic control:

```typescript
interface IMyopComponentProxy {
  id: string;

  props: {
    myop_init_interface: (data: any) => void;
    myop_cta_handler: ((action: string, payload?: any) => void) | null;
  };

  element: {
    set(path: string, value: any): void;
    get(path: string): Promise<any>;
    style: {
      set(property: string, value: string): void;
      get(property: string): Promise<string>;
    };
  };

  dispose(): void;
  hide(): void;
  show(): void;
  inspect(): void;
}
```

#### Generated Package Structure

The React Native package generates a `forwardRef` wrapper with `useImperativeHandle`:

```typescript
import { MyopComponent } from "@myop/react-native";
import { forwardRef, useImperativeHandle } from "react";

export const UsersTable = forwardRef<any, UsersTableProps>((props, ref) => {
  const componentRef = useRef(null);

  useImperativeHandle(ref, () => ({
    update: (data) => componentRef.current?.props.myop_init_interface(data),
    getComponent: () => componentRef.current,
  }));

  return (
    <MyopComponent
      {...props}
      componentId="{component-id}"
      onLoad={(proxy) => {
        componentRef.current = proxy;
        props.onLoad?.(proxy);
      }}
    />
  );
});
```

#### Peer Dependencies

- `react >= 17.0.0`
- `react-native >= 0.70.0`
- `@myop/react-native`

---

## Type Definitions

For auto-generated packages to extract types, your Myop HTML component must include a `<script type="myop/types">` block:

```html
<!DOCTYPE html>
<html>
<head>
  <script type="myop/types">
    // Data passed to the component via myop_init_interface
    interface MyopInitData {
      rows: Array<{
        id: number;
        name: string;
        email: string;
        role: string;
      }>;
      columns?: string[];
      sortable?: boolean;
    }

    // Events emitted via myop_cta_handler
    interface MyopCtaPayloads {
      "row-clicked": {
        rowIndex: number;
        rowData: any;
      };
      "delete-clicked": {
        userId: string;
      };
      "export-requested": {
        format: "csv" | "json" | "xlsx";
      };
    }
  </script>
</head>
<body>
  <!-- Component HTML -->
</body>
</html>
```

### Type Naming Conventions

The package generator looks for these type names (in order of preference):

1. `MyopInitData` - Data interface for component initialization
2. `*Props`, `*Input`, `*Config` - Alternative naming patterns
3. First `interface` or `type` declaration

For CTA payloads:

1. `MyopCtaPayloads` - CTA event payloads
2. Second `interface` or `type` declaration

### Action Name Conversion

CTA action names in kebab-case are automatically converted to PascalCase for typed handlers:

| CTA Action | React Handler | Vue Event | Angular Output |
|------------|---------------|-----------|----------------|
| `row-clicked` | `onRowClicked` | `@row-clicked` | `(rowClicked)` |
| `delete-clicked` | `onDeleteClicked` | `@delete-clicked` | `(deleteClicked)` |
| `export-requested` | `onExportRequested` | `@export-requested` | `(exportRequested)` |

---

## Configuration Options

### Preloading Components

Preload components for faster rendering:

```typescript
// React
import { preloadComponents, isPreloaded } from "@myop/react";

await preloadComponents(["component-1", "component-2"]);

if (isPreloaded("component-1")) {
  console.log("Component will render instantly");
}
```

```typescript
// Vue
import { preloadComponents, isPreloaded } from "@myop/vue";

await preloadComponents(["component-1", "component-2"]);
```

```typescript
// Angular
import { preloadComponents, isPreloaded } from "@myop/angular";

await preloadComponents(["component-1", "component-2"]);
```

### Custom Cloud Repository

Configure a custom Myop server URL:

```typescript
// React
import { setCloudRepositoryUrl, enableLocalDev } from "@myop/react";

// Production custom endpoint
setCloudRepositoryUrl("https://custom.myop.dev");

// Local development (localhost:9292)
enableLocalDev();
```

### Environment and Preview Modes

Load components from different environments:

```tsx
// React - Load from staging
<UsersTable
  data={data}
  environment="staging"
/>

// React - Load unpublished preview
<UsersTable
  data={data}
  preview={true}
/>

// React - Staging preview
<UsersTable
  data={data}
  environment="staging"
  preview={true}
/>
```

```vue
<!-- Vue -->
<UsersTable
  :data="data"
  environment="staging"
  :preview="true"
/>
```

```html
<!-- Angular -->
<users-table
  [data]="data"
  environment="staging"
  [preview]="true"
/>
```

---

## Best Practices

### 1. Define Clear Type Contracts

Always provide comprehensive type definitions in your component:

```typescript
interface MyopInitData {
  // Document each field
  /** List of items to display */
  items: Item[];
  /** Optional title for the component */
  title?: string;
  /** Theme configuration */
  theme?: "light" | "dark";
}

interface MyopCtaPayloads {
  /** Fired when an item is selected */
  "item-selected": {
    itemId: string;
    itemData: Item;
  };
}
```

### 2. Use Semantic Action Names

Use descriptive, kebab-case action names:

```typescript
// Good
"file-uploaded"
"user-logged-in"
"form-submitted"
"row-selected"

// Avoid
"click"
"action1"
"doThing"
```

### 3. Leverage Preloading

Preload components on app initialization for instant rendering:

```typescript
// In your app's entry point
import { preloadComponents } from "@myop/react";

// Preload critical components
preloadComponents([
  "dashboard-widget",
  "navigation-menu",
  "user-profile",
]);
```

### 4. Handle Loading and Error States

Always provide loading and error handling:

```tsx
// React
import { MyopLoader, MyopFallback } from "@myop/react";

<UsersTable
  data={data}
  loader={<MyopLoader />}
  fallback={<MyopFallback />}
  fadeDuration={300}
/>
```

```vue
<!-- Vue - Using slots -->
<UsersTable :data="data" :fadeDuration="300">
  <template #loader>
    <CustomLoader />
  </template>
  <template #fallback>
    <ErrorMessage @retry="reload" />
  </template>
</UsersTable>
```

### 5. TypeScript Project Configuration

For Angular projects, ensure your `tsconfig.json` includes node_modules:

```json
{
  "include": [
    "src/**/*.ts",
    "node_modules/@myop/**/*.ts"
  ]
}
```

---

## Additional Resources

- [React Integration Guide](/docs/learnMyop/ReactHost)
- [Vue Integration Guide](/docs/learnMyop/Vue)
- [Angular Integration Guide](/docs/learnMyop/Angular)
- [HTML Component Development](/docs/learnMyop/html-components)
- [Myop Dashboard](https://dashboard.myop.dev)
- [API Documentation](https://docs.myop.dev)

---

# CSS Presets

Source: /docs/learnMyop/CssPresets

CSS presets are named CSS themes you define once for your organization and inject into any Myop
component at render time. A component written by one team can then be previewed — or shipped —
under your brand's colors, spacing, and typography without touching its source.

Under the hood a preset is just a string of CSS. The SDK appends it to the component's `<head>`
inside a `<style>` tag before the component's iframe is written, so it is present on first paint
(no flash of unstyled content) and lands last in the cascade, where it wins over the component's
own styles by normal cascade order.

## Defining presets

Presets live at the organization level and are managed by org admins in the dashboard, under
**Settings → CSS presets**. Each preset has a name and a body of CSS.

Reads are open to every member of the org — anyone can preview a component under a preset — but
only admins can add, edit, or delete them.

## Using a preset in the SDK

Pass the preset's CSS to a component through the `injectCss` loader option:

```typescript
await myop.renderComponent('my-component-id', container, {
  injectCss: `
    :root {
      --brand-bg: #15151f;
      --brand-fg: #d6d6f5;
    }
    body {
      background: var(--brand-bg);
      color: var(--brand-fg);
    }
  `,
});
```

`injectCss` is a plain string, so it composes with anything — a preset fetched from your org, a
theme you compute at runtime, or a hard-coded stylesheet.

### React

```tsx
<MyopV2ReactComponent
  componentId="my-component-id"
  loaderOptions={{ injectCss: theme.css }}
/>
```

## Previewing presets in the component builder

The component builder has a **Style presets** section in its left panel. It lists your org's
presets as chips; clicking one re-renders the preview with that CSS injected, and **Off** returns
the component to its own styles. This is the fastest way to check that a component survives every
theme your organization uses before you publish it.

Presets are fetched the first time you open that section, not on page load, so components you
never theme cost nothing extra.

## Writing good preset CSS

Prefer **design tokens** over blanket overrides:

```css
/* Good — composes with the component's own styles */
:root {
  --myop-bg: #15151f;
  --myop-fg: #d6d6f5;
  --myop-accent: #9747ff;
}

/* Fragile — fights every component and breaks on any markup change */
div.card > span:nth-child(2) {
  color: #d6d6f5 !important;
}
```

A preset built from custom properties degrades gracefully: a component that doesn't consume a token
simply ignores it. A preset built from deep selectors and `!important` silently breaks the moment a
component's internal markup changes.

:::tip
Because the injected `<style>` is appended last in `<head>`, you rarely need `!important` at all.
Normal cascade order already puts your preset ahead of the component's own rules at equal specificity.
:::

## Constraints

| Limit | Value |
|---|---|
| Preset name | 200 characters |
| Preset CSS | 100,000 characters |

Preset CSS may not contain a closing `</style>` tag. Because the CSS is injected as the contents of
a `<style>` element — an HTML raw-text element — that sequence would terminate the tag early and
allow arbitrary markup to be injected into the component's frame. The server rejects it on write and
the SDK neutralizes it on read. No legitimate stylesheet contains it.

## Related

- [System Architecture](/docs/learnMyop/systemArchitecture)
- [HTML Components](/docs/learnMyop/HTMLComponent)

---

# React Host

Source: /docs/learnMyop/ReactHost

This page covers **embedding** Myop components in a host React app using
`@myop/react`. If you want to **author** a Myop component, see the
[CLI guide](/docs/cli) instead.

> Looking for the API reference? [`@myop/react` reference](/docs/sdk-react) ·
> [Single-file SDK reference](pathname:///sdk-reference.md)

## Installation

```bash
npm install @myop/react @myop/sdk
```

`@myop/sdk` is a peer dependency. Requires **React 18+**.

## Minimal example

```tsx
import { MyopComponent } from "@myop/react";

export function App() {
  return (
    <MyopComponent
      componentId="your-component-id"
      data={{ title: "Hello", items: ["a", "b"] }}
      onItemSelected={(payload) => console.log(payload)}
      style={{ width: 400, height: 300 }}
    />
  );
}
```

That's the whole contract. `componentId` is a UUID from the
[Myop dashboard](https://dashboard.myop.dev). Everything else is optional.

CTA actions emitted by the component show up as `on<PascalCase>` props on the
host — see [Receiving events](#receiving-events-cta-handlers) below.

:::danger Never create iframes manually
Always use `<MyopComponent>`. Never hand-roll an `<iframe>` pointing at a
Myop component — the SDK handles iframe lifecycle, messaging, sizing,
caching, and error recovery for you.
:::

## Passing data in

The `data` prop is delivered to the component's `myop_init_interface`. It's
reactive — updates trigger a re-init inside the iframe:

```tsx
const [count, setCount] = useState(0);

<MyopComponent
  componentId="counter"
  data={{ count }}
/>
```

`data` can be any JSON-serializable value. Functions are not transferred.

## Receiving events (CTA handlers)

Components emit CTA events via `myop_cta_handler(action, payload)`. The host
receives them through **typed per-action props** — `kebab-case` actions become
`onPascalCase` props. **This is the canonical form; use it in new code.**

```tsx
<MyopComponent
  componentId="task-list"
  data={{ tasks }}
  onTaskToggled={({ taskId, completed }) => {
    setTasks((prev) =>
      prev.map((t) => (t.id === taskId ? { ...t, completed } : t))
    );
  }}
  onTaskDeleted={({ taskId }) => {
    setTasks((prev) => prev.filter((t) => t.id !== taskId));
  }}
/>
```

| Component CTA action | React prop |
|----------------------|------------|
| `item-selected` | `onItemSelected` |
| `form-submitted` | `onFormSubmitted` |
| `task-toggled` | `onTaskToggled` |

### Fallback: generic handler

For dynamically named actions or quick experiments, a generic `on` prop
receives every event. Use this only when the typed form doesn't fit:

```tsx
<MyopComponent
  componentId="task-list"
  data={{ tasks }}
  on={(action, payload) => {
    if (action === "task-toggled") setTasks(/* ... */);
  }}
/>
```

Don't mix `on` with `on<Action>` props for the same action — pick one per
component instance.

## Props

| Prop | Type | Description |
|------|------|-------------|
| `componentId` | `string` | Myop component UUID |
| `data` | `TData` | Passed to `myop_init_interface`; reactive |
| `on` | `(action, payload) => void` | Generic CTA handler |
| `on[ActionName]` | `(payload) => void` | Typed handler for one CTA |
| `onLoad` | `(component) => void` | Fired after load completes |
| `onError` | `(error: string) => void` | Fired on load failure |
| `style` | `CSSProperties` | Container styles |
| `loader` | `ReactNode` | Custom loading indicator |
| `fallback` | `ReactNode` | Custom error fallback |
| `autoSize` | `boolean` | Auto-size container to content |
| `environment` | `string` | Load from a specific environment |
| `preview` | `boolean` | Load unpublished preview version |

## Auto-generated typed packages

Every Myop component has an auto-generated npm package that bakes in the
`componentId` and exposes a fully-typed component:

```bash
npm install https://cloud.myop.dev/npm/{componentId}/react
```

```tsx
import { TaskList } from "@myop/task-list";

<TaskList
  data={{ tasks }}
  onTaskToggled={(payload) => {
    // payload is typed: { taskId: string; completed: boolean }
  }}
/>
```

Recommended for production. Types come from the component's
`<script type="myop/types">` block.

## Preloading

Eagerly fetch components to avoid loading delay on first render:

```tsx
import { preloadComponents, isPreloaded } from "@myop/react";

await preloadComponents(["id-1", "id-2"]);
```

## Local dev

Point the SDK at a local component dev server (port `9292` by default):

```tsx
import { enableLocalDev } from "@myop/react";

if (import.meta.env.DEV) enableLocalDev();
```

You can also enable via a URL param without code changes — open the app with
`?env=dev`.

Run a component locally with:

```bash
cd path/to/your-component
npx myop dev
```

The dev server registers the component with the local repository and
hot-reloads on file changes.

## Configuration

All SDKs export the same configuration functions:

```ts
import {
  enableLocalDev,
  setCloudRepositoryUrl,
  setEnvironment,
} from "@myop/react";

enableLocalDev();                          // Load from localhost:9292
setCloudRepositoryUrl("https://custom");   // Custom cloud URL
setEnvironment("staging");                 // Default environment
```

## Where to next

- [Auto-generated packages](/docs/learnMyop/AutoGeneratedPackages) — typed components, baked-in `componentId`
- [System architecture](/docs/learnMyop/systemArchitecture) — how the host, cloud, and component runtime fit together
- [`@myop/react` reference](/docs/sdk-react) — full type signatures
- [Host integration (all frameworks)](/docs/cli/host-integration) — same flow for Vue, Angular, React Native

---

# Best Practices

Source: /docs/learnMyop/html-components/best-practices

Guidelines for building maintainable, performant, and accessible Myop components.

## Code Organization

### 1. Use IIFE Encapsulation

Keep all implementation private. Only expose the public API:

```javascript
(function() {
    // ===== PRIVATE =====
    let state = {};
    const cache = {};

    function privateHelper() { /* ... */ }
    function render() { /* ... */ }

    // ===== PUBLIC API =====
    window.myop_init_interface = function(data) { /* ... */ };
    window.myop_cta_handler = function(action, payload) { /* ... */ };
})();
```

### 2. Cache DOM References

Query the DOM once during initialization:

```javascript
// Good - cached references
const elements = {
    appRoot: document.getElementById('app-root'),
    loader: document.getElementById('loader-container'),
    list: document.querySelector('.item-list'),
    searchInput: document.querySelector('.search-input'),
    filterPanel: document.querySelector('.filter-panel')
};

function render() {
    elements.list.innerHTML = renderItems();
}

// Bad - repeated queries
function render() {
    document.querySelector('.item-list').innerHTML = renderItems();
}
```

### 3. Single Initialization Flag

Attach event listeners only once:

```javascript
let isInitialized = false;

function initializeComponent(data) {
    // Process data...
    render();

    // Attach listeners only on first init
    if (!isInitialized) {
        attachEventListeners();
        isInitialized = true;
    }

    hideLoader();
}
```

## Event Handling

### 1. Use Event Delegation

For dynamic content, attach listeners to stable parent elements:

```javascript
// Good - event delegation
elements.list.addEventListener('click', (e) => {
    const item = e.target.closest('.item');
    if (item) {
        handleItemClick(item.dataset.id);
    }

    const deleteBtn = e.target.closest('.delete-btn');
    if (deleteBtn) {
        handleDelete(deleteBtn.dataset.id);
    }
});

// Bad - attaching to each element
items.forEach(item => {
    item.addEventListener('click', () => handleItemClick(item.id));
});
```

### 2. Debounce Expensive Operations

```javascript
function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), delay);
    };
}

const debouncedSearch = debounce((query) => {
    filterComponents(query);
    render();
}, 300);

elements.searchInput.addEventListener('input', (e) => {
    debouncedSearch(e.target.value);
});
```

## Data Handling

### 1. Parse Dates Once

Transform date strings during initialization, not during render:

```javascript
// Good - parse once
function initializeComponent(data) {
    state.components = data.components.map(c => ({
        ...c,
        lastEditedDate: new Date(c.lastEditedDate)
    }));
}

function formatDate(date) {
    return date.toLocaleDateString(); // Already a Date object
}

// Bad - parse on every render
function renderItem(item) {
    const date = new Date(item.lastEditedDate); // Parsed every time
    return `<div>${date.toLocaleDateString()}</div>`;
}
```

### 2. Provide Fallback Values

Handle missing or malformed data:

```javascript
function normalizeComponent(raw) {
    return {
        id: raw.id || `temp-${Date.now()}`,
        name: raw.name || 'Unnamed Component',
        description: raw.description || '',
        tags: Array.isArray(raw.tags) ? raw.tags : [],
        environments: Array.isArray(raw.environments) ? raw.environments : [],
        developerName: raw.developerName || 'Unknown',
        lastEditedDate: raw.lastEditedDate
            ? new Date(raw.lastEditedDate)
            : new Date()
    };
}
```

### 3. Immutable Updates

Don't mutate the original state:

```javascript
// Good - immutable update
function updateComponent(updated) {
    state.components = state.components.map(c =>
        c.id === updated.id ? { ...c, ...updated } : c
    );
    render();
}

// Bad - mutation
function updateComponent(updated) {
    const index = state.components.findIndex(c => c.id === updated.id);
    state.components[index] = { ...state.components[index], ...updated }; // Mutates array
    render();
}
```

## Performance

### 1. Minimize DOM Operations

Batch DOM updates:

```javascript
// Good - single innerHTML update
function render() {
    elements.list.innerHTML = state.components
        .map(renderItem)
        .join('');
}

// Bad - multiple appendChild calls
function render() {
    elements.list.innerHTML = '';
    state.components.forEach(comp => {
        const div = document.createElement('div');
        div.innerHTML = renderItem(comp);
        elements.list.appendChild(div); // Triggers reflow each time
    });
}
```

### 2. Use Document Fragments for Large Lists

```javascript
function render() {
    const fragment = document.createDocumentFragment();

    state.components.forEach(comp => {
        const div = document.createElement('div');
        div.className = 'item';
        div.innerHTML = renderItemContent(comp);
        fragment.appendChild(div);
    });

    elements.list.innerHTML = '';
    elements.list.appendChild(fragment);
}
```

### 3. Virtual Scrolling for Large Datasets

For lists with 100+ items, consider virtual scrolling:

```javascript
const ITEM_HEIGHT = 60;
const VISIBLE_ITEMS = 20;
const BUFFER = 5;

function renderVisibleItems(scrollTop) {
    const startIndex = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER);
    const endIndex = startIndex + VISIBLE_ITEMS + (BUFFER * 2);

    const visibleItems = state.components.slice(startIndex, endIndex);

    elements.list.style.paddingTop = `${startIndex * ITEM_HEIGHT}px`;
    elements.list.style.height = `${state.components.length * ITEM_HEIGHT}px`;
    elements.list.innerHTML = visibleItems.map(renderItem).join('');
}

elements.scrollContainer.addEventListener('scroll', (e) => {
    requestAnimationFrame(() => {
        renderVisibleItems(e.target.scrollTop);
    });
});
```

## Security

### 1. Escape User Content

Always escape HTML in user-provided content:

```javascript
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function renderItem(item) {
    return `
        <div class="item">
            <h3>${escapeHtml(item.name)}</h3>
            <p>${escapeHtml(item.description)}</p>
        </div>
    `;
}
```

### 2. Validate Data Attributes

Use data attributes safely:

```javascript
// Good - validate before use
const itemId = e.target.dataset.id;
if (itemId && /^[a-zA-Z0-9-]+$/.test(itemId)) {
    handleItemClick(itemId);
}

// Bad - trusting user input
const itemId = e.target.dataset.id;
document.querySelector(`[data-id="${itemId}"]`); // XSS risk
```

### 3. Sanitize URLs

```javascript
function createLink(url, text) {
    // Only allow http/https URLs
    if (!/^https?:\/\//i.test(url)) {
        return escapeHtml(text);
    }
    return `<a href="${escapeHtml(url)}" rel="noopener noreferrer">${escapeHtml(text)}</a>`;
}
```

## Accessibility

### 1. Use Semantic HTML

```html
<!-- Good -->
<nav aria-label="Component filters">
    <ul role="listbox">
        <li role="option" aria-selected="true">All</li>
        <li role="option">Frontend</li>
    </ul>
</nav>

<main>
    <ul class="component-list" role="list">
        <li class="item" role="listitem">...</li>
    </ul>
</main>

<!-- Bad -->
<div class="nav">
    <div class="filter">All</div>
    <div class="filter">Frontend</div>
</div>
<div class="list">
    <div class="item">...</div>
</div>
```

### 2. Add ARIA Labels

```javascript
function renderItem(item) {
    return `
        <article
            class="item"
            aria-label="${escapeHtml(item.name)}"
            tabindex="0"
        >
            <h3>${escapeHtml(item.name)}</h3>
            <button
                class="delete-btn"
                aria-label="Delete ${escapeHtml(item.name)}"
                data-id="${item.id}"
            >
                Delete
            </button>
        </article>
    `;
}
```

### 3. Support Keyboard Navigation

```javascript
elements.list.addEventListener('keydown', (e) => {
    const item = e.target.closest('.item');
    if (!item) return;

    switch (e.key) {
        case 'Enter':
        case ' ':
            e.preventDefault();
            handleItemClick(item.dataset.id);
            break;
        case 'Delete':
        case 'Backspace':
            e.preventDefault();
            handleDelete(item.dataset.id);
            break;
        case 'ArrowDown':
            e.preventDefault();
            item.nextElementSibling?.focus();
            break;
        case 'ArrowUp':
            e.preventDefault();
            item.previousElementSibling?.focus();
            break;
    }
});
```

## Error Handling

### 1. Graceful Degradation

```javascript
function initializeComponent(data) {
    try {
        if (!data || !Array.isArray(data.components)) {
            throw new Error('Invalid data format');
        }

        state.components = data.components.map(normalizeComponent);
        render();
        hideLoader();
    } catch (error) {
        console.error('Failed to initialize:', error);
        showErrorState(error.message);
    }
}

function showErrorState(message) {
    elements.loader.style.display = 'none';
    elements.appRoot.innerHTML = `
        <div class="error-state" role="alert">
            <h2>Unable to load components</h2>
            <p>${escapeHtml(message)}</p>
            <button onclick="window.myop_cta_handler('retry')">
                Try Again
            </button>
        </div>
    `;
    elements.appRoot.style.opacity = '1';
}
```

### 2. Safe CTA Handler

```javascript
window.myop_cta_handler = function(action_id, payload) {
    try {
        // Validate action
        if (typeof action_id !== 'string') {
            console.warn('Invalid action_id type');
            return;
        }

        console.log('CTA:', action_id, payload);
    } catch (error) {
        console.error('CTA handler error:', error);
    }
};
```

## Summary Checklist

| Category | Practice |
|----------|----------|
| **Structure** | Use IIFE pattern |
| **Structure** | Cache DOM references |
| **Structure** | Initialize once flag |
| **Events** | Event delegation |
| **Events** | Debounce expensive operations |
| **Data** | Parse dates once |
| **Data** | Provide fallbacks |
| **Data** | Immutable updates |
| **Performance** | Batch DOM updates |
| **Performance** | Use fragments for large lists |
| **Security** | Escape HTML |
| **Security** | Validate data attributes |
| **Security** | Sanitize URLs |
| **Accessibility** | Semantic HTML |
| **Accessibility** | ARIA labels |
| **Accessibility** | Keyboard navigation |
| **Errors** | Graceful degradation |
| **Errors** | Safe handlers |

## Next Steps

- Review [Component Structure](/docs/learnMyop/html-components/component-structure) for the complete pattern
- Learn about [Data Loading](/docs/learnMyop/html-components/data-loading) lifecycle
- See [Host Integration](/docs/learnMyop/html-components/host-integration) examples

---

# Component Structure

Source: /docs/learnMyop/html-components/component-structure

A Myop HTML component consists of three main parts that work together to create a dynamic, data-driven UI.

## 1. HTML Structure

The main container for your component UI:

```html
<div id="app-root">
    <!-- Your component UI goes here -->
    <header class="component-header">
        <h1>My Component</h1>
    </header>

    <main class="component-content">
        <div class="item-list">
            <!-- Dynamic content rendered by JavaScript -->
        </div>
    </main>

    <footer class="component-footer">
        <button class="action-btn">Take Action</button>
    </footer>
</div>
```

### Key Points

- Use a root container (`#app-root`) to wrap all component UI
- Keep the initial HTML minimal - dynamic content is rendered by JavaScript
- Use semantic HTML for accessibility
- Apply `opacity: 0` by default (shown after data loads)

## 2. Loader UI

The loader is displayed while waiting for data from the host application:

```html
<div id="loader-container">
    <div class="loader-spinner"></div>
    <div class="loader-text">Loading...</div>
</div>
```

### Loader Styles

```css
#loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-text {
    color: #666;
    font-size: 14px;
}
```

### Initial State CSS

```css
/* Loader visible by default */
#loader-container {
    display: flex;
}

/* App hidden by default */
#app-root {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* App visible state */
#app-root.visible {
    opacity: 1;
}
```

## 3. JavaScript Logic (IIFE Pattern)

All JavaScript is encapsulated in an Immediately Invoked Function Expression (IIFE):

```javascript
(function() {
    // ===== PRIVATE SCOPE =====
    // All implementation details stay private

    // Private state
    let isInitialized = false;
    let componentData = [];

    // DOM references (cached for performance)
    const appRoot = document.getElementById('app-root');
    const loaderContainer = document.getElementById('loader-container');
    const itemList = appRoot.querySelector('.item-list');

    // Private functions
    function hideLoader() {
        loaderContainer.style.display = 'none';
        appRoot.classList.add('visible');
    }

    function renderItems(items) {
        itemList.innerHTML = items.map(item => `
            <div class="item" data-id="${item.id}">
                <h3>${item.name}</h3>
                <p>${item.description}</p>
            </div>
        `).join('');
    }

    function attachEventListeners() {
        // Use event delegation for dynamic content
        itemList.addEventListener('click', (e) => {
            const item = e.target.closest('.item');
            if (item) {
                const itemId = item.dataset.id;
                window.myop_cta_handler('item_clicked', { itemId });
            }
        });
    }

    function initializeComponent(data) {
        // 1. Store data
        componentData = data.items || [];

        // 2. Render UI
        renderItems(componentData);

        // 3. Attach event listeners (only once)
        if (!isInitialized) {
            attachEventListeners();
            isInitialized = true;
        }

        // 4. Show the component
        hideLoader();
    }

    // ===== PUBLIC API =====
    // Only these two functions are exposed globally

    window.myop_init_interface = function(data) {
        if (data) {
            initializeComponent(data);
        }
        // When called without arguments, return current state
        return { items: componentData };
    };

    window.myop_cta_handler = function(action_id, payload) {
        // Default handler - will be overwritten by host
        console.log('CTA:', action_id, payload);
    };
})();
```

## Why IIFE Pattern?

The IIFE pattern provides several benefits:

| Benefit | Description |
|---------|-------------|
| **Encapsulation** | All variables and functions are private to the component |
| **No Global Pollution** | Only `myop_init_interface` and `myop_cta_handler` are exposed |
| **Clean Namespace** | Multiple Myop components can coexist without conflicts |
| **Maintainability** | Clear separation between public API and implementation |

## Complete Example

Here's a full component template:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Myop Component</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #fff;
        }

        /* Loader styles */
        #loader-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            gap: 16px;
        }

        .loader-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* App styles */
        #app-root {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        #app-root.visible {
            opacity: 1;
        }

        .item {
            padding: 16px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }

        .item:hover {
            background: #f9f9f9;
        }

        .item h3 {
            font-size: 16px;
            margin-bottom: 4px;
        }

        .item p {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- Loader -->
    <div id="loader-container">
        <div class="loader-spinner"></div>
        <div class="loader-text">Loading...</div>
    </div>

    <!-- App -->
    <div id="app-root">
        <div class="item-list"></div>
    </div>

    <!-- Component Logic -->
    <script>
    (function() {
        let isInitialized = false;
        let componentData = [];

        const appRoot = document.getElementById('app-root');
        const loaderContainer = document.getElementById('loader-container');
        const itemList = appRoot.querySelector('.item-list');

        function hideLoader() {
            loaderContainer.style.display = 'none';
            appRoot.classList.add('visible');
        }

        function renderItems(items) {
            itemList.innerHTML = items.map(item => `
                <div class="item" data-id="${item.id}">
                    <h3>${item.name}</h3>
                    <p>${item.description}</p>
                </div>
            `).join('');
        }

        function attachEventListeners() {
            itemList.addEventListener('click', (e) => {
                const item = e.target.closest('.item');
                if (item) {
                    window.myop_cta_handler('item_clicked', {
                        itemId: item.dataset.id
                    });
                }
            });
        }

        function initializeComponent(data) {
            componentData = data.items || [];
            renderItems(componentData);

            if (!isInitialized) {
                attachEventListeners();
                isInitialized = true;
            }

            hideLoader();
        }

        window.myop_init_interface = function(data) {
            if (data) initializeComponent(data);
            return { items: componentData };
        };

        window.myop_cta_handler = function(action_id, payload) {
            console.log('CTA:', action_id, payload);
        };
    })();
    </script>

    <!-- Preview Mock Data -->
    <script id="myop_preview">
        setTimeout(() => {
            window.myop_init_interface({
                items: [
                    { id: '1', name: 'First Item', description: 'This is the first item' },
                    { id: '2', name: 'Second Item', description: 'This is the second item' },
                    { id: '3', name: 'Third Item', description: 'This is the third item' }
                ]
            });
        });
    </script>
</body>
</html>
```

## Next Steps

- Learn about the [Data Loading](/docs/learnMyop/html-components/data-loading) lifecycle
- Understand the [Public API](/docs/learnMyop/html-components/public-api) in detail
- Set up [Mock Data](/docs/learnMyop/html-components/mock-data) for development

---

# Data Loading

Source: /docs/learnMyop/html-components/data-loading

This guide explains the data loading mechanism in Myop components, from initial state to fully rendered UI.

## Loading Lifecycle

### Step 1: Initial State (Loader Visible)

When the component first loads, it shows a loading indicator while waiting for data:

```css
/* Loader is visible by default */
#loader-container {
    display: flex;
}

/* App is hidden by default */
#app-root {
    opacity: 0;
}
```

At this point:
- **Loader is visible** (`#loader-container` shown)
- **App is hidden** (`#app-root` has `opacity: 0`)
- Component waits for data via `window.myop_init_interface()`

### Step 2: Host Provides Data

The host application calls `window.myop_init_interface()` with data:

```javascript
// From the host application
window.myop_init_interface({
    components: [
        {
            id: "comp-1",
            name: "AuthService",
            developerName: "Alice Green",
            lastEditedDate: "2024-03-15T10:30:00.000Z",
            lastVersionName: "v1.2.3",
            environments: ["prod", "dev"],
            tags: ["backend", "security"]
        },
        // ... more components
    ]
});
```

### Step 3: Component Processes Data

Inside `myop_init_interface()`, the component:

1. **Stores and transforms data**
2. **Extracts values for filters/aggregations**
3. **Renders dynamic elements**
4. **Attaches event listeners**
5. **Hides loader and shows app**

```javascript
function initializeComponent(componentsData) {
    // 1. Store and transform data
    allComponentsState = componentsData.map(c => ({
        ...c,
        lastEditedDate: new Date(c.lastEditedDate)
    }));

    // 2. Extract unique values for filters
    const allDevelopers = [...new Set(
        allComponentsState.map(c => c.developerName)
    )].sort();

    // 3. Render filter groups dynamically
    renderFilterGroup('Developer', allDevelopers, 'developers');

    // 4. Attach event listeners (only once)
    if (!isInitialized) {
        attachSearchListener();
        attachFilterListeners();
        isInitialized = true;
    }

    // 5. Render the component list
    applyFiltersAndRender();

    // 6. Hide loader and show app
    hideLoader();
}
```

### Step 4: Component Becomes Interactive

After initialization, the component is fully interactive:

```javascript
function hideLoader() {
    document.getElementById('loader-container').style.display = 'none';
    document.getElementById('app-root').style.opacity = '1';
}
```

## Data Transformation

### Parsing Dates

Always parse date strings during initialization for consistent handling:

```javascript
function initializeComponent(data) {
    allComponentsState = data.components.map(component => ({
        ...component,
        // Parse ISO date string to Date object once
        lastEditedDate: new Date(component.lastEditedDate),
        createdDate: new Date(component.createdDate)
    }));
}
```

### Normalizing Data

Normalize data structures for easier rendering:

```javascript
function normalizeComponent(raw) {
    return {
        id: raw.id,
        name: raw.name || 'Unnamed',
        description: raw.description || '',
        status: raw.status?.toLowerCase() || 'unknown',
        tags: Array.isArray(raw.tags) ? raw.tags : [],
        metadata: {
            author: raw.developerName || raw.author || 'Unknown',
            version: raw.lastVersionName || raw.version || '1.0.0',
            updatedAt: new Date(raw.lastEditedDate || raw.updatedAt)
        }
    };
}
```

## Updating Component Data

### Full Data Replacement

Replace all data with a new dataset:

```javascript
window.myop_init_interface = function(data) {
    if (data && data.components) {
        // Full replacement
        initializeComponent(data);
    }
};
```

### Action-Based Updates

Support incremental updates with action types:

```javascript
window.myop_init_interface = function(input) {
    // No input = getter mode
    if (!input) {
        return { components: allComponentsState };
    }

    // Action-based update
    if (input.action) {
        switch (input.action) {
            case 'setData':
                initializeComponent(input.payload);
                break;
            case 'addItem':
                addComponent(input.payload);
                break;
            case 'removeItem':
                removeComponent(input.payload.id);
                break;
            case 'updateItem':
                updateComponent(input.payload);
                break;
        }
        return;
    }

    // Direct data initialization
    initializeComponent(input);
};

function addComponent(component) {
    allComponentsState.push(normalizeComponent(component));
    applyFiltersAndRender();
}

function removeComponent(id) {
    allComponentsState = allComponentsState.filter(c => c.id !== id);
    applyFiltersAndRender();
}

function updateComponent(updated) {
    const index = allComponentsState.findIndex(c => c.id === updated.id);
    if (index !== -1) {
        allComponentsState[index] = {
            ...allComponentsState[index],
            ...normalizeComponent(updated)
        };
        applyFiltersAndRender();
    }
}
```

## Loading States

### Skeleton Loading

For better UX, show skeleton placeholders:

```html
<div id="app-root">
    <div class="skeleton-list">
        <div class="skeleton-item">
            <div class="skeleton-line" style="width: 60%"></div>
            <div class="skeleton-line" style="width: 40%"></div>
        </div>
        <div class="skeleton-item">
            <div class="skeleton-line" style="width: 55%"></div>
            <div class="skeleton-line" style="width: 45%"></div>
        </div>
    </div>
    <div class="actual-content" style="display: none;">
        <!-- Actual content rendered here -->
    </div>
</div>
```

```css
.skeleton-item {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.skeleton-line {
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
```

### Error States

Handle loading errors gracefully:

```javascript
window.myop_init_interface = function(data) {
    if (!data) {
        return { components: allComponentsState };
    }

    // Handle error state
    if (data.error) {
        showErrorState(data.error.message);
        return;
    }

    initializeComponent(data);
};

function showErrorState(message) {
    const loaderContainer = document.getElementById('loader-container');
    const appRoot = document.getElementById('app-root');

    loaderContainer.style.display = 'none';
    appRoot.innerHTML = `
        <div class="error-state">
            <div class="error-icon">!</div>
            <h3>Failed to load</h3>
            <p>${escapeHtml(message)}</p>
            <button onclick="window.myop_cta_handler('retry')">
                Try Again
            </button>
        </div>
    `;
    appRoot.style.opacity = '1';
}
```

### Empty States

Show meaningful empty states:

```javascript
function renderItems(items) {
    const container = document.querySelector('.item-list');

    if (items.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <div class="empty-icon">📭</div>
                <h3>No items found</h3>
                <p>Try adjusting your filters or create a new item.</p>
                <button onclick="window.myop_cta_handler('create_new')">
                    Create New
                </button>
            </div>
        `;
        return;
    }

    container.innerHTML = items.map(renderItem).join('');
}
```

## Data Flow Diagram

```
┌─────────────────────────────────────────────────────────────┐
│                    HOST APPLICATION                          │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  1. MyopContainer renders component                  │   │
│  │  2. onReady callback fires                           │   │
│  │  3. Set myop_cta_handler                             │   │
│  │  4. Fetch data from API                              │   │
│  │  5. Call myop_init_interface(data)                   │   │
│  └────────────────────────┬────────────────────────────┘   │
└───────────────────────────│─────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                    MYOP COMPONENT                            │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  window.myop_init_interface(data):                   │   │
│  │    1. Store data in private state                    │   │
│  │    2. Transform data (parse dates, normalize)        │   │
│  │    3. Render component UI                            │   │
│  │    4. Attach event listeners (once)                  │   │
│  │    5. Hide loader, show app                          │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  User Interaction:                                   │   │
│  │    → Call window.myop_cta_handler('action', payload) │   │
│  └────────────────────────┬────────────────────────────┘   │
└───────────────────────────│─────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                    HOST APPLICATION                          │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  myop_cta_handler receives event:                    │   │
│  │    1. Parse action_id                                │   │
│  │    2. Handle action (navigate, open modal, etc.)     │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
```

## Next Steps

- Set up [Mock Data](/docs/learnMyop/html-components/mock-data) for development
- Learn the full [Public API](/docs/learnMyop/html-components/public-api) reference
- See [Host Integration](/docs/learnMyop/html-components/host-integration) examples

---

# Host Integration

Source: /docs/learnMyop/html-components/host-integration

Learn how to integrate Myop HTML components with your host application using React, Vue, Angular, or vanilla JavaScript.

## React Integration

### Using @myop/react

The `@myop/react` package provides the `MyopContainer` component for seamless integration:

```bash
npm install @myop/react
```

```tsx
import { MyopContainer } from "@myop/react";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";

export const ComponentList = () => {
    const navigate = useNavigate();
    const [components, setComponents] = useState([]);

    useEffect(() => {
        // Fetch data from your API
        fetchComponents().then(setComponents);
    }, []);

    return (
        <MyopContainer
            componentId="394ee658-b61b-46eb-a0ba-4856e986822d"
            onReady={(component) => {
                // 1. Set up CTA handler FIRST
                component.props.myop_cta_handler = (action, payload) => {
                    switch (action) {
                        case 'component_clicked':
                            navigate(`/component/${payload.componentId}`);
                            break;
                        case 'edit':
                            navigate(`/component/${payload.componentId}/edit`);
                            break;
                        case 'delete':
                            handleDelete(payload.componentId);
                            break;
                    }
                };

                // 2. Initialize with data
                component.props.myop_init_interface({ components });
            }}
        />
    );
};
```

### Data Transformation

Transform API responses to match your component's expected format:

```tsx
// Type definitions
interface ApiComponent {
    id: string;
    name: string;
    metadata: {
        author: string;
        version: string;
        lastModified: string;
    };
    config: {
        environments: string[];
        tags: string[];
    };
}

interface ComponentData {
    id: string;
    name: string;
    developerName: string;
    lastEditedDate: string;
    lastVersionName: string;
    environments: string[];
    tags: string[];
}

// Adapter function
function toComponentData(apiComponent: ApiComponent): ComponentData {
    return {
        id: apiComponent.id,
        name: apiComponent.name,
        developerName: apiComponent.metadata.author,
        lastEditedDate: apiComponent.metadata.lastModified,
        lastVersionName: apiComponent.metadata.version,
        environments: apiComponent.config.environments,
        tags: apiComponent.config.tags
    };
}

// Usage
const ComponentList = () => {
    return (
        <MyopContainer
            componentId="..."
            onReady={(component) => {
                fetchFromApi().then(response => {
                    const components = response.items.map(toComponentData);
                    component.props.myop_init_interface({ components });
                });
            }}
        />
    );
};
```

### Updating Component Data

Update the Myop component when React state changes:

```tsx
const ComponentList = () => {
    const [components, setComponents] = useState([]);
    const componentRef = useRef(null);

    // Store reference to the Myop component
    const handleReady = (component) => {
        componentRef.current = component;

        component.props.myop_cta_handler = handleAction;

        // Initial load
        fetchComponents().then(data => {
            setComponents(data);
            component.props.myop_init_interface({ components: data });
        });
    };

    // Update Myop component when state changes
    useEffect(() => {
        if (componentRef.current && components.length > 0) {
            componentRef.current.props.myop_init_interface({
                action: 'setData',
                payload: components
            });
        }
    }, [components]);

    return <MyopContainer componentId="..." onReady={handleReady} />;
};
```

---

## Vue Integration

### Using @myop/vue

```bash
npm install @myop/vue
```

```vue
<template>
    <MyopContainer
        :component-id="componentId"
        @ready="onComponentReady"
    />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { MyopContainer } from '@myop/vue';

const router = useRouter();
const componentId = '394ee658-b61b-46eb-a0ba-4856e986822d';
const myopComponent = ref(null);

const onComponentReady = (component) => {
    myopComponent.value = component;

    // Set up action handler
    component.props.myop_cta_handler = (action, payload) => {
        switch (action) {
            case 'component_clicked':
                router.push(`/component/${payload.componentId}`);
                break;
            case 'delete':
                handleDelete(payload.componentId);
                break;
        }
    };

    // Load initial data
    loadComponents();
};

const loadComponents = async () => {
    const response = await fetch('/api/components');
    const data = await response.json();

    if (myopComponent.value) {
        myopComponent.value.props.myop_init_interface({
            components: data.items
        });
    }
};

onMounted(loadComponents);
</script>
```

---

## Angular Integration

### Using @myop/angular

```bash
npm install @myop/angular
```

```typescript
// component-list.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { MyopContainerComponent } from '@myop/angular';
import { ComponentService } from './component.service';

@Component({
    selector: 'app-component-list',
    template: `
        <myop-container
            [componentId]="componentId"
            (ready)="onComponentReady($event)">
        </myop-container>
    `
})
export class ComponentListComponent implements OnInit {
    componentId = '394ee658-b61b-46eb-a0ba-4856e986822d';
    private myopComponent: any;

    constructor(
        private router: Router,
        private componentService: ComponentService
    ) {}

    ngOnInit() {
        this.loadComponents();
    }

    onComponentReady(component: any) {
        this.myopComponent = component;

        // Set up action handler
        component.props.myop_cta_handler = (action: string, payload: any) => {
            switch (action) {
                case 'component_clicked':
                    this.router.navigate(['/component', payload.componentId]);
                    break;
                case 'delete':
                    this.handleDelete(payload.componentId);
                    break;
            }
        };

        // Initialize if data already loaded
        if (this.components) {
            component.props.myop_init_interface({
                components: this.components
            });
        }
    }

    private components: any[] = [];

    private loadComponents() {
        this.componentService.getComponents().subscribe(data => {
            this.components = data;
            if (this.myopComponent) {
                this.myopComponent.props.myop_init_interface({
                    components: data
                });
            }
        });
    }

    private handleDelete(componentId: string) {
        this.componentService.delete(componentId).subscribe(() => {
            this.myopComponent.props.myop_init_interface({
                action: 'removeItem',
                payload: { id: componentId }
            });
        });
    }
}
```

---

## Vanilla JavaScript Integration

### Using the Host SDK

```bash
npm install @myop/sdk
```

```html
<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <div id="myop-container"></div>

    <script type="module">
        import { hostSDK } from '@myop/sdk/host';
        import { CloudRepository } from '@myop/sdk/helpers';

        const componentId = '394ee658-b61b-46eb-a0ba-4856e986822d';
        const flowId = '49283058-a787-4fa5-b0d2-516b2e6dc5e3';

        async function init() {
            // 1. Fetch component configuration
            const config = await CloudRepository.Main.fetchComponent(
                componentId,
                flowId
            );

            // 2. Load the component
            const container = document.getElementById('myop-container');
            const component = await hostSDK.loadComponent(config, container);

            // 3. Set up action handler
            component.props.myop_cta_handler = (action, payload) => {
                console.log('Action:', action, payload);

                switch (action) {
                    case 'component_clicked':
                        window.location.href = `/component/${payload.componentId}`;
                        break;
                }
            };

            // 4. Fetch and load data
            const response = await fetch('/api/components');
            const data = await response.json();

            component.props.myop_init_interface({
                components: data.items
            });
        }

        init();
    </script>
</body>
</html>
```

---

## Integration Best Practices

### 1. Set Up Handler Before Data

Always set up `myop_cta_handler` before calling `myop_init_interface`:

```javascript
// Correct order
component.props.myop_cta_handler = handleAction;  // First
component.props.myop_init_interface(data);        // Second

// Why: User might interact immediately after data loads
```

### 2. Handle Loading States

Show loading UI while fetching data:

```tsx
const [isLoading, setIsLoading] = useState(true);

return (
    <div>
        {isLoading && <LoadingSpinner />}
        <MyopContainer
            componentId="..."
            style={{ display: isLoading ? 'none' : 'block' }}
            onReady={(component) => {
                fetchData().then(data => {
                    component.props.myop_init_interface(data);
                    setIsLoading(false);
                });
            }}
        />
    </div>
);
```

### 3. Error Handling

Handle errors gracefully:

```javascript
onReady={(component) => {
    component.props.myop_cta_handler = handleAction;

    fetchData()
        .then(data => {
            component.props.myop_init_interface(data);
        })
        .catch(error => {
            component.props.myop_init_interface({
                error: {
                    message: error.message,
                    code: 'FETCH_ERROR'
                }
            });
        });
}}
```

### 4. Cleanup on Unmount

Clean up resources when the host component unmounts:

```tsx
useEffect(() => {
    return () => {
        // Clean up if needed
        if (componentRef.current) {
            componentRef.current = null;
        }
    };
}, []);
```

### 5. Type Safety

Define types for better development experience:

```typescript
interface MyopComponent {
    props: {
        myop_init_interface: (data?: ComponentData | ActionPayload) => void;
        myop_cta_handler: (action: ActionType, payload: ActionPayload) => void;
    };
}

type ActionType =
    | 'component_clicked'
    | 'edit'
    | 'delete'
    | 'refresh';

interface ActionPayload {
    componentId?: string;
    [key: string]: any;
}
```

## Next Steps

- Review [Best Practices](/docs/learnMyop/html-components/best-practices) for component development
- Learn about [Data Loading](/docs/learnMyop/html-components/data-loading) lifecycle
- Explore the [Public API](/docs/learnMyop/html-components/public-api) reference

---

# 🤖 AI HTML Components

Source: /docs/learnMyop/html-components

This comprehensive guide explains how to create Myop 🤖 AI HTML components with proper data loading, mock data mechanisms, and integration patterns with host applications.

:::tip Recommended: Use MCP for AI-Assisted Development
For the best experience building AI HTML components, we recommend using the **[Myop MCP Server](/docs/mcp-setup)**. The MCP integration:
- **Always up-to-date** — Automatically fetches the latest component guide and best practices
- **Seamless uploads** — Build and deploy components directly from your AI assistant
- **Iterative development** — Quickly update and redeploy components with simple commands

Set up MCP once, and your AI assistant will always have access to the current Myop component patterns.
:::

:::info Local Development with Myop CLI
For local development with file watching and hot module replacement, use the **[Myop CLI](/docs/cli)**:
```bash
npm install -g @myop/cli
myop dev
```
The CLI provides a development server at `http://localhost:9292` with automatic rebuilding, HMR support, and a visual dashboard.
:::

## Overview

Myop HTML components are self-contained UI units that communicate with host applications through a well-defined public API. They follow a specific pattern that enables:

- **Dynamic data loading** from host applications
- **Preview mode** with mock data for development
- **Bi-directional communication** between component and host
- **Encapsulation** of all implementation details

## Quick Start

A minimal Myop component has this structure:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #loader-container { display: flex; /* shown by default */ }
        #app-root { opacity: 0; /* hidden by default */ }
    </style>
</head>
<body>
    <div id="loader-container">
        <div class="loader-spinner"></div>
    </div>

    <div id="app-root">
        <!-- Your component UI -->
    </div>

    <script>
    (function() {
        // Private implementation
        function hideLoader() {
            document.getElementById('loader-container').style.display = 'none';
            document.getElementById('app-root').style.opacity = '1';
        }

        function initializeComponent(data) {
            // Render your UI with the data
            hideLoader();
        }

        // Public API
        window.myop_init_interface = function(data) {
            if (data) initializeComponent(data);
        };

        window.myop_cta_handler = function(action_id, payload) {
            console.log('Action:', action_id, payload);
        };
    })();
    </script>

    <!-- Mock data for preview -->
    <script id="myop_preview">
        setTimeout(() => {
            window.myop_init_interface({ items: [] });
        });
    </script>
</body>
</html>
```

## Guide Sections

### [Component Structure](/docs/learnMyop/html-components/component-structure)
Learn about the three main parts of a Myop component: HTML structure, loader UI, and encapsulated JavaScript.

### [Data Loading](/docs/learnMyop/html-components/data-loading)
Understand the data loading mechanism and lifecycle from initial loader state to fully rendered component.

### [Mock Data](/docs/learnMyop/html-components/mock-data)
Set up preview mock data for development and testing without a host application.

### [Public API](/docs/learnMyop/html-components/public-api)
Reference for the two global functions: `myop_init_interface` and `myop_cta_handler`.

### [Host Integration](/docs/learnMyop/html-components/host-integration)
Learn how to integrate Myop components with React, Vue, Angular, or vanilla JavaScript host applications.

### [Best Practices](/docs/learnMyop/html-components/best-practices)
Guidelines for building maintainable, performant, and accessible Myop components.

## Key Concepts

### Separation of Concerns

Myop components follow a clear separation of concerns:

| Responsibility | Component | Host Application |
|---------------|-----------|------------------|
| UI Rendering | ✓ | |
| User Interactions | ✓ | |
| Data Fetching | | ✓ |
| Navigation | | ✓ |
| Business Logic | | ✓ |

### Communication Flow

```
HOST APPLICATION (React/Vue/Angular)
  1. Renders Myop component
  2. onReady callback fires
  3. Sets up myop_cta_handler
  4. Fetches data from API
  5. Calls myop_init_interface(data)
         ↓
MYOP HTML COMPONENT
  window.myop_init_interface(data):
    1. Stores data in private state
    2. Transforms data (parse dates, etc.)
    3. Renders component UI
    4. Hides loader, shows app

  User Interaction:
    → Calls window.myop_cta_handler('action', payload)
         ↓
HOST APPLICATION
  myop_cta_handler receives event:
    1. Parses action_id
    2. Handles action (navigate, open modal, etc.)
```

## Next Steps

1. **New to Myop?** Start with [Component Structure](/docs/learnMyop/html-components/component-structure)
2. **Building a component?** See [Data Loading](/docs/learnMyop/html-components/data-loading) and [Public API](/docs/learnMyop/html-components/public-api)
3. **Integrating with your app?** Check [Host Integration](/docs/learnMyop/html-components/host-integration)
4. **Need optimization tips?** Review [Best Practices](/docs/learnMyop/html-components/best-practices)

---

# Mock Data for Preview

Source: /docs/learnMyop/html-components/mock-data

Mock data allows you to preview and test your Myop component without a host application. This is essential for development, documentation, and demos.

## Basic Setup

Add a special script tag with `id="myop_preview"` at the end of your component:

```html
<script id="myop_preview">
    setTimeout(() => {
        window.myop_init_interface({
            components: [
                {
                    id: "comp-id-0",
                    name: "AuthService",
                    developerName: "Alice Green",
                    lastEditedDate: "2024-03-15T10:30:00.000Z",
                    lastVersionName: "v1.2.3",
                    environments: ["prod"],
                    tags: ["backend", "security"]
                }
            ]
        });
    });
</script>
```

## Why setTimeout?

The `setTimeout()` is used to simulate asynchronous data loading:

```javascript
// Without setTimeout - data loads synchronously (unrealistic)
window.myop_init_interface({ ... });

// With setTimeout - simulates async API call (realistic)
setTimeout(() => {
    window.myop_init_interface({ ... });
});

// With delay - simulates slow network
setTimeout(() => {
    window.myop_init_interface({ ... });
}, 1000); // 1 second delay
```

This ensures your loader state is visible and your component handles async data correctly.

## Mock Data Structure

### Matching Production Data

Your mock data should mirror the structure your host application will provide:

```html
<script id="myop_preview">
    setTimeout(() => {
        window.myop_init_interface({
            // Match the exact structure from your API
            components: [
                {
                    id: "comp-1",
                    name: "UserProfile",
                    developerName: "John Doe",
                    lastEditedDate: "2024-03-15T10:30:00.000Z",
                    lastVersionName: "v2.1.0",
                    environments: ["prod", "staging", "dev"],
                    tags: ["frontend", "user", "profile"]
                },
                {
                    id: "comp-2",
                    name: "PaymentGateway",
                    developerName: "Jane Smith",
                    lastEditedDate: "2024-03-14T09:15:00.000Z",
                    lastVersionName: "v1.5.2",
                    environments: ["prod"],
                    tags: ["backend", "payments", "critical"]
                },
                {
                    id: "comp-3",
                    name: "NotificationService",
                    developerName: "Bob Wilson",
                    lastEditedDate: "2024-03-13T14:45:00.000Z",
                    lastVersionName: "v3.0.0",
                    environments: ["staging", "dev"],
                    tags: ["backend", "notifications"]
                }
            ]
        });
    });
</script>
```

### Edge Cases

Include edge cases in your mock data:

```html
<script id="myop_preview">
    setTimeout(() => {
        window.myop_init_interface({
            components: [
                // Normal item
                {
                    id: "1",
                    name: "Standard Component",
                    description: "A typical component"
                },
                // Long name
                {
                    id: "2",
                    name: "This Is A Very Long Component Name That Should Be Truncated",
                    description: "Testing text overflow"
                },
                // Empty description
                {
                    id: "3",
                    name: "No Description",
                    description: ""
                },
                // Special characters
                {
                    id: "4",
                    name: "Test <script>alert('xss')</script>",
                    description: "Testing XSS prevention"
                },
                // Unicode characters
                {
                    id: "5",
                    name: "Japanese: テスト",
                    description: "Testing unicode support"
                }
            ]
        });
    });
</script>
```

## Testing Different States

### Empty State

Test how your component handles no data:

```html
<script id="myop_preview">
    setTimeout(() => {
        window.myop_init_interface({
            components: []
        });
    });
</script>
```

### Error State

Test error handling:

```html
<script id="myop_preview">
    setTimeout(() => {
        window.myop_init_interface({
            error: {
                message: "Failed to fetch components",
                code: "API_ERROR"
            }
        });
    });
</script>
```

### Loading State

Test with a longer delay to see the loader:

```html
<script id="myop_preview">
    // Show loader for 3 seconds
    setTimeout(() => {
        window.myop_init_interface({
            components: [/* ... */]
        });
    }, 3000);
</script>
```

## Conditional Preview

Only run mock data when not in a host application:

```html
<script id="myop_preview">
    // Only initialize if host hasn't provided data after 100ms
    let dataReceived = false;

    // Override to track when host provides data
    const originalInit = window.myop_init_interface;
    window.myop_init_interface = function(data) {
        if (data) dataReceived = true;
        return originalInit.apply(this, arguments);
    };

    // Fallback to mock data if no host
    setTimeout(() => {
        if (!dataReceived) {
            console.log('[Myop Preview] Using mock data');
            window.myop_init_interface({
                components: [/* ... */]
            });
        }
    }, 100);
</script>
```

## Generating Mock Data

### Using Faker-style Generation

For larger datasets, generate mock data programmatically:

```html
<script id="myop_preview">
    function generateMockData(count) {
        const names = ['Auth', 'Payment', 'User', 'Dashboard', 'Report', 'Analytics'];
        const types = ['Service', 'Component', 'Widget', 'Module', 'Handler'];
        const developers = ['Alice', 'Bob', 'Carol', 'David', 'Eve'];
        const tags = ['frontend', 'backend', 'critical', 'experimental', 'stable'];
        const envs = ['prod', 'staging', 'dev'];

        return Array.from({ length: count }, (_, i) => ({
            id: `comp-${i + 1}`,
            name: `${names[i % names.length]}${types[i % types.length]}`,
            developerName: developers[i % developers.length],
            lastEditedDate: new Date(Date.now() - i * 86400000).toISOString(),
            lastVersionName: `v${Math.floor(i / 3) + 1}.${i % 3}.0`,
            environments: envs.slice(0, (i % 3) + 1),
            tags: tags.slice(0, (i % 4) + 1)
        }));
    }

    setTimeout(() => {
        window.myop_init_interface({
            components: generateMockData(25)
        });
    });
</script>
```

## Script ID Convention

The `id="myop_preview"` convention allows:

1. **Easy identification** in the DOM
2. **Host applications to remove it** if needed
3. **Documentation** to reference the mock data section
4. **Build tools** to strip it for production

```javascript
// Host application can remove preview script
document.getElementById('myop_preview')?.remove();
```

## Best Practices

| Practice | Description |
|----------|-------------|
| **Realistic Data** | Use data that matches production structure |
| **Edge Cases** | Include empty strings, long text, special characters |
| **Multiple Items** | Test with various list sizes (0, 1, 10, 100) |
| **Different States** | Test loading, error, and empty states |
| **Async Simulation** | Use `setTimeout` to simulate real loading |

## Complete Example

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Component</title>
    <style>
        #loader-container { display: flex; justify-content: center; padding: 40px; }
        #app-root { opacity: 0; transition: opacity 0.3s; }
        .item { padding: 12px; border-bottom: 1px solid #eee; }
    </style>
</head>
<body>
    <div id="loader-container">Loading...</div>
    <div id="app-root">
        <div class="item-list"></div>
    </div>

    <script>
    (function() {
        let items = [];

        function hideLoader() {
            document.getElementById('loader-container').style.display = 'none';
            document.getElementById('app-root').style.opacity = '1';
        }

        function render() {
            document.querySelector('.item-list').innerHTML = items.length
                ? items.map(i => `<div class="item">${i.name}</div>`).join('')
                : '<div class="empty">No items found</div>';
        }

        window.myop_init_interface = function(data) {
            if (data?.items) {
                items = data.items;
                render();
                hideLoader();
            }
            return { items };
        };

        window.myop_cta_handler = function(action, payload) {
            console.log('CTA:', action, payload);
        };
    })();
    </script>

    <!-- Mock Data for Preview -->
    <script id="myop_preview">
        setTimeout(() => {
            window.myop_init_interface({
                items: [
                    { id: '1', name: 'First Item' },
                    { id: '2', name: 'Second Item' },
                    { id: '3', name: 'Third Item' }
                ]
            });
        }, 500); // Simulate network delay
    </script>
</body>
</html>
```

## Next Steps

- Learn the full [Public API](/docs/learnMyop/html-components/public-api) reference
- See [Host Integration](/docs/learnMyop/html-components/host-integration) examples
- Review [Best Practices](/docs/learnMyop/html-components/best-practices)

---

# Public API Reference

Source: /docs/learnMyop/html-components/public-api

Myop components expose exactly **two global functions** on the `window` object. These functions form the communication contract between the component and its host application.

## Overview

| Function | Direction | Purpose |
|----------|-----------|---------|
| `myop_init_interface` | Host → Component | Initialize component with data |
| `myop_cta_handler` | Component → Host | Send user actions to host |

## myop_init_interface

### Purpose

Initialize or update the component with data from the host application.

### Signature

```typescript
window.myop_init_interface(data?: object): object | void
```

### Usage Modes

#### 1. Initialization (with data)

Pass data to initialize the component:

```javascript
window.myop_init_interface({
    components: [
        { id: "1", name: "Component A" },
        { id: "2", name: "Component B" }
    ]
});
```

#### 2. Getter (without arguments)

Call without arguments to get current state:

```javascript
const currentState = window.myop_init_interface();
console.log(currentState);
// { components: [...] }
```

#### 3. Action-Based Updates

Support incremental updates with action types:

```javascript
// Set all data
window.myop_init_interface({
    action: 'setData',
    payload: [/* components */]
});

// Add a single item
window.myop_init_interface({
    action: 'addItem',
    payload: { id: "3", name: "New Component" }
});

// Update an item
window.myop_init_interface({
    action: 'updateItem',
    payload: { id: "1", name: "Updated Name" }
});

// Remove an item
window.myop_init_interface({
    action: 'removeItem',
    payload: { id: "2" }
});
```

### Implementation Example

```javascript
window.myop_init_interface = function(input) {
    // Getter mode - return current state
    if (!input) {
        return {
            components: allComponentsState,
            filters: currentFilters,
            selectedId: selectedItemId
        };
    }

    // Action-based update
    if (input.action) {
        switch (input.action) {
            case 'setData':
                initializeComponent({ components: input.payload });
                break;
            case 'addItem':
                addComponent(input.payload);
                break;
            case 'updateItem':
                updateComponent(input.payload);
                break;
            case 'removeItem':
                removeComponent(input.payload.id);
                break;
            case 'setFilter':
                setFilter(input.payload);
                break;
            case 'clearFilters':
                clearAllFilters();
                break;
            default:
                console.warn('Unknown action:', input.action);
        }
        return;
    }

    // Direct data initialization
    initializeComponent(input);
};
```

### Data Contract

Define a clear data contract between host and component:

```typescript
// TypeScript interface for documentation
interface ComponentData {
    components: Array<{
        id: string;
        name: string;
        description?: string;
        developerName: string;
        lastEditedDate: string; // ISO 8601 format
        lastVersionName: string;
        environments: string[];
        tags: string[];
    }>;
}

interface ActionPayload {
    action: 'setData' | 'addItem' | 'updateItem' | 'removeItem';
    payload: any;
}

type InitInput = ComponentData | ActionPayload;
```

---

## myop_cta_handler

### Purpose

Handle user actions and communicate events back to the host application. "CTA" stands for "Call to Action".

### Signature

```typescript
window.myop_cta_handler(action_id: string, payload?: object): void
```

### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| `action_id` | `string` | Identifier for the action type |
| `payload` | `object` | Optional data associated with the action |

### Common Action Types

```javascript
// Navigation actions
window.myop_cta_handler('navigate', { path: '/components/123' });
window.myop_cta_handler('component_clicked', { componentId: 'comp-123' });
window.myop_cta_handler('back', {});

// Modal/Dialog actions
window.myop_cta_handler('open_modal', { type: 'edit', itemId: '123' });
window.myop_cta_handler('close_modal', {});
window.myop_cta_handler('confirm_delete', { itemId: '123' });

// Data actions
window.myop_cta_handler('save', { data: formData });
window.myop_cta_handler('delete', { itemId: '123' });
window.myop_cta_handler('refresh', {});

// UI state actions
window.myop_cta_handler('select', { itemId: '123' });
window.myop_cta_handler('toggle_expand', { sectionId: 'details' });
window.myop_cta_handler('filter_change', { filters: activeFilters });

// Error/status actions
window.myop_cta_handler('error', { message: 'Something went wrong' });
window.myop_cta_handler('retry', {});
```

### Implementation in Component

The component defines a default handler that logs actions:

```javascript
// Default handler (logs to console)
window.myop_cta_handler = function(action_id, payload) {
    console.log('CTA Handler:', action_id, payload);
};
```

### Implementation in Host

The host application **overrides** the handler to respond to actions:

```javascript
// React host example
component.props.myop_cta_handler = (action_id, payload) => {
    switch (action_id) {
        case 'component_clicked':
            navigate(`/components/${payload.componentId}`);
            break;
        case 'delete':
            confirmAndDelete(payload.itemId);
            break;
        case 'filter_change':
            updateUrlParams(payload.filters);
            break;
        case 'error':
            showToast(payload.message, 'error');
            break;
    }
};
```

### Best Practices for Action IDs

| Pattern | Example | Description |
|---------|---------|-------------|
| `noun_verb` | `component_clicked` | Entity + past tense action |
| `verb` | `navigate`, `save`, `delete` | Simple action verbs |
| `verb_noun` | `open_modal`, `close_dialog` | Action + target |

## Communication Patterns

### One-Way: Host → Component

```
Host                          Component
  │                               │
  │  myop_init_interface(data)    │
  │ ─────────────────────────────>│
  │                               │ Process data
  │                               │ Render UI
  │                               │
```

### One-Way: Component → Host

```
Host                          Component
  │                               │
  │                               │ User clicks button
  │   myop_cta_handler(action)    │
  │<───────────────────────────── │
  │ Handle action                 │
  │                               │
```

### Round-Trip: Request/Response

```
Host                          Component
  │                               │
  │  myop_init_interface(data)    │
  │ ─────────────────────────────>│
  │                               │ Process data
  │                               │ User interacts
  │   myop_cta_handler(action)    │
  │<───────────────────────────── │
  │ Handle action                 │
  │ Fetch new data                │
  │                               │
  │  myop_init_interface(newData) │
  │ ─────────────────────────────>│
  │                               │ Update UI
```

## Complete Example

### Component Implementation

```javascript
(function() {
    let components = [];
    let selectedId = null;

    function render() {
        const list = document.getElementById('list');
        list.innerHTML = components.map(comp => `
            <div class="item ${comp.id === selectedId ? 'selected' : ''}"
                 data-id="${comp.id}">
                ${comp.name}
            </div>
        `).join('');
    }

    document.getElementById('list').addEventListener('click', (e) => {
        const item = e.target.closest('.item');
        if (item) {
            selectedId = item.dataset.id;
            render();
            window.myop_cta_handler('component_clicked', {
                componentId: selectedId
            });
        }
    });

    document.getElementById('delete-btn').addEventListener('click', () => {
        if (selectedId) {
            window.myop_cta_handler('delete', { itemId: selectedId });
        }
    });

    // Public API
    window.myop_init_interface = function(data) {
        if (!data) {
            return { components, selectedId };
        }

        if (data.action === 'removeItem') {
            components = components.filter(c => c.id !== data.payload.id);
            if (selectedId === data.payload.id) selectedId = null;
            render();
            return;
        }

        components = data.components || [];
        render();
        document.getElementById('loader').style.display = 'none';
    };

    window.myop_cta_handler = function(action_id, payload) {
        console.log('Action:', action_id, payload);
    };
})();
```

### Host Implementation

```jsx
import { MyopContainer } from "@myop/react";

function ComponentList() {
    const navigate = useNavigate();
    const [components, setComponents] = useState([]);

    useEffect(() => {
        fetchComponents().then(setComponents);
    }, []);

    return (
        <MyopContainer
            componentId="abc-123"
            onReady={(component) => {
                // Set up action handler
                component.props.myop_cta_handler = (action, payload) => {
                    switch (action) {
                        case 'component_clicked':
                            navigate(`/component/${payload.componentId}`);
                            break;
                        case 'delete':
                            deleteComponent(payload.itemId).then(() => {
                                component.props.myop_init_interface({
                                    action: 'removeItem',
                                    payload: { id: payload.itemId }
                                });
                            });
                            break;
                    }
                };

                // Initialize with data
                component.props.myop_init_interface({ components });
            }}
        />
    );
}
```

## Next Steps

- See [Host Integration](/docs/learnMyop/html-components/host-integration) for framework-specific examples
- Review [Best Practices](/docs/learnMyop/html-components/best-practices) for component development

---

# Learn Myop

Source: /docs/learnMyop

## Table of Contents

1. [System Architecture](#system-architecture)
2. [Basic Host](#basic-host)
3. [HTML Component](#html-component)
4. [React Integration](#react-integration)
5. [Angular Integration](#angular-integration)
6. [Vue.js Integration](#vuejs-integration)
7. [Web Component](#web-component)
8. [Page as Component](#page-as-component)

## System Architecture

Myop.dev is an open-source UI framework that enables developers to build dynamic user interfaces capable of evolving post-launch. It addresses common challenges such as lack of skin flexibility in frameworks, missing runtime control, cross-framework integration, and absence of centralized UI orchestration. By integrating Myop, applications can manage UIs dynamically without reopening core functionality, allowing for faster development of scalable and adaptable products.

[READ MORE](/docs/learnMyop/systemArchitecture)

## Basic Host

The Basic Host serves as the foundational environment for integrating Myop components into your application. It provides the necessary infrastructure to load, manage, and communicate with Myop components, ensuring seamless integration and control over your application's UI elements.

[READ MORE](/docs/learnMyop/JSHost)

## HTML Component

HTML Components in Myop are self-contained units that can be dynamically loaded and managed within your application. They allow for real-time UI modifications without requiring redeployment or backend changes, enabling developers to experiment with UI/UX changes independently.

[Using the Dashboard](/docs/learnMyop/HTMLComponent) | [Development Guide](/docs/learnMyop/html-components)

## React Integration

- **React Host** integration allows Myop components to be seamlessly embedded within React applications. By utilizing the Host SDK, developers can dynamically load and manage Myop components, ensuring consistent UX across multiple components and enabling communication between the host application and the embedded Myop components.<br/>
- **React Components** are designed to be seamlessly integrated React Components as Myop components within any application. They allow for dynamic loading and management, ensuring that UI elements can be updated in real-time without requiring redeployment or core changes. This integration enhances the flexibility and responsiveness of React applications.

[READ MORE](/docs/learnMyop/ReactHost)

## Angular Integration

- **Angular Host** integration allows Myop components to be seamlessly embedded within Angular applications. This integration ensures seamless communication between the host application and Myop components, allowing for real-time UI modifications and consistent user experiences across components.
- **Angular Components** are designed to be seamlessly integrated Angular Components as Myop components within any application. This integration allows for real-time UI modifications and ensures consistent user experiences across components, enhancing the flexibility and maintainability of Angular applications.

[READ MORE](/docs/learnMyop/Angular)

## Vue.js Integration
- **Vue Host** allows developers to embed and manage Myop components within Vue.js applications. By leveraging the Host SDK, developers can dynamically load components, ensuring seamless communication and consistent UX across multiple components within the Vue.js framework.
- **Vue Components** facilitate the dynamic loading and management of Vue.js components as Myop components within any application. This integration ensures seamless communication between the host application and Myop components, allowing for real-time UI modifications and consistent user experiences across components.

[READ MORE](/docs/learnMyop/Vue)

## Web Component

Web Components in Myop are modular, reusable units that can be integrated into any web application. They encapsulate functionality and styling, allowing for dynamic loading and management without disrupting core application logic. This approach promotes a more flexible and maintainable codebase.

`The feature is live and performing as expected.`

`Detailed Docs Are Coming Soon!`

## Page as Component

The "Page as Component" feature in Myop allows entire pages to be treated as components, enabling dynamic loading and management within your application. This approach enhances the flexibility and scalability of your application, allowing for real-time UI modifications and consistent user experiences across pages.

[READ MORE](/docs/learnMyop/PageAsComponent)

---

# Myop MCP Server Setup

Source: /docs/mcp-setup

:::caution Work in Progress
This feature is currently **experimental** and under active development. APIs and configuration may change.
:::

The Myop MCP (Model Context Protocol) server enables AI assistants like Cursor and Claude Code to interact with your Myop account. It provides tools for component discovery, management, and access to the Myop component development guide.

## Prerequisites

:::info Node.js Required
Most MCP clients require **Node.js version 22 or higher** to connect to remote MCP servers. Download the latest version from [nodejs.org](https://nodejs.org/).
:::

## Server URL

```
https://mcp.myop.dev/mcp
```

## Authentication

The Myop MCP server uses **OAuth 2.0** for authentication. When you first connect, you'll be redirected to the Myop dashboard to log in and authorize access.

### OAuth Flow

1. Your MCP client redirects you to Myop dashboard for login
2. After authorization, you're redirected back to your client
3. Client exchanges the authorization code for an access token
4. All subsequent requests use the access token

## Available Tools

### Authenticated Tools

These tools require OAuth authentication:

| Tool | Description |
|------|-------------|
| `whoami` | Get information about the currently authenticated user |
| `list_organizations` | Get the list of organizations you have access to |
| `list_components` | List components in an organization (filter by name) |
| `upload_component` | Step 1: Get a presigned URL for uploading a component |
| `confirm_upload` | Step 2: Confirm the upload and get the dashboard URL |

### Public Tools

These tools are available without authentication:

| Tool | Description |
|------|-------------|
| `get_myop_guide` | Get the Myop HTML Component Development Guide |

### Tool Details

#### `whoami`
Returns information about the authenticated user.

```json
{
  "authenticated": true,
  "userId": "abc123",
  "email": "user@example.com",
  "scope": "mcp:read mcp:write"
}
```

#### `list_organizations`
Returns organizations the user has access to.

```json
{
  "count": 2,
  "organizations": [
    { "id": "org-1", "name": "My Company" },
    { "id": "org-2", "name": "Personal" }
  ]
}
```

#### `list_components`
List components in an organization.

**Parameters:**
- `organizationId` (required): The organization ID
- `name` (optional): Filter by name
- `limit` (optional): Max results (default: 50)

```json
{
  "count": 3,
  "components": [
    {
      "id": "comp-1",
      "name": "UserProfile",
      "description": "User profile card component",
      "updatedOn": "2024-03-15T10:30:00.000Z",
      "variantsCount": 2,
      "tags": ["profile", "user"]
    }
  ]
}
```

#### `upload_component`
Step 1 of the upload process: Get a presigned URL for uploading your component.

**Parameters:**
- `name` (optional): Component name. Check `myop.config.json` for this value.
- `componentId` (optional): Existing component UUID to update. If not provided, a new component will be created.
- `organization` (optional): Organization name or ID. Defaults to user's default organization.

**Response:**
```json
{
  "success": true,
  "message": "Upload URL generated. Run the curl command, then call confirm_upload with the uploadId.",
  "uploadId": "abc123-upload-id",
  "componentId": "existing-component-id-or-null",
  "curlCommand": "curl -X PUT -H \"Content-Type: text/html\" --data-binary @./dist/index.html \"https://...presigned-url...\"",
  "expiresIn": "3600 seconds",
  "nextStep": "After curl completes successfully, call the confirm_upload tool with this uploadId to get the dashboard URL."
}
```

#### `confirm_upload`
Step 2 of the upload process: Confirm the upload completed and get the dashboard URL.

**Parameters:**
- `uploadId` (required): The uploadId returned from `upload_component`

**Response (new component):**
```json
{
  "success": true,
  "message": "Upload confirmed! New component created. Save componentId and orgId to myop.config.json for future uploads.",
  "dashboardUrl": "https://dashboard.myop.dev/component/abc-123",
  "componentName": "MyComponent",
  "componentId": "abc-123-generated-uuid",
  "variantId": "variant-uuid",
  "isNewComponent": true,
  "orgId": "org-uuid"
}
```

**Response (existing component):**
```json
{
  "success": true,
  "message": "Upload confirmed! New version added to existing component.",
  "dashboardUrl": "https://dashboard.myop.dev/component/abc-123",
  "componentName": "MyComponent",
  "componentId": "abc-123",
  "variantId": "variant-uuid",
  "isNewComponent": false,
  "orgId": "org-uuid"
}
```

### Upload Workflow

The recommended workflow for uploading components via MCP:

#### 1. Project Configuration

Create a `myop.config.json` file in your project root:

```json
{
  "name": "MyComponent",
  "componentId": null,
  "organization": "My Organization"
}
```

#### 2. Build Your Component

Ensure your component is built to `./dist/index.html`:

```bash
npm run build
```

#### 3. Upload Process

The MCP tools handle the upload in two steps:

**Step 1:** Call `upload_component` to get a presigned URL
```
"Upload my component to Myop"
```

The AI assistant will:
1. Read `myop.config.json` to get component settings
2. Call `upload_component` with name, componentId, and organization
3. Execute the returned curl command to upload the file

**Step 2:** Call `confirm_upload` to finalize
```
"Confirm the upload"
```

The AI assistant will:
1. Call `confirm_upload` with the uploadId
2. For new components, save the returned componentId to `myop.config.json`
3. Provide the dashboard URL to view the component

#### 4. Updating Existing Components

After the first upload, your `myop.config.json` will have a componentId:

```json
{
  "name": "MyComponent",
  "componentId": "abc-123-uuid",
  "organization": "My Organization"
}
```

Future uploads will update the existing component instead of creating a new one.

## Setup for Cursor

Add the following to your Cursor MCP configuration file:

**Global config:** `~/.cursor/mcp.json`

**Or project-specific:** `.cursor/mcp.json` in your project root

```json
{
  "mcpServers": {
    "myop": {
      "url": "https://mcp.myop.dev/mcp"
    }
  }
}
```

After adding the configuration:
1. Restart Cursor
2. When you first use MCP features, a browser window will open for OAuth login
3. Log in to your Myop account and authorize access
4. Return to Cursor - you should now see the tools available

## Setup for Claude Code

### Step 1: Add the MCP Server

#### Global Setup (Recommended)

To make the Myop MCP server available across **all your projects**, add it with the `--scope user` flag:

```bash
claude mcp add myop https://mcp.myop.dev/mcp --transport http --scope user
```

This stores the configuration globally in `~/.claude.json`, so you can use Myop tools from any directory without additional setup.

#### Directory-Level Setup

If you omit the `--scope` flag, the MCP server will only be configured for the **current directory**:

```bash
claude mcp add myop https://mcp.myop.dev/mcp --transport http
```

This is useful when you want the configuration limited to a specific project or want to share it with your team via version control (stored in `.mcp.json`).

### Step 2: Start Claude Code

Open a new terminal and start Claude Code:

```bash
claude
```

### Step 3: Open the MCP Panel

Once Claude Code is running, type:

```
/mcp
```

This opens the MCP servers panel showing all configured servers.

### Step 4: Authorize the Myop Server

1. Find **myop** in the list of MCP servers
2. Click on the **myop** server entry
3. Click the **Authenticate** button (or select it from the **`...`** menu)
4. A browser window will open - log in to your Myop account
5. Authorize the MCP access when prompted
6. Return to Claude Code - the server should now show as **connected**

:::tip
If the server shows a connection error, try pressing `r` to refresh, or restart Claude Code.
:::

## Setup for Antigravity

Antigravity requires [mcp-remote](https://www.npmjs.com/package/mcp-remote) to connect to remote MCP servers with OAuth.

Add the following to your Antigravity MCP configuration:

```json
{
  "mcpServers": {
    "myop": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.myop.dev/mcp"]
    }
  }
}
```

After adding the configuration:
1. Restart Antigravity
2. When you first use MCP features, a browser window will open for OAuth login
3. Log in to your Myop account and authorize access
4. Tokens are stored locally in `~/.mcp-auth`

**Troubleshooting:** If you encounter authentication issues, clear the local token cache:
```bash
rm -rf ~/.mcp-auth
```

## Usage Examples

Once configured and authenticated, you can ask your AI assistant:

### Component Discovery
- *"What organizations do I have access to?"*
- *"List all components in my organization"*
- *"Find components with 'profile' in the name"*

### Component Development
- *"Show me the Myop component development guide"*
- *"Create a Myop component that displays a user profile card"*
- *"Help me build a dashboard widget following Myop best practices"*

### Account Information
- *"Who am I logged in as?"*
- *"What's my current authentication status?"*

## API Endpoints

### MCP Endpoint
```
POST https://mcp.myop.dev/mcp
Authorization: Bearer <access_token>
Content-Type: application/json

{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}
```

### Health Check
```
GET https://mcp.myop.dev/
```

Returns server status and version.

## Troubleshooting

### OAuth login doesn't complete

1. Make sure you're logged into your Myop account at [dashboard.myop.dev](https://dashboard.myop.dev)
2. Clear your browser cache and try again
3. Check that pop-ups are not blocked for the OAuth redirect

### MCP not connecting

1. Verify the endpoint is accessible:
   ```bash
   curl https://mcp.myop.dev/
   ```
   Should return: `{"status":"ok","version":"1.0.3","server":"myop-mcp"}`

2. Restart your IDE after configuration changes

3. Check your MCP configuration file for JSON syntax errors

### Tools not appearing

If tools aren't showing up after authentication:

1. Verify you completed the OAuth flow
2. Check that your access token is valid
3. Try disconnecting and reconnecting the MCP server

### "Unauthorized" errors

1. Your access token may have expired - reconnect to refresh
2. Verify you authorized the correct scopes during OAuth
3. Check CloudWatch logs if you have server access

### Rate limiting

The server implements rate limiting. If you're making many requests:
- Wait a few seconds between requests
- Batch operations where possible

## Security

- All communication uses HTTPS
- OAuth tokens are securely stored by your MCP client
- Access tokens expire after 30 days
- Refresh tokens can be used to obtain new access tokens
- You can revoke access from the Myop dashboard

## Feedback

Please report issues or suggestions on our [GitHub repository](https://github.com/anthropics/claude-code/issues).

---

# Myop Dev Extension

Source: /docs/dev-extension

:::info Now on Chrome Web Store
The Myop Chrome Extension has been officially approved by Google and is now available on the Chrome Web Store. Install it for automatic updates, improved stability, and seamless access to all new features.

**[Install from Chrome Web Store](https://chromewebstore.google.com/detail/myop/kojpmmdmndbbpgbmgafcneccjghkccpe)**
:::

The **Myop Dev Extension** is a Chrome browser extension that enables local development and testing of Myop components. It intercepts network requests to Myop's cloud service and serves your local component HTML instead, allowing you to see changes instantly without deploying.

:::tip See Also
For file watching and automatic rebuilding, use the **[Myop CLI](/docs/cli)** with `myop dev` — provides a local dev server with HMR support.
:::

<img src={require('./img/popup-dashboard-tabs.png').default} alt="Extension Header" style={{maxHeight: '400px', display: 'block', margin: '0 auto'}} />

## Features

- **Instant Tab Override** - Override components directly from open Component Editor tabs - no saving or publishing required
- **Local Component Override** - Serve local HTML content instead of cloud-hosted components
- **Dashboard Sync** - One-click sync of components from dashboard.myop.dev
- **Site Management** - Pause interception on specific sites
- **SDK Detection** - Detect Myop SDK on any page and inspect loaded components
- **Element Inspector** - Visual element picker for future component creation
- **Request Logging** - Track all intercepted requests in real-time
- **DevTools Panel** - Chrome DevTools integration with event tracking and waterfall timeline

---

## Installation

Install the official extension from the Chrome Web Store:

1. Visit the **[Myop Chrome Extension](https://chromewebstore.google.com/detail/myop/kojpmmdmndbbpgbmgafcneccjghkccpe)** on the Chrome Web Store
2. Click **Add to Chrome**
3. The Myop Dev extension icon will appear in your toolbar

**Benefits of the Chrome Web Store version:**
- Official Google-approved listing
- Automatic updates
- Improved stability and security
- Seamless access to all new features

:::warning Migrating from Manual Installation
If you previously installed the extension manually, please follow these steps:
1. Delete the manually installed version from your browser (`chrome://extensions/`)
2. Install the official version from the [Chrome Web Store](https://chromewebstore.google.com/detail/myop/kojpmmdmndbbpgbmgafcneccjghkccpe) (current version: v1.2.1)

Once installed from the Chrome Web Store, you won't need to worry about updating manually anymore.
:::

---

## Quick Start

### Syncing Components from Dashboard

The easiest way to get started is by syncing components directly from the Myop Dashboard:

1. Navigate to [dashboard.myop.dev](https://dashboard.myop.dev)
2. Log in to your account
3. Click the floating **Myop Dev** button that appears in the top-right corner

<img src={require('./img/dashboard-fab.png').default} alt="Dashboard Sync Button" style={{maxHeight: '280px', display: 'block', margin: '0 auto'}} />

4. The sync panel will open showing all your components
5. Use the **Search** box to filter by name
6. Use the **Tags** and **Editors** dropdowns to filter further
7. Click **Override** on any component to register it for local development

<img src={require('./img/dashboard-panel.png').default} alt="Dashboard Sync Panel" style={{maxHeight: '280px', display: 'block', margin: '0 auto'}} />

Once synced, the component will be served locally whenever any page requests it from Myop's cloud.

---

## Extension Popup

Click the Myop Dev extension icon in your Chrome toolbar to open the popup interface.

### Components Tab

The Components tab organizes local component overrides into collapsible sections:

<img src={require('./img/popup-dashboard-tabs.png').default} alt="Components Tab" style={{maxHeight: '400px', display: 'block', margin: '0 auto'}} />

#### Myop SDK Section

Shows the SDK version detected on the current page and lists all components loaded on that page. Click the expand arrow to see component details. Each component shows:
- **Component name** and ID
- **Focus button** (🔍) to highlight the component on the page
- **Override button** (↗️) to open the component editor in the dashboard

<img src={require('./img/popup-sdk-components.png').default} alt="SDK Components" style={{maxHeight: '400px', display: 'block', margin: '0 auto'}} />

#### Myop CLI Section

When running the [Myop CLI](/docs/cli) with `myop dev`, this section shows all components being served from your local development server:

<img src={require('./img/popup-cli-components.png').default} alt="CLI Components" style={{maxHeight: '400px', display: 'block', margin: '0 auto'}} />

| Element | Description |
|---------|-------------|
| **Connection Status** | Shows `localhost:9292` when connected to CLI |
| **Component Count** | Number of components available from CLI |
| **Toggle Switch** | Enable/disable override for each component |
| **"not on this page"** | Components available but not used on current page |

#### Dashboard Tabs Section

:::tip Instant Component Override
You can now override components directly from Chrome tabs - **no saving or publishing required**. Simply open any component in the Myop Component Editor in a Chrome tab (in the same browser window), and the extension will automatically detect its content and let you override that component instantly on any Myop website. This makes testing and iteration much faster.
:::

A powerful feature that lets you override components directly from open dashboard.myop.dev browser tabs:

1. Open [dashboard.myop.dev](https://dashboard.myop.dev) in a browser tab
2. Navigate to a component's editor
3. The extension automatically detects open editors
4. Toggle the switch to serve that component locally

| Element | Description |
|---------|-------------|
| **Tab Count** | Shows number of open dashboard tabs with editors |
| **Refresh Button** | Manually refresh the list of open tabs |
| **Component Name** | Name from the dashboard editor |
| **Component ID** | UUID of the component |
| **Open Button** (↗️) | Jump to the dashboard tab |
| **Toggle Switch** | Enable/disable override for this component |

:::tip Live Editing
With Dashboard Tabs, you can edit components in the dashboard editor and instantly see changes on any site. No need to sync or copy HTML manually!
:::

#### Manual Section

Add components manually by clicking the **+** button:

<img src={require('./img/popup-manual-form.png').default} alt="Manual Section" style={{maxHeight: '280px', display: 'block', margin: '0 auto'}} />

| Field | Description |
|-------|-------------|
| **Component ID** | The UUID of the component to override |
| **Name (optional)** | Friendly display name |
| **HTML content** | The HTML to serve, or click the upload icon to load from file |

### Sites Tab

Manage which sites the extension operates on:

<img src={require('./img/popup-sites.png').default} alt="Sites Tab" style={{maxHeight: '280px', display: 'block', margin: '0 auto'}} />

By default, the extension intercepts requests on **all sites**. Use this tab to **pause** interception on specific sites:

1. The current site is shown at the top
2. Click **"Pause on this site"** to disable interception
3. Paused sites appear in the list below
4. Click the **play button** to resume interception on a paused site

:::tip Badge Indicator
When viewing a paused site, the extension badge shows **"||"** in orange to indicate interception is disabled.
:::

### Log Tab

View a real-time log of all intercepted requests:

<img src={require('./img/popup-log.png').default} alt="Log Tab" style={{maxHeight: '280px', display: 'block', margin: '0 auto'}} />

Each entry shows:
- **Timestamp** - When the request occurred
- **Component ID** - Which component was requested
- **LOCAL / REMOTE** - Whether local content was served or the request passed through

---

## SDK Detection

The extension automatically detects when a page is running the Myop SDK. The status bar at the bottom of the popup shows:

| Status | Meaning |
|--------|---------|
| 🟢 **Myop SDK v1.x.x** | SDK detected with version number |
| ⚫ **No Myop SDK detected** | Page is not using Myop |

<img src={require('./img/popup-sdk-components.png').default} alt="SDK Detection" style={{maxHeight: '400px', display: 'block', margin: '0 auto'}} />

### Viewing Page Components

When the SDK is detected and components are loaded on the page:

1. The status shows the component count: **"Myop SDK v1.0.0 (3 components)"**
2. Click the **expand arrow** to see all components
3. Each component shows its ID and element type
4. Click **"Focus"** to highlight the component on the page

<img src={require('./img/popup-sdk-components.png').default} alt="Page Components" style={{maxHeight: '400px', display: 'block', margin: '0 auto'}} />

The focused component will be highlighted with a pulsing purple border for 3 seconds, making it easy to locate on the page.

<img src={require('./img/component-highlight.png').default} alt="Component Highlight" style={{maxHeight: '280px', display: 'block', margin: '0 auto'}} />

---

## Element Inspector

The extension includes a visual element inspector for exploring page structure:

1. Click the **magnifying glass button** (🔍) in the SDK status bar
2. The popup closes and inspect mode activates
3. Your cursor changes to a crosshair
4. Hover over any element to see it highlighted with its tag name

<img src={require('./img/inspect-mode.png').default} alt="Inspect Mode" style={{maxHeight: '280px', display: 'block', margin: '0 auto'}} />

### Inspector Controls

| Action | Result |
|--------|--------|
| **Hover** | Highlights element with purple border and shows tag info |
| **Click** | Selects the element (logs innerHTML to console) |
| **ESC** | Exits inspect mode without selecting |

:::info Coming Soon
The "Create Myop component" feature from selected elements is coming in a future release!
:::

### Badge Indicator

While inspect mode is active, the extension badge shows **"🔍"** with a purple background.

---

## DevTools Panel

The extension adds a dedicated **"Myop"** tab to Chrome DevTools, providing powerful debugging and monitoring capabilities for your Myop components.

### Opening the DevTools Panel

1. Open Chrome DevTools (`F12` or `Cmd+Option+I` on Mac)
2. Navigate to the **"Myop"** tab in the DevTools panel tabs
3. Click **"Start Recording"** to begin capturing events

<img src={require('./img/devtools-stopped.png').default} alt="DevTools Recording Stopped" style={{maxHeight: '320px', display: 'block', margin: '0 auto'}} />

### Event Tracking

The DevTools panel captures and displays all Myop-related events in a table format similar to Chrome's Network tab:

<img src={require('./img/devtools-panel.png').default} alt="DevTools Panel" style={{maxHeight: '400px', display: 'block', margin: '0 auto'}} />

| Column | Description |
|--------|-------------|
| **Time** | Timestamp when the event occurred |
| **Type** | Event type (init_interface, cta_handler, consume, render, dispose) |
| **From** | Source of the event (Host App, Server, SDK, Component) |
| **To** | Destination of the event |
| **Duration** | Time taken to process (color-coded: green < 16ms, yellow < 100ms, red > 100ms) |
| **Content** | Preview of the event payload |
| **Waterfall** | Visual timeline bar showing when the event occurred relative to others |

### Event Types

| Type | Color | Description |
|------|-------|-------------|
| **init_interface** | 🔵 Blue | Component initialization calls from host to component |
| **cta_handler** | 🟠 Orange | Call-to-action events from component to host |
| **consume** | 🟢 Green | API calls to `/consume` endpoint (server or extension intercepted) |
| **render** | 🟣 Purple | Component added to the page |
| **dispose** | 🔴 Red | Component removed from the page |

### Waterfall Timeline

The waterfall column provides a visual representation of event timing, similar to Chrome's Network tab:

- **Bar position** shows when the event started relative to the first recorded event
- **Bar width** represents the duration of the event
- **Instant events** (like render/dispose) appear as small dots
- Events with duration show the time label next to the bar

### Recording Controls

| Control | Description |
|---------|-------------|
| **Record Button** (⏺️) | Toggle recording on/off. Red when recording. |
| **Clear Button** (🚫) | Clear all recorded events |
| **Filter Input** | Search events by component name or content |
| **Filter Tabs** | Filter by event type (All, init_interface, cta_handler, consume, render, dispose) |

### Recording State

- Recording state **persists across page reloads** - if you start recording and refresh the page, recording continues automatically
- When recording is stopped, an overlay appears with a "Start Recording" button
- The status indicator in the toolbar shows "Recording" or "Stopped"

:::tip Full Page Lifecycle
To capture all component events from page load, start recording first, then reload the page. This ensures you capture initial consume API calls and component renders.
:::

### Event Details

Click any row to view the full event payload in the detail panel below:

- **Payload Tab** shows the complete JSON data
- **Copy Button** copies the JSON to clipboard
- Click the **✕** button or click another row to close

### Theme Support

The DevTools panel automatically adapts to your system theme preference:
- **Dark theme** when your system/browser is in dark mode
- **Light theme** when your system/browser is in light mode

---

## Badge States

The extension icon badge indicates the current state:

| Badge | Color | Meaning |
|-------|-------|---------|
| **Number** (e.g., "3") | 🟢 Green | Number of enabled local components |
| **"\|\|"** | 🟠 Orange | Interception paused on current site |
| **"🔍"** | 🟣 Purple | Element inspector is active |
| *(empty)* | - | Extension active, no local components |

---

## How It Works

### Request Interception

When a page makes a request to Myop's consume endpoint:

```
https://cloud.myop.dev/consume?id={componentId}
```

The extension checks if that component ID is registered locally:

1. **If registered & enabled** → Returns local HTML content
2. **If not registered or disabled** → Request passes through to cloud
3. **If site is paused** → All requests pass through to cloud

### Response Format

The extension generates a response matching Myop's API format:

```json
{
  "item": {
    "name": "component-id",
    "id": "component-id",
    "consume_variant": [
      {
        "id": "dev-1234567890-abc123",
        "name": "dev version (extension)",
        "loader": {
          "type": "HTMLLoader",
          "shadowRootMode": "localFrame",
          "HTML": "<your-local-html-content>"
        }
      }
    ]
  }
}
```

---

## Best Practices

### Development Workflow

1. **Sync from dashboard** to get the current production HTML
2. **Edit locally** using your preferred code editor
3. **Update in extension** by editing the component or re-syncing
4. **Test on any site** that uses the component
5. **Deploy when ready** through the Myop Dashboard

### Tips

:::tip Hot Reload
For rapid iteration, keep your HTML in a local file and use the "Load from File" button to quickly update the component content.
:::

:::tip Multiple Components
You can have multiple components registered simultaneously. Use the toggle switches to quickly enable/disable specific overrides.
:::

:::warning Site Pausing
Remember that paused sites won't receive local content. Check the badge indicator if components aren't loading as expected.
:::

---

## Troubleshooting

### Component Not Loading Locally

1. Check that the component is **enabled** (toggle is green)
2. Verify the site is **not paused** (no orange "||" badge)
3. Confirm the **Component ID** matches exactly
4. Check the **Log tab** to see if requests are being intercepted

### Sync Not Working

1. Ensure you're logged into [dashboard.myop.dev](https://dashboard.myop.dev)
2. Refresh the dashboard page and try again
3. Check the browser console for error messages

### SDK Not Detected

The SDK detection requires the page to have `window.myop.rootSDK.version` available. This is set by the Myop SDK after initialization. If you're testing on a page where Myop is still loading, wait a moment and reopen the popup.

---

## Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| **ESC** | Exit element inspector mode |

---

## Privacy & Security

- The extension only intercepts requests to `*.myop.dev/consume*` endpoints
- Authentication tokens are read from the dashboard page only (never stored)
- All local component data is stored in Chrome's local storage
- No data is sent to external servers (except normal Myop API calls)

---

# CDN: Chunk Loading & Troubleshooting

Source: /docs/troubleshooting/cdn-chunk-loading

When using the Myop SDK via CDN (`<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js">`), the SDK uses a modular chunk-loading system internally called `__federation__`. This page explains how it works and how to troubleshoot issues when chunks fail to load.

## How CDN Chunk Loading Works

The CDN SDK is split into multiple chunks for performance — only the modules your page actually uses are loaded:

| Chunk | Description |
|-------|-------------|
| `myop_sdk.min.js` | Root entry — lightweight bootstrap |
| `_HostSDK.*.min.js` | Host SDK module (component loading, messaging) |
| `_IframeSDK.*.min.js` | Iframe SDK module (runs inside component iframes) |
| `_helpers.*.min.js` | Helpers (CloudRepository, config builders) |

When a module is needed (e.g. `getHostModule()`), the root SDK dynamically creates a `<script>` tag to load the corresponding chunk.

### Base Path Resolution

The SDK determines **where to load chunks from** using `document.currentScript.src` — the URL of the root `myop_sdk.min.js` script. For example:

```
Script src: https://cdn.myop.dev/sdk/next/myop_sdk.min.js
Resolved base: https://cdn.myop.dev/sdk/next/
Chunk URL:    https://cdn.myop.dev/sdk/next/_HostSDK.a1b2c3d4.min.js
```

This works automatically in most setups. However, **caching proxies** can break this mechanism.

## The Caching Proxy Problem

Some hosting platforms optimize JavaScript by combining, relocating, or proxying scripts through their own URLs:

- **LiteSpeed Cache** (WordPress) — combines scripts into `/wp-content/litespeed/js/...`
- **Cloudflare Rocket Loader** — rewrites script tags
- **WP Rocket, Autoptimize** — similar JS optimization plugins

When a proxy relocates `myop_sdk.min.js`, `document.currentScript.src` returns the **proxy URL** instead of the CDN URL. The SDK then tries to load chunks from the proxy path — where they don't exist:

```
Script src (rewritten): https://example.com/wp-content/litespeed/js/c9d89370.js
Resolved base:          https://example.com/wp-content/litespeed/js/
Chunk URL (404!):       https://example.com/wp-content/litespeed/js/_IframeSDK.fe8716bb.min.js
```

**Result:** Chunks return 404, components fail to initialize (timeout errors).

## Fix: Override the Base Path

Add this **before** the SDK script tag (or the optimized/combined script that includes the SDK):

```html
<script>
  window.__federation__ = {
    __public_path__: 'https://cdn.myop.dev/sdk/next'
  };
</script>
```

This tells the SDK to always load chunks from the specified URL, ignoring the auto-detected path.

### Full Example

```html
<!-- Override chunk base path (required when using caching proxies) -->
<script>
  window.__federation__ = {
    __public_path__: 'https://cdn.myop.dev/sdk/next'
  };
</script>

<!-- SDK script (may be optimized/combined by LiteSpeed, Cloudflare, etc.) -->
<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
```

### WordPress / LiteSpeed Example

If LiteSpeed has already combined your scripts, add the override snippet in your theme's `<head>` **before** the combined script:

```html
<script>
  window.__federation__ = {
    __public_path__: 'https://cdn.myop.dev/sdk/next'
  };
</script>
<!-- LiteSpeed combined script (includes myop_sdk.min.js) -->
<script data-optimized="1" src="/wp-content/litespeed/js/c9d89370.js"></script>
```

## Automatic CDN Fallback

Starting from SDK version **0.3.25**, the SDK automatically retries chunk loading from the CDN when a chunk fails to load from the detected path. This handles most caching proxy scenarios without requiring the `__public_path__` override.

However, setting `__public_path__` is still recommended when you know a proxy is in use — it avoids the initial failed request and the retry delay.

## Diagnosing Chunk Loading Issues

### Symptoms
- Components don't render (blank container)
- Console shows `timeout_5000` errors
- Network tab shows **404** responses for `_HostSDK.*.min.js` or `_IframeSDK.*.min.js`

### Steps to Diagnose

1. **Open DevTools → Network tab** and filter by `_HostSDK` or `_IframeSDK`
2. Check the **URL** of the failed request — if it points to your domain instead of `cdn.myop.dev`, a caching proxy has rewritten the script source
3. **Open DevTools → Console** and run:
   ```js
   console.log(window.__federation__.__public_auto_path__);
   ```
   If this shows your domain instead of `cdn.myop.dev`, the base path was mis-detected

### Quick Console Fix (for testing)

To verify the fix before making code changes, run this in the console **before** navigating to the page, or use it as a browser override:

```js
window.__federation__ = {
  __public_path__: 'https://cdn.myop.dev/sdk/next'
};
```

Then reload the page. If components load correctly, add the `__public_path__` snippet to your HTML.

## `__federation__` Reference

| Property | Type | Description |
|----------|------|-------------|
| `__public_path__` | `string` | Explicit base URL for chunk loading. Takes priority over auto-detection. |
| `__public_auto_path__` | `string` | (Read-only) Auto-detected base path from `document.currentScript.src` |
| `__use_public_auto_path__` | `boolean` | (Internal) Whether auto-detection is active |
| `__loading_timeout__` | `number` | Chunk loading timeout in ms (default: 5000) |

---

# API Keys & Webhooks Reference

Source: /docs/self-hosting/api-keys-webhooks

## API Keys

API keys authenticate server-to-server requests to the Myop export API. They're used by CI/CD pipelines and the `myop` CLI.

### Creating a Key

1. Go to **Dashboard > Rollout > Settings (gear icon) > Self-Hosting**
2. Scroll to **API Keys** and click **Create API Key**
3. Give it a name (e.g., "GitHub Actions Sync" or "Production CI")
4. Copy the full key — **it's only shown once**

Keys have the format: `myop_sk_<64-char-hex>`

### Using a Key

```bash
# Via CLI
npx myop export --api-key myop_sk_abc123...

# Via environment variable (recommended for CI)
export MYOP_API_KEY=myop_sk_abc123...
npx myop export

# Direct API call
curl -H "Authorization: Bearer myop_sk_abc123..." \
  https://cloud.myop.dev/export
```

### Revoking a Key

Click **Revoke** next to any key in the Self-Hosting settings. Revoked keys stop working immediately. Active CI/CD pipelines using a revoked key will fail on their next run.

---

## Webhooks

### Delivery Methods

| Method | Setup | Best For |
|--------|-------|----------|
| **GitHub Actions** | Click "Add GitHub Actions" in dashboard | GitHub users — one-click, no secrets to manage |
| **Generic Webhook** | Enter any URL | Jenkins, GitLab CI, CircleCI, custom servers |

### Event Types

| Event | Trigger |
|-------|---------|
| `components.deployed` | A component variant was released to an environment |

### Webhook Payload (Generic)

```json
{
  "event": "components.deployed",
  "timestamp": "2026-03-24T13:37:00.000Z",
  "organizationId": "org-abc-123",
  "data": {
    "releases": [
      {
        "componentId": "2098cfba-5124-48ff-b87d-6cd71c14cf7a",
        "variantId": "57a5c9ef-8775-4a19-a243-4cadb87a3e6f",
        "environment": "production",
        "environmentId": "d6c518e0-f80b-4cbe-9efd-b51aa37f2324"
      }
    ]
  }
}
```

### Webhook Payload (GitHub Actions)

GitHub Actions webhooks are sent as `repository_dispatch` events:

```json
{
  "event_type": "myop-components-deployed",
  "client_payload": {
    "releases": [
      {
        "componentId": "2098cfba-5124-48ff-b87d-6cd71c14cf7a",
        "variantId": "57a5c9ef-8775-4a19-a243-4cadb87a3e6f",
        "environment": "production",
        "environmentId": "d6c518e0-f80b-4cbe-9efd-b51aa37f2324"
      }
    ]
  }
}
```

### Headers (Generic)

| Header | Description |
|--------|-------------|
| `Content-Type` | `application/json` |
| `X-Myop-Event` | Event type: `components.deployed` |
| `X-Myop-Signature` | HMAC-SHA256 signature of the body |

### Signature Verification

When you add a generic webhook, Myop generates a signing secret (`whsec_...`). Every payload is signed with HMAC-SHA256 using this secret. **Always verify signatures** to ensure requests are from Myop.

```javascript
const crypto = require('crypto');

function verifyWebhook(rawBody, signature, secret) {
  const expected = 'sha256=' + crypto
    .createHmac('sha256', secret)
    .update(rawBody)
    .digest('hex');

  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(expected)
  );
}
```

:::warning
The signing secret is only shown once when the webhook is created. If you lose it, remove the webhook and add it again to get a new secret.
:::

### Using the Releases Payload

The `releases` array tells you exactly which components changed. Pass it directly to the CLI for an incremental sync:

```bash
npx myop export --releases '[{"componentId":"...","environment":"production","environmentId":"...","variantId":"..."}]'
```

Or for a full sync (ignoring the payload):

```bash
npx myop export
```

### Delivery Status

The Self-Hosting settings show real-time delivery status for each webhook:

- **Green dot** with status code (e.g., `204 2m ago`) — Last delivery succeeded
- **Red dot** with `Failed` — Last delivery failed (timeout, connection error, or non-2xx response)

### Delivery Policy

| Property | Value |
|----------|-------|
| Timeout | 10 seconds |
| Retries | None (fire-and-forget) |
| Fallback | Use scheduled sync (e.g., daily cron) |

:::tip
Always configure a scheduled fallback (e.g., GitHub Actions cron `0 0 * * *` or a daily full sync in your CI) to catch any missed webhook deliveries.
:::

---

# Generic Webhook Integration

Source: /docs/self-hosting/generic-webhooks

For CI/CD systems other than GitHub Actions (Jenkins, GitLab CI, CircleCI, or a custom server), use a generic webhook. Myop sends a signed POST request to your endpoint whenever a component is released.

## How It Works

```
Release component in dashboard
        │
        ▼
Myop sends POST to your URL ──► Your server / CI endpoint
  (signed with HMAC-SHA256)              │
                                  Verify signature
                                         │
                                  npx myop export --releases '...'
                                         │
                                  Deploy to CDN
```

## Setup

### Step 1: Add a Webhook URL

1. Go to **Dashboard > Rollout > Settings (gear icon) > Self-Hosting**
2. Enable **self-hosted sync**
3. Enter your endpoint URL and click **Add**

![Add generic webhook](/assets/images/add-generic-webhook-84b3887789d8bb974eb088ad749dc514.png)

4. **Copy the signing secret** — it's only shown once. You'll use this to verify that webhook requests are really from Myop.

![Signing secret](/assets/images/webhook-secret-de34e8d096c9e697035e85c6c8b311ea.png)

5. Click **Save Configuration**

### Step 2: Build Your Webhook Receiver

Your endpoint receives a POST request with the following format:

**Headers:**

| Header | Value |
|--------|-------|
| `Content-Type` | `application/json` |
| `X-Myop-Event` | `components.deployed` |
| `X-Myop-Signature` | `sha256=<hex-encoded HMAC>` |

**Body:**

```json
{
  "event": "components.deployed",
  "timestamp": "2026-03-24T13:37:00.000Z",
  "organizationId": "org-abc-123",
  "data": {
    "releases": [
      {
        "componentId": "2098cfba-5124-48ff-b87d-6cd71c14cf7a",
        "variantId": "57a5c9ef-8775-4a19-a243-4cadb87a3e6f",
        "environment": "production",
        "environmentId": "d6c518e0-f80b-4cbe-9efd-b51aa37f2324"
      }
    ]
  }
}
```

### Step 3: Verify the Signature

Always verify the `X-Myop-Signature` header to ensure the request is from Myop. The signature is an HMAC-SHA256 hash of the raw request body using your signing secret.

```javascript title="Node.js / Express"
const crypto = require('crypto');

function verifySignature(rawBody, signature, secret) {
  const expected = 'sha256=' + crypto
    .createHmac('sha256', secret)
    .update(rawBody)
    .digest('hex');

  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(expected)
  );
}

app.post('/webhooks/myop', express.raw({ type: 'application/json' }), (req, res) => {
  const signature = req.headers['x-myop-signature'];

  if (!verifySignature(req.body, signature, process.env.MYOP_WEBHOOK_SECRET)) {
    return res.status(401).send('Invalid signature');
  }

  const payload = JSON.parse(req.body);
  // Trigger your sync pipeline...
  res.sendStatus(200);
});
```

```python title="Python / Flask"
import hmac
import hashlib

def verify_signature(body: bytes, signature: str, secret: str) -> bool:
    expected = 'sha256=' + hmac.new(
        secret.encode(), body, hashlib.sha256
    ).hexdigest()
    return hmac.compare_digest(signature, expected)

@app.route('/webhooks/myop', methods=['POST'])
def handle_webhook():
    signature = request.headers.get('X-Myop-Signature', '')
    if not verify_signature(request.data, signature, WEBHOOK_SECRET):
        return 'Invalid signature', 401

    payload = request.json
    # Trigger your sync pipeline...
    return '', 200
```

### Step 4: Run the Export

After verifying the signature, extract the `releases` array from the payload and pass it to the Myop CLI:

```bash title="Incremental sync (from webhook payload)"
npx myop export \
  --api-key "$MYOP_API_KEY" \
  --releases '[{"componentId":"2098cfba-...","environment":"production","environmentId":"d6c518e0-...","variantId":"57a5c9ef-..."}]'
```

The `--releases` flag tells the CLI to export only the specific component+environment that changed, making the sync fast.

For a **full sync** (e.g., on schedule or when `data.fullSync` is `true`):

```bash title="Full sync"
npx myop export --api-key "$MYOP_API_KEY"
```

### Step 5: Deploy to CDN

Upload the exported files to your CDN:

```bash
aws s3 sync ./myop-static s3://your-bucket \
  --delete \
  --cache-control "public, max-age=300"
```

## Complete Example: Express Server

A minimal webhook receiver that verifies signatures and triggers a sync:

```javascript title="webhook-server.js"
const express = require('express');
const crypto = require('crypto');
const { execSync } = require('child_process');

const app = express();
const WEBHOOK_SECRET = process.env.MYOP_WEBHOOK_SECRET;
const MYOP_API_KEY = process.env.MYOP_API_KEY;

app.post('/webhooks/myop', express.raw({ type: 'application/json' }), (req, res) => {
  // 1. Verify signature
  const signature = req.headers['x-myop-signature'];
  const expected = 'sha256=' + crypto
    .createHmac('sha256', WEBHOOK_SECRET)
    .update(req.body)
    .digest('hex');

  if (!crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))) {
    console.error('Invalid webhook signature');
    return res.status(401).send('Invalid signature');
  }

  // 2. Parse payload
  const payload = JSON.parse(req.body);
  const releases = payload.data?.releases;
  console.log(`Received ${releases?.length || 0} release(s)`);

  // 3. Run export
  try {
    if (releases && releases.length > 0) {
      execSync(`npx myop export --releases '${JSON.stringify(releases)}'`, {
        env: { ...process.env, MYOP_API_KEY },
        stdio: 'inherit'
      });
    } else {
      execSync('npx myop export', {
        env: { ...process.env, MYOP_API_KEY },
        stdio: 'inherit'
      });
    }

    // 4. Deploy (replace with your CDN upload command)
    execSync('aws s3 sync ./myop-static s3://your-bucket --delete', {
      stdio: 'inherit'
    });

    res.sendStatus(200);
  } catch (err) {
    console.error('Sync failed:', err.message);
    res.status(500).send('Sync failed');
  }
});

app.listen(3000, () => console.log('Webhook receiver listening on port 3000'));
```

## CI/CD Examples

### GitLab CI

Use a [GitLab webhook trigger](https://docs.gitlab.com/ee/ci/triggers/) to start a pipeline:

```yaml title=".gitlab-ci.yml"
sync-myop:
  stage: deploy
  image: node:20
  script:
    - npx myop export
    - aws s3 sync ./myop-static s3://$AWS_S3_BUCKET --delete
  only:
    - triggers
```

Set your webhook URL to `https://gitlab.com/api/v4/projects/{id}/trigger/pipeline` and pass the trigger token as a query parameter.

### Jenkins

Configure a [Generic Webhook Trigger](https://plugins.jenkins.io/generic-webhook-trigger/) plugin on your Jenkins job. Set the webhook URL to your Jenkins endpoint and extract `$.data.releases` from the payload.

## Retry Policy

Webhooks are delivered with a **10-second timeout**. If your endpoint doesn't respond in time, the delivery is marked as failed. Myop does not retry failed webhooks — use a scheduled full sync as a fallback to catch any missed deliveries.

## Testing

Click **Sync Now** in the Self-Hosting settings to trigger a test delivery. Check the webhook status indicator to confirm your endpoint received it successfully.

---

# Sync with GitHub Actions

Source: /docs/self-hosting/github-actions

The recommended way to keep your self-hosted components up to date. When you release a component in the Myop dashboard, a GitHub Actions workflow automatically exports and deploys it to your CDN.

## How It Works

```
Release component in dashboard
        │
        ▼
Myop fires repository_dispatch ──► GitHub Actions workflow runs
                                           │
                                    npx myop export
                                           │
                                    aws s3 sync / deploy
                                           │
                                    Components live on your CDN
```

## Setup

### Step 1: Create the Workflow

Create a repository (or use an existing one) and add this workflow file:

```yaml title=".github/workflows/myop-sync.yml"
name: Myop Component Sync

on:
  # Triggered by Myop webhook via GitHub repository_dispatch
  repository_dispatch:
    types: [myop-components-deployed]

  # Scheduled fallback — ensures components are in sync even if a webhook was missed
  schedule:
    - cron: '0 0 * * *'  # Every 24 hours (midnight UTC)

  # Manual trigger
  workflow_dispatch:

env:
  MYOP_API_URL: https://cloud.myop.dev
  OUTPUT_DIR: ./myop-static

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Export components from Myop
        run: |
          if [ "${{ github.event_name }}" = "repository_dispatch" ] && \
             [ "$RELEASES_JSON" != 'null' ] && [ -n "$RELEASES_JSON" ]; then
            echo "Incremental sync from webhook"
            npx myop export --output "$OUTPUT_DIR" --releases "$RELEASES_JSON"
          else
            echo "Full sync"
            npx myop export --output "$OUTPUT_DIR"
          fi
        env:
          MYOP_API_KEY: ${{ secrets.MYOP_API_KEY }}
          MYOP_API_URL: ${{ env.MYOP_API_URL }}
          OUTPUT_DIR: ${{ env.OUTPUT_DIR }}
          RELEASES_JSON: ${{ toJSON(github.event.client_payload.releases) }}

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1

      - name: Sync to S3
        run: |
          DELETE_FLAG=""
          if [ "${{ github.event_name }}" != "repository_dispatch" ]; then
            DELETE_FLAG="--delete"
          fi
          aws s3 sync ${{ env.OUTPUT_DIR }} s3://${{ secrets.AWS_S3_BUCKET }} \
            $DELETE_FLAG \
            --cache-control "public, max-age=300" \
            --content-type "application/json"

      - name: Invalidate CloudFront cache (optional)
        if: env.HAS_CF == 'true'
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/components/*"
        env:
          HAS_CF: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID != '' }}
```

:::info Incremental vs Full Sync
When triggered by a webhook (`repository_dispatch`), the workflow exports only the changed component and uploads it to S3 **without** `--delete` — so existing files are preserved.

On schedule or manual trigger, it does a full export and syncs with `--delete` to remove any stale files from S3.
:::

### Step 2: Add Repository Secrets

Go to your repository's **Settings > Secrets and variables > Actions** and add:

| Secret | Description |
|--------|-------------|
| `MYOP_API_KEY` | Your Myop API key (`myop_sk_...`) from Dashboard > Self-Hosting |
| `AWS_S3_BUCKET` | Your S3 bucket name (e.g., `myop-components-prod`) |
| `AWS_ACCESS_KEY_ID` | AWS IAM credentials with S3 write access |
| `AWS_SECRET_ACCESS_KEY` | AWS secret key |
| `AWS_CLOUDFRONT_DISTRIBUTION_ID` | *(Optional)* CloudFront distribution ID for cache invalidation |

### Step 3: Connect from the Dashboard

1. Go to **Dashboard > Rollout > Settings (gear icon) > Self-Hosting**
2. Enable **self-hosted sync**
3. Click **Add GitHub Actions**

![Add GitHub Actions button](/assets/images/add-github-actions-11f9e673d1abf3e9a5bb304c1b110a28.png)

4. Authorize the Myop GitHub App and select the repository with your workflow
5. Click **Add**, then **Save Configuration**

![Connected GitHub repo](/assets/images/github-connected-11f9e673d1abf3e9a5bb304c1b110a28.png)

That's it. When you release a component, Myop will send a `repository_dispatch` event to your repo, triggering the workflow.

:::tip Don't see your repo?
The Myop GitHub App needs access to the repository. Click **"Configure GitHub App access"** in the repo selector to add it.
:::

### Step 4: Test the Connection

Click **Sync Now** in the Self-Hosting settings. This triggers a full export and fires your webhook. You should see:

- A green status indicator next to your webhook showing `204` (GitHub's success response)
- A new workflow run in your repository's Actions tab

![Sync status](/assets/images/sync-status-abf718abddfb9b63ba18d473a716c6d6.png)

## Alternative: Git-Commit Sync

Instead of deploying to a cloud storage bucket, you can have the workflow commit the exported files directly back into the repository. The repo itself becomes the source of truth — no cloud credentials needed.

```yaml title=".github/workflows/myop-sync.yml"
name: Myop Component Sync

on:
  repository_dispatch:
    types: [myop-components-deployed]
  schedule:
    - cron: '0 0 * * *'
  workflow_dispatch:

permissions:
  contents: write

env:
  MYOP_API_URL: https://cloud.myop.dev
  OUTPUT_DIR: ./components

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Export components from Myop
        run: |
          if [ "${{ github.event_name }}" = "repository_dispatch" ] && \
             [ "$RELEASES_JSON" != 'null' ] && [ -n "$RELEASES_JSON" ]; then
            echo "Incremental sync from webhook"
            npx myop export --output "$OUTPUT_DIR" --releases "$RELEASES_JSON"
          else
            echo "Full sync"
            npx myop export --output "$OUTPUT_DIR"
          fi
        env:
          MYOP_API_KEY: ${{ secrets.MYOP_API_KEY }}
          MYOP_API_URL: ${{ env.MYOP_API_URL }}
          OUTPUT_DIR: ${{ env.OUTPUT_DIR }}
          RELEASES_JSON: ${{ toJSON(github.event.client_payload.releases) }}

      - name: Commit and push changes
        run: |
          git config user.name "myop-bot"
          git config user.email "bot@myop.dev"
          git add -A
          if git diff --staged --quiet; then
            echo "No changes to commit"
          else
            TRIGGER="${{ github.event_name }}"
            if [ "$TRIGGER" = "repository_dispatch" ]; then
              MSG="sync: update components from Myop webhook"
            elif [ "$TRIGGER" = "schedule" ]; then
              MSG="sync: scheduled full sync"
            else
              MSG="sync: manual full sync"
            fi
            git commit -m "$MSG"
            git push
          fi
```

This approach has a few advantages:

- **Only one secret** — just `MYOP_API_KEY`, no cloud provider credentials
- **Full version history** — every component change is a git commit you can diff, revert, or audit
- **Flexible serving** — serve the files via GitHub Pages, pull them in your CI/CD pipeline, or use raw URLs during development

:::tip
The `permissions: contents: write` line lets the workflow push commits using the built-in `GITHUB_TOKEN` — no personal access token needed.
:::

## Azure / GCS / Other Providers

Replace the S3 steps with your cloud provider's CLI:

```yaml title="Azure Blob Storage"
- name: Deploy to Azure
  uses: azure/CLI@v1
  with:
    inlineScript: |
      az storage blob upload-batch \
        --source ./myop-static \
        --destination '$web/myop' \
        --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT }} \
        --overwrite
```

```yaml title="Google Cloud Storage"
- name: Deploy to GCS
  uses: google-github-actions/upload-cloud-storage@v2
  with:
    path: ./myop-static
    destination: ${{ secrets.GCS_BUCKET }}/myop
```

## Troubleshooting

| Issue | Solution |
|-------|----------|
| Workflow not triggered | Check that the Myop GitHub App is installed on the repo and the webhook shows a green status in Self-Hosting settings |
| `401 Unauthorized` in workflow | Verify `MYOP_API_KEY` secret is set correctly |
| `403 Forbidden` on S3 | Check IAM permissions — the user needs `s3:PutObject`, `s3:DeleteObject`, `s3:ListBucket` |
| Components not updating | Check S3 CORS configuration — your app domain must be allowed. See [Static File Format > CORS](/docs/self-hosting/static-format#cors-configuration) |

---

# Self-Hosting Overview

Source: /docs/self-hosting

# Self-Hosting Components

Myop supports serving components from **your own infrastructure** — S3, CloudFront, Azure Blob Storage, GCS, or any static file server. Your app loads components entirely from your CDN with zero runtime dependency on Myop servers.

## How It Works

```
┌─────────────┐     webhook / schedule     ┌──────────────────┐
│ Myop Cloud   │ ─────────────────────────► │  Your CI/CD       │
│ (dashboard)  │    on every release        │  (GitHub Actions / │
└─────────────┘                             │   custom pipeline) │
                                            └────────┬─────────┘
                                                     │  npx myop export
                                                     ▼
                                            ┌──────────────────┐
                                            │  Your CDN / S3    │
                                            └────────┬─────────┘
                                                     │
                                                     ▼
                                            Your App + Myop SDK
                                            enableSelfHosted("https://cdn.yourco.com")
```

1. **You develop and publish** components using the Myop dashboard as usual
2. **On every release**, Myop notifies your CI/CD pipeline (via GitHub Actions or webhook)
3. **Your pipeline runs `npx myop export`** to pull static JSON files
4. **Files are deployed** to your S3/CDN
5. **Your app's SDK** fetches components from your CDN instead of Myop cloud

## Quick Start

### 1. Generate an API Key

Go to **Dashboard > Rollout > Settings (gear icon) > Self-Hosting** tab, then click **Create API Key**. Copy and save the key — it's only shown once.

![Self-Hosting settings tab](/assets/images/self-hosting-settings-84b3887789d8bb974eb088ad749dc514.png)

### 2. Export Components

```bash
npx myop export --api-key myop_sk_... --output ./myop-static
```

This creates a directory of static JSON files — one per component per environment. See [CLI Reference](#cli-reference) below for all options.

### 3. Deploy to Your CDN

Upload the `myop-static/` directory to your S3 bucket, CDN, or static hosting:

```bash
aws s3 sync ./myop-static s3://your-bucket --cache-control "public, max-age=300"
```

### 4. Configure Your App

```typescript
import { enableSelfHosted, setEnvironment } from '@myop/react';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');
setEnvironment('production');
```

That's it. Your app now loads components entirely from your infrastructure.

### 5. Automate (recommended)

Set up automated syncing so components stay up to date when you release new versions:

- **[GitHub Actions](/docs/self-hosting/github-actions)** — One-click setup from the dashboard. Recommended for GitHub users.
- **[Generic Webhooks](/docs/self-hosting/generic-webhooks)** — For any CI/CD system (Jenkins, GitLab CI, CircleCI, etc.)

---

## CLI Reference

### `npx myop export`

Exports your organization's components as static JSON files.

```bash
npx myop export [options]
```

#### Options

| Flag | Environment Variable | Default | Description |
|------|---------------------|---------|-------------|
| `-k, --api-key <key>` | `MYOP_API_KEY` | — | Your Myop API key (required) |
| `-o, --output <dir>` | `OUTPUT_DIR` | `./myop-static` | Directory to write exported files to |
| `-u, --url <url>` | `MYOP_API_URL` | `https://cloud.myop.dev` | Myop API URL |
| `--releases <json>` | — | — | JSON array of releases for incremental sync |
| `--component <id>` | — | — | Export a single component by ID |
| `--env <env>` | — | — | Environment to export (used with `--component`) |

Command-line flags take priority over environment variables. Environment variables take priority over defaults.

#### Output Directory

By default, files are written to `./myop-static` relative to where you run the command. You can change this in three ways:

```bash
# 1. Using the --output flag
npx myop export --output /var/www/myop-components

# 2. Using the OUTPUT_DIR environment variable
OUTPUT_DIR=/var/www/myop-components npx myop export

# 3. In a CI environment (e.g., GitHub Actions), set it as a workflow env
#    env:
#      OUTPUT_DIR: ./myop-static
```

The directory is created automatically if it doesn't exist.

#### Full Export

Exports all components across all environments. A `manifest.json` is also generated.

```bash
npx myop export --api-key myop_sk_... --output ./myop-static
```

#### Incremental Export

Exports only specific components that changed. Used in CI when triggered by a webhook — the `--releases` flag accepts the same JSON array from the [webhook payload](/docs/self-hosting/api-keys-webhooks#webhook-payload-generic).

```bash
npx myop export --releases '[{"componentId":"uuid-1","environment":"production","environmentId":"...","variantId":"..."}]'
```

Or export a single component:

```bash
npx myop export --component 2098cfba-5124-48ff-b87d-6cd71c14cf7a --env production
```

:::tip
Incremental exports also fetch the `preview.json` for each component, so your preview environment stays in sync too.
:::

#### Using in CI/CD

In CI pipelines, use environment variables instead of inline flags to keep secrets out of logs:

```bash
export MYOP_API_KEY=${{ secrets.MYOP_API_KEY }}
export OUTPUT_DIR=./myop-static

npx myop export
```

See [Sync with GitHub Actions](/docs/self-hosting/github-actions) for a complete workflow example.

---

## Guides

- [Sync with GitHub Actions](/docs/self-hosting/github-actions) — Automated sync with one-click setup
- [Generic Webhook Integration](/docs/self-hosting/generic-webhooks) — Custom CI/CD integration
- [API Keys & Webhooks Reference](/docs/self-hosting/api-keys-webhooks) — Authentication and webhook payload details
- [Static File Format](/docs/self-hosting/static-format) — Directory structure and JSON format
- [SDK Configuration](/docs/self-hosting/sdk-config) — Framework-specific setup

---

# SDK Configuration

Source: /docs/self-hosting/sdk-config

After deploying your static component files to a CDN, configure your app's Myop SDK to load components from there.

## Basic Setup

```typescript
import { enableSelfHosted } from '@myop/sdk';

// Call once at app startup, before rendering any components
enableSelfHosted('https://cdn.yourcompany.com/myop-static');
```

This switches the SDK to **static mode**: instead of calling `https://cloud.myop.dev/consume?id=...`, it fetches:

```
https://cdn.yourcompany.com/myop-static/components/{componentId}/{environment}.json
```

## Framework Examples

### React

```tsx
// src/App.tsx
import { enableSelfHosted } from '@myop/react';
import { MyopComponent } from '@myop/react';

// Configure once at the top level
enableSelfHosted('https://cdn.yourcompany.com/myop-static');

function App() {
  return (
    <MyopComponent
      componentId="comp-uuid-1"
      data={{ user: currentUser }}
      on={(action, payload) => handleAction(action, payload)}
    />
  );
}
```

### Vue

```typescript
// src/main.ts
import { enableSelfHosted } from '@myop/vue';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');
```

### Angular

```typescript
// src/app/app.module.ts
import { enableSelfHosted } from '@myop/angular';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');
```

### Vanilla JavaScript

```html
<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
<script>
  myop.enableSelfHosted('https://cdn.yourcompany.com/myop-static');
</script>
```

## Environment Configuration

By default, the SDK uses the `production` environment. To use a different environment:

```typescript
import { enableSelfHosted, setEnvironment } from '@myop/sdk';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');
setEnvironment('staging');
```

This will fetch:
```
.../components/{componentId}/staging.json
```

## Hybrid Setup

You can use self-hosting for production while keeping Myop cloud for development:

```typescript
import { enableSelfHosted } from '@myop/sdk';

if (process.env.NODE_ENV === 'production') {
  enableSelfHosted('https://cdn.yourcompany.com/myop-static');
}
// In development, the SDK defaults to https://cloud.myop.dev
```

## Preloading

Preloading works the same in self-hosted mode:

```typescript
import { enableSelfHosted, preloadComponents } from '@myop/sdk';

enableSelfHosted('https://cdn.yourcompany.com/myop-static');

// Preload critical components at app startup
await preloadComponents([
  'comp-pricing-table',
  'comp-onboarding-flow'
]);
```

## Caching

Static JSON files are highly cacheable. Configure your CDN with appropriate cache headers:

| Strategy | Cache-Control | Use Case |
|----------|--------------|----------|
| Aggressive | `public, max-age=86400` | Components change rarely |
| Balanced | `public, max-age=300` | Moderate update frequency |
| None | `no-cache` | Testing / development |

The SDK also caches fetched components in memory for the page session, so each component is fetched at most once.

### Cache-Busting with Query Parameters

When using aggressive CDN caching, you need a way to bust the cache after deploying new component versions. Pass a `queryParams` object as the second argument to `enableSelfHosted`:

```typescript
enableSelfHosted('https://cdn.yourcompany.com/myop-static', {
  lastupdate: '11112026'
});
```

This appends the query parameters to every component fetch URL:

```
https://cdn.yourcompany.com/myop-static/components/{componentId}/production.json?lastupdate=11112026
```

You can use any key/value pairs — a deploy timestamp, a build hash, a version number, etc.:

```typescript
enableSelfHosted('https://cdn.yourcompany.com/myop-static', {
  v: 'abc123',          // git commit hash
  t: Date.now().toString()  // deploy timestamp
});
```

**Tip:** Pair this with aggressive `Cache-Control: public, max-age=86400` headers on your CDN. When you deploy new components, update the query parameter value — the CDN treats the new URL as a cache miss and fetches the fresh file.

You can also update query parameters at any point after initialization:

```typescript
import { getCloudRepository } from '@myop/sdk';

getCloudRepository().setQueryParams({ v: 'def456' });
```

Note that updating query parameters does not re-fetch components that were already loaded in the current page session (the SDK's in-memory cache still holds them). The new parameters apply to components fetched after the update.

---

# Static File Format

Source: /docs/self-hosting/static-format

The export produces a directory of JSON files. Each file matches the exact response format of the Myop `/consume` API, so the SDK can parse them identically.

## Directory Structure

```
myop-static/
  manifest.json
  components/
    {componentId}/
      production.json
      staging.json
      preview.json
```

## manifest.json

An index of all exported components. Used for tooling and debugging — the SDK does not read this file.

```json
{
  "version": 1,
  "exportedAt": "2026-03-23T10:00:00.000Z",
  "organization": "org-abc-123",
  "components": [
    {
      "id": "comp-uuid-1",
      "name": "Pricing Table"
    },
    {
      "id": "comp-uuid-2",
      "name": "Onboarding Flow"
    }
  ]
}
```

## Component Files

Each `{componentId}/{environment}.json` file contains the full component data needed to render it:

```json
{
  "item": {
    "name": "Pricing Table",
    "id": "comp-uuid-1",
    "organizationId": "org-abc-123",
    "consume_variant": [
      {
        "id": "variant-uuid",
        "name": "Default",
        "loader": {
          "type": "HTMLLoader",
          "HTML": "<!DOCTYPE html><html>...</html>",
          "shadowRootMode": "localFrame",
          "autoHeight": true
        }
      }
    ]
  }
}
```

### Environment Files

| File | Description |
|------|-------------|
| `production.json` | The variant released to the `production` environment |
| `staging.json` | The variant released to `staging` (if exists) |
| `preview.json` | The latest variant regardless of release status |

Only environments with an active release are exported. If a component has no release for `staging`, there will be no `staging.json`.

## URL Resolution

When the SDK is in static mode, it constructs URLs as:

```
GET ${baseUrl}/components/${componentId}/${environment}.json
```

For example, with `enableSelfHosted('https://cdn.example.com/myop')`:

```
https://cdn.example.com/myop/components/comp-uuid-1/production.json
```

## CORS Configuration

Your CDN/S3 bucket must allow cross-origin requests from your application domain. Example S3 CORS:

```json
[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["https://app.yourcompany.com"],
    "MaxAgeSeconds": 86400
  }
]
```

---

# AI Integration

Source: /docs/cli/ai-integration

The Myop CLI includes two commands for AI coding assistants: `myop train` installs skill files so assistants understand Myop conventions, and `myop mcp` configures the Myop MCP server for component management.

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/ai-skills.svg" alt="myop train installs skills for 30+ AI coding assistants" width="460" />
</div>

## myop train — Install AI Agent Skills

```bash
npx myop train
```

This installs SKILL.md files into your project's AI agent directories. Skills teach coding assistants how to build Myop components, use the CLI, and integrate with host frameworks.

### What it installs

Skills are installed using the [Agent Skills standard](https://www.npmjs.com/package/skills), which supports **30+ AI coding assistants**:

- **Claude Code** — `.claude/skills/`
- **Cursor** — `.cursor/skills/`
- **Windsurf** — `.windsurf/skills/`
- **VS Code Copilot** — `.github/copilot/skills/`
- **Kiro** — `.kiro/skills/`
- **Goose** — `.goose/skills/`
- **Augment** — `.augment/skills/`
- **Cline** — `.cline/skills/`
- And many more

### Skills included

| Skill | What the AI learns |
|-------|--------------------|
| **myop-cli** | All CLI commands, workflows, `myop.config.json` structure, dev server usage |
| **myop-component** | Public API (`myop_init_interface`, `myop_cta_handler`), type definitions, sizing, layout, single-file vs multi-file architecture, common mistakes |
| **myop-react-host** | `<MyopComponent>` in React, typed event handlers (`onItemSelected`), data binding, preloading, auto-generated packages, `enableLocalDev()` |
| **myop-vue-host** | `<MyopComponent>` in Vue 3, `@cta` events, slots, deep-watched data, `enableLocalDev()` |
| **myop-angular-host** | `<myop-component>` in Angular, standalone component, `(cta)` output, content projection, `enableLocalDev()` |
| **myop-react-native-host** | `<MyopComponent>` in React Native, WebView bridge, native props (scroll, zoom, selection), device setup |

### Smart framework detection

`myop train` reads your `package.json` and installs only the relevant host skills:

| Detected dependency | Host skill installed |
|--------------------|---------------------|
| `react` or `@myop/react` | `myop-react-host` |
| `vue` or `@myop/vue` | `myop-vue-host` |
| `@angular/core` or `@myop/angular` | `myop-angular-host` |
| `react-native` or `@myop/react-native` | `myop-react-native-host` |
| No framework detected | All host skills |

The core skills (`myop-cli` and `myop-component`) are always installed.

### When to run it

- After cloning a Myop project — `npx myop train`
- After adding a new framework — `npx myop train` (picks up new deps)
- After updating the CLI — `npx myop train` (gets latest skill content)
- During `myop create` — skills are installed automatically

### Example output

```
$ npx myop train
✔ AI agent skills installed
   Detected: react, @myop/react
   Skills: myop-cli, myop-component, myop-react-host
```

### What the AI can do after training

With skills installed, your AI coding assistant can:

- **Create new components** — correctly scaffold `index.html` with `myop_init_interface`, `myop_cta_handler`, type definitions, preview data, and proper IIFE encapsulation
- **Edit existing components** — understand the public API contract and maintain correct patterns
- **Integrate into host apps** — use the right SDK component (`<MyopComponent>`) with correct props, events, and configuration
- **Run CLI commands** — know the correct package name (`npx myop`), command syntax, and workflows
- **Set up local dev** — configure `enableLocalDev()`, start the dev server, set up monorepo mode

---

## myop mcp — Configure MCP Server

```bash
npx myop mcp
```

The Myop MCP (Model Context Protocol) server gives your AI coding assistant direct access to the Myop platform — uploading components, listing components, reading source code, and more.

### Supported assistants

| Assistant | Config location |
|-----------|----------------|
| **Claude Code** | `~/.claude.json` |
| **Cursor** | `~/.cursor/mcp.json` |
| **Windsurf** | `~/.codeium/windsurf/mcp_config.json` |
| **VS Code Copilot** | OS-specific VS Code settings |

### Setup

1. Run `npx myop mcp`
2. Select your AI coding assistant
3. The CLI writes the MCP server configuration to the correct file
4. Restart your assistant
5. Authenticate (the assistant will prompt you to sign in via browser)

### What the MCP server provides

Once configured, your AI assistant can:

- **Upload components** — push HTML directly to the Myop platform
- **List components** — browse your organization's components
- **Read component source** — fetch the latest HTML of any component by ID
- **Manage organizations** — list available organizations

### Example flow

After running `npx myop mcp` for Claude Code:

```
✔ Myop MCP configured for Claude Code
  Config:  ~/.claude.json
  Server:  https://mcp.myop.dev/mcp

  Next steps:
  Restart Claude Code to pick up the new MCP config.
  Type /mcp to see all MCP servers and verify "myop" is listed.
  Select "Authenticate" next to myop — your browser will open
  to sign in with your Myop account (OAuth).
```

---

## Recommended Setup

For the best AI-assisted development experience, run both commands:

```bash
# 1. Install skills (teaches the AI about Myop)
npx myop train

# 2. Configure MCP (gives the AI access to Myop platform tools)
npx myop mcp
```

Skills teach the AI **how** to build Myop components correctly. The MCP server gives it **access** to upload, download, and manage them.

---

# AI Local Dev Workflow

Source: /docs/cli/ai-local-dev

This guide shows how to set up a fully local development loop with an AI coding assistant like Claude Code. The AI edits component source files, the dev server picks up changes instantly, and you test in your running app — no browser extension, no publishing, no cloud round-trip.

## Prerequisites

1. **Myop CLI** installed — `npm i -g myop`
2. **AI assistant configured** — run `npx myop train` and `npx myop mcp` ([AI Integration](/docs/cli/ai-integration))
3. **A host app** using a Myop SDK (`@myop/react`, `@myop/vue`, `@myop/angular`)

## The Workflow

```
AI edits HTML file → myop dev serves it (HMR) → App loads from localhost:9292 → Test in browser
```

### 1. Start the dev server

In your component directory:

```bash
npx myop dev
```

This serves the component on `http://localhost:9292` and watches for file changes. Edits to `index.html` trigger instant hot-reload — no manual refresh needed.

For multiple components, use monorepo mode:

```bash
npx myop dev -m
```

### 2. Point your app to localhost

Add one line to your app's initialization code:

```tsx
import { enableLocalDev } from "@myop/react"; // or @myop/vue, @myop/angular

enableLocalDev();
```

This redirects all Myop component fetches from `cloud.myop.dev` to `localhost:9292`. Components registered on the dev server are served locally; everything else is proxied to cloud automatically.

:::tip
A common pattern is to enable local dev conditionally:
```tsx
if (process.env.NODE_ENV === 'development') {
  enableLocalDev();
}
```
:::

### 3. Let the AI iterate

With the dev server running and your app pointed to localhost, the AI assistant can:

1. **Edit the component HTML** directly in your project
2. **`myop dev` picks up the change** via file watching and HMR
3. **Your app reflects the update** immediately
4. **AI tests via Chrome MCP** (or you test manually) on `http://localhost:...`
5. **Repeat** until the component is right

No upload, no extension, no publish needed during development.

### 4. Deploy when ready

Once the component works as expected:

```bash
npx myop push
```

Or let the AI upload via the MCP server — at that point, the component is ready for release.

## Example: Claude Code + Chrome MCP

A typical AI-assisted session looks like this:

1. **You**: "Refactor the sidebar feature into a Myop component"
2. **Claude Code**: Creates `index.html` with `myop_init_interface`, preview data, and CTA handlers
3. **Claude Code**: Edits the file, `myop dev` serves it with HMR
4. **Claude Code** (via Chrome MCP): Navigates to your local app, takes a screenshot, spots layout issues
5. **Claude Code**: Fixes the CSS, HMR updates instantly
6. **Claude Code** (via Chrome MCP): Verifies the fix visually
7. **You**: "Looks good, push it" → `npx myop push`

The key insight: Claude Code works with **local files**, not cloud uploads, during development. The dev server bridges the gap between file edits and your running app.

## Troubleshooting

| Problem | Fix |
|---------|-----|
| App still loads from cloud | Make sure `enableLocalDev()` runs before any `<MyopComponent>` renders |
| Component not updating | Check that `myop dev` is running and watching the right directory |
| Chrome MCP sees stale version | Hard-refresh the page or clear browser cache — HMR should handle most cases |
| Multiple components needed | Use `myop dev -m` for monorepo mode |

## Next Steps

- [Dev Server & Local Development](/docs/cli/dev-server) — full dev server reference
- [AI Integration](/docs/cli/ai-integration) — set up `myop train` and `myop mcp`
- [Creating Components](/docs/cli/create-component) — component structure and public API

---

# Commands Reference

Source: /docs/cli/commands

All commands are available via `npx myop <command>` or `myop <command>` if installed globally.

## Quick Reference

| Command | Description |
|---------|-------------|
| `myop create` | Create a new component (scaffolds files + starts dev server) |
| `myop dev` | Start development server with HMR on port 9292 |
| `myop push [componentId]` | Upload component to Myop platform |
| `myop pull [componentId]` | Download component HTML from Myop platform |
| `myop list [--org <orgId>]` | Browse, search, and batch pull/push remote components |
| `myop train` | Install AI agent skills for coding assistants |
| `myop mcp` | Configure Myop MCP server for your AI coding assistant |
| `myop login` | Authenticate with Myop (opens browser for OAuth) |
| `myop logout` | Clear stored credentials |
| `myop whoami` | Show current authenticated user |

## Global Options

| Flag | Description |
|------|-------------|
| `--ci` | CI/CD mode: output status as JSON, no interactive prompts |
| `-m`, `--monorepo` | Monorepo mode: scan for all `myop.config.json` files in nested directories |
| `-c`, `--config <path>` | Path to `myop.config.json` (default: `./myop.config.json`) |
| `-v`, `--verbose` | Enable verbose output |

---

## `myop create`

Create a new Myop component in the current directory.

```bash
npx myop create
```

**What it does:**
1. Prompts for a component name (defaults to directory name)
2. Checks that `index.html` and `myop.config.json` don't already exist
3. Creates `myop.config.json` with component metadata
4. Creates `index.html` with a complete component template including type definitions, sizing, and preview data
5. Installs AI agent skills for your coding assistant
6. Starts the dev server automatically

**Files created:**
```
./index.html          # Complete Myop component (single-file)
./myop.config.json    # Component metadata
```

:::warning
If `index.html` or `myop.config.json` already exists, the command exits with an error. Use `myop dev` for existing components.
:::

---

## `myop dev`

Start a development server with file watching and hot module replacement.

```bash
npx myop dev
```

**Ports:**
- **9292** — Component dev server
- **9293** — Management dashboard

**Features:**
- Watches `.js`, `.css`, `.html` files for changes
- HMR: changes reflect instantly in the browser
- Single-file mode: serves `index.html` directly (no build step)
- Multi-file mode: runs `npm run build` or `node build.js` on change

**Monorepo mode:**
```bash
npx myop dev -m
```
Scans for all `myop.config.json` files in nested directories and lets you select which components to run simultaneously.

See the [Dev Server guide](/docs/cli/dev-server) for details.

---

## `myop push`

Upload a component to the Myop platform.

```bash
# Push using componentId from myop.config.json
npx myop push

# Push to a specific component ID (overrides config)
npx myop push <componentId>
```

**What it does:**
1. Reads `myop.config.json` to identify the component
2. Detects single-file mode (`index.html`) or multi-file mode (`dist/index.html`)
3. For multi-file projects: runs `npm run build` first
4. Authenticates (prompts for login if needed)
5. Uploads HTML to Myop via presigned URL
6. On first push: assigns a `componentId` (UUID) and updates `myop.config.json`
7. On subsequent pushes: adds a new version to the existing component

**After push:**
```
https://dashboard.myop.dev/dashboard/2.0/component/<componentId>
```

See the [Push & Pull guide](/docs/cli/push-and-pull) for details.

---

## `myop pull`

Download a component's HTML from the Myop platform.

```bash
# Pull using componentId from myop.config.json
npx myop pull

# Pull a specific component by ID
npx myop pull <componentId>

# Pull to a custom output path
npx myop pull <componentId> -o ./components/sidebar/index.html
```

**Options:**

| Flag | Description |
|------|-------------|
| `-o`, `--output <path>` | Output file path (default: `index.html` or `dist/index.html`) |

**What it does:**
1. Determines `componentId` from the argument or `myop.config.json`
2. Authenticates (prompts for login if needed)
3. Fetches the component HTML from Myop
4. Writes the HTML to the output path
5. Creates or updates `myop.config.json` with component metadata

See the [Push & Pull guide](/docs/cli/push-and-pull) for details.

---

## `myop list`

Browse all components in your organization with interactive search, multi-select, and batch operations.

```bash
# Interactive browse
npx myop list

# Specify organization
npx myop list --org <orgId>
```

**Options:**

| Flag | Description |
|------|-------------|
| `--org <orgId>` | Organization ID to use (skips org selection prompt) |

**What it does:**
1. Authenticates and loads your organizations
2. Resolves which org to use (saved default, `--org` flag, or prompts)
3. Fetches all components in the organization
4. Shows a searchable list — type to filter, enter to select, repeat
5. When done selecting, choose Pull or Push
6. **Pull** — downloads all selected components in parallel, each into its own subdirectory
7. **Push** — scans local directories for matching `componentId`s and uploads in parallel

**Organization memory:** the selected org is saved to `~/.myop/preferences.json` and reused next time.

---

## `myop train`

Install AI agent skills so coding assistants understand Myop conventions.

```bash
npx myop train
```

**What it does:**
1. Detects frameworks from `package.json` (React, Vue, Angular, React Native)
2. Selects relevant skills (always includes `myop-cli` + `myop-component`)
3. Installs SKILL.md files into all AI agent directories using the [Agent Skills standard](https://www.npmjs.com/package/skills)

**Supported AI coding assistants:** Claude Code, Cursor, Windsurf, VS Code Copilot, Kiro, Goose, Augment, Cline, and 30+ more.

**Skills installed:**

| Skill | Description | Installed When |
|-------|-------------|----------------|
| `myop-cli` | CLI commands and workflows | Always |
| `myop-component` | Component development (public API, types, sizing) | Always |
| `myop-react-host` | React integration with `@myop/react` | React detected |
| `myop-vue-host` | Vue 3 integration with `@myop/vue` | Vue detected |
| `myop-angular-host` | Angular integration with `@myop/angular` | Angular detected |
| `myop-react-native-host` | React Native integration with `@myop/react-native` | React Native detected |

If no framework is detected, all skills are installed.

See the [AI Integration guide](/docs/cli/ai-integration) for details.

---

## `myop mcp`

Configure the Myop MCP (Model Context Protocol) server for your AI coding assistant.

```bash
npx myop mcp
```

Interactive setup for:
- **Claude Code** — writes to `~/.claude.json`
- **Cursor** — writes to `~/.cursor/mcp.json`
- **Windsurf** — writes to `~/.codeium/windsurf/mcp_config.json`
- **VS Code (GitHub Copilot)** — writes to the VS Code user settings

The MCP server gives your AI assistant access to Myop tools: uploading components, listing components, and reading component source code.

See the [AI Integration guide](/docs/cli/ai-integration) for details.

---

## `myop login`

Authenticate with the Myop platform via OAuth.

```bash
npx myop login
```

Opens a browser window for authentication. Tokens are stored locally at `~/.myop/credentials.json` with `0o600` permissions (owner read/write only). Tokens refresh automatically when expired.

---

## `myop logout`

Clear stored credentials.

```bash
npx myop logout
```

---

## `myop whoami`

Show the current authenticated user.

```bash
npx myop whoami
```

---

## CI/CD Mode

```bash
npx myop --ci
```

Outputs JSON with version, config status, and auth status. No interactive prompts.

```json
{
  "version": "0.1.46",
  "config": {
    "found": true,
    "path": "./myop.config.json",
    "name": "My Component",
    "componentId": "abc-123",
    "organization": "org-456"
  },
  "auth": {
    "loggedIn": true,
    "email": "user@example.com"
  }
}
```

---

# Component Development

Source: /docs/cli/create-component

A Myop component is an isolated, independently deployable UI module. It runs inside an iframe managed by the host SDK (`@myop/react`, `@myop/vue`, `@myop/angular`, or `@myop/react-native`). The component communicates with the host through exactly **2 global functions**.

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/component-api.svg" alt="Myop component public API diagram" width="500" />
</div>

## The Public API

| Function | Direction | Purpose |
|----------|-----------|---------|
| `myop_init_interface(data)` | Host → Component | Receive data, render UI |
| `myop_cta_handler(action, payload)` | Component → Host | Send user actions back |

### myop_init_interface

Called by the host to pass data into the component:

```javascript
window.myop_init_interface = function(data) {
    if (!data) return currentState;  // Getter mode
    render(data);                     // Setter mode
};
```

- **With argument** — the host is sending data. Render your UI.
- **Without argument** — the host is reading current state. Return the last data received.

### myop_cta_handler

Called by the component to send events to the host:

```javascript
window.myop_cta_handler('item-selected', { itemId: '123' });
window.myop_cta_handler('form-submitted', { name: 'John', email: 'john@example.com' });
```

The host receives these events via props/events on the SDK component (e.g., `on` prop in React, `@cta` event in Vue).

## Type Definitions

Define TypeScript interfaces in a `<script type="myop/types">` block in the HTML `<head>`:

```html
<script type="myop/types">
interface MyopInitData {
    title: string;
    items: Array<{ id: string; label: string }>;
}

interface MyopCtaPayloads {
    'item-selected': { itemId: string };
    'form-submitted': { name: string; email: string };
    'size-requested': {
        width?: number | null;
        height?: number | null;
        minWidth?: number | null;
        maxWidth?: number | null;
        minHeight?: number | null;
        maxHeight?: number | null;
        required?: boolean;
    };
}

declare function myop_init_interface(): MyopInitData;
declare function myop_init_interface(data: MyopInitData): void;
declare function myop_cta_handler<K extends keyof MyopCtaPayloads>(
    action: K, payload: MyopCtaPayloads[K]
): void;
</script>
```

These types are used by:
- **Auto-generated packages** — `npm install https://cloud.myop.dev/npm/{componentId}/react` generates fully typed React/Vue/Angular components from these definitions
- **AI coding assistants** — skills use these types to provide accurate autocompletion and documentation

## Sizing

Set the default size in a `<meta>` tag:

```html
<meta name="myop:size" content='{"width":"100%","height":"100%"}'>
```

Components can request a resize at runtime using the `size-requested` CTA:

```javascript
myop_cta_handler('size-requested', {
    width: 400,
    height: 300,
    minWidth: 200,
    maxWidth: 800
});
```

## Preview Data

Add a `<script id="myop_preview">` to show sample data when opening the component directly (outside a host app):

```html
<script id="myop_preview">
    window.myop_init_interface({
        title: 'Sample Title',
        items: [
            { id: '1', label: 'First item' },
            { id: '2', label: 'Second item' }
        ]
    });
</script>
```

This script is stripped when the component runs inside a host application.

## Complete Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="myop:size" content='{"width":"100%","height":"100%"}'>
    <title>Task List</title>
    <script type="myop/types">
    interface MyopInitData {
        title: string;
        tasks: Array<{ id: string; label: string; completed: boolean }>;
    }

    interface MyopCtaPayloads {
        'task-toggled': { taskId: string; completed: boolean };
        'task-deleted': { taskId: string };
    }

    declare function myop_init_interface(): MyopInitData;
    declare function myop_init_interface(data: MyopInitData): void;
    declare function myop_cta_handler<K extends keyof MyopCtaPayloads>(
        action: K, payload: MyopCtaPayloads[K]
    ): void;
    </script>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { width: 100%; height: 100%; overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        #app-root { width: 100%; height: 100%; padding: 16px; }
        h2 { margin-bottom: 12px; }
        .task { padding: 8px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; align-items: center; gap: 8px; }
        .task.completed { text-decoration: line-through; opacity: 0.6; }
        .delete-btn { margin-left: auto; color: #e74c3c; cursor: pointer; background: none; border: none; font-size: 16px; }
    </style>
</head>
<body>
    <div id="app-root"></div>

    <script>
    (function() {
        var state = {};

        function render(data) {
            state = data;
            var root = document.getElementById('app-root');
            root.innerHTML =
                '<h2>' + (data.title || '') + '</h2>' +
                (data.tasks || []).map(function(task) {
                    return '<div class="task ' + (task.completed ? 'completed' : '') + '" data-id="' + task.id + '">' +
                        '<span>' + task.label + '</span>' +
                        '<button class="delete-btn" data-delete="' + task.id + '">&times;</button>' +
                    '</div>';
                }).join('');
        }

        window.myop_init_interface = function(data) {
            if (!data) return state;
            render(data);
        };

        window.myop_cta_handler = function(action, payload) {
            // Overridden by host application
        };

        document.getElementById('app-root').addEventListener('click', function(e) {
            var deleteBtn = e.target.closest('.delete-btn');
            if (deleteBtn) {
                e.stopPropagation();
                window.myop_cta_handler('task-deleted', { taskId: deleteBtn.dataset.delete });
                return;
            }
            var task = e.target.closest('.task');
            if (task) {
                var id = task.dataset.id;
                var isCompleted = task.classList.contains('completed');
                window.myop_cta_handler('task-toggled', { taskId: id, completed: !isCompleted });
            }
        });
    })();
    </script>

    <script id="myop_preview">
        window.myop_init_interface({
            title: 'My Tasks',
            tasks: [
                { id: '1', label: 'Review pull request', completed: false },
                { id: '2', label: 'Update documentation', completed: true },
                { id: '3', label: 'Deploy to production', completed: false }
            ]
        });
    </script>
</body>
</html>
```

## Rules

1. **Both functions must be defined at top-level script execution** — never inside `setTimeout`, `Promise.then`, `async`, `DOMContentLoaded`, or any deferred code
2. **Rendering must be synchronous** — no `fetch`, no `await`, no `setTimeout` inside `myop_init_interface`
3. **All state is private** — use an IIFE to encapsulate; only expose the 2 global functions
4. **Single entry point** — the deployed artifact is one HTML file with all CSS/JS inlined
5. **No external network requests** — components cannot fetch external resources at runtime

## Single-File vs Multi-File

### Single-file (recommended for most components)

Everything in one `index.html`. No build step needed.

```
my-component/
├── index.html          # All HTML, CSS, JS
└── myop.config.json
```

### Multi-file (for complex components)

Use any internal architecture — modules, state management, third-party libraries:

```
my-component/
├── index.html          # HTML template
├── src/
│   ├── index.js
│   ├── modules/
│   └── styles/
├── build.js            # Bundler (compiles into dist/index.html)
├── dist/
│   └── index.html      # Built entry point (deployed)
├── package.json
└── myop.config.json
```

The build step compiles all source files into a single `dist/index.html` that gets deployed.

## Common Mistakes

| Wrong | Correct |
|-------|---------|
| Defining functions inside `DOMContentLoaded` | Defining in top-level `<script>` |
| `await fetch()` inside `myop_init_interface` | Pure synchronous DOM manipulation |
| Global variables on `window` | Variables inside IIFE closure |
| Multiple `appendChild` calls | Single `innerHTML` write |
| Not returning state when called without args | `if (!data) return state;` pattern |

---

# Dev Server & Local Development

Source: /docs/cli/dev-server

The `myop dev` command starts a local development server with file watching and hot module replacement (HMR).

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/dev-server.svg" alt="Myop dev server with hot reload" width="440" />
</div>

## Starting the Dev Server

```bash
npx myop dev
```

| URL | Purpose |
|-----|---------|
| `http://localhost:9292` | Dev server — component preview |
| `http://localhost:9293` | Management dashboard |

## How It Works

### Single-file mode

If the project has only `index.html` (no `package.json` with a build script), the dev server serves the file directly. Edits to `index.html` trigger an instant HMR update — no build step.

### Multi-file mode

If the project has a build script, the dev server watches source files and triggers builds automatically:

- If `build.js` exists → runs `node build.js`
- If `package.json` has a `build` script → runs `npm run build`

The built `dist/index.html` is served and refreshed after each build.

### File watching

The dev server watches for changes to `.js`, `.css`, and `.html` files. When a change is detected, it either refreshes the served file (single-file mode) or triggers a rebuild (multi-file mode).

## Monorepo Mode

When working with multiple components in a monorepo, use the `-m` flag:

```bash
npx myop dev -m
```

This scans for all `myop.config.json` files in nested directories (up to 3 levels deep) and presents a checkbox menu to select which components to serve simultaneously.

### .myop-monorepo.json

Selected components are saved to `.myop-monorepo.json` so you don't have to pick them every time:

```json
{
  "selectedComponents": [
    "./packages/components/sidebar",
    "./packages/components/chart"
  ],
  "lastUpdated": "2025-01-15T10:30:00.000Z"
}
```

## Connecting to a Host App

To point your host app (React, Vue, Angular, React Native) at the local dev server instead of the Myop cloud:

### React

```tsx
import { enableLocalDev } from "@myop/react";
enableLocalDev(); // All <MyopComponent> instances load from localhost:9292
```

### Vue

```ts
import { enableLocalDev } from "@myop/vue";
enableLocalDev();
```

### Angular

```ts
import { enableLocalDev } from "@myop/angular";
enableLocalDev();
```

### React Native

```tsx
import { enableLocalDev } from "@myop/react-native";
enableLocalDev();

// Android emulator:
// import { setCloudRepositoryUrl } from "@myop/react-native";
// setCloudRepositoryUrl("http://10.0.2.2:9292");

// Physical device:
// setCloudRepositoryUrl("http://192.168.1.100:9292");
```

Now edits to component source files are reflected instantly in your host app.

:::tip
Remember to remove or comment out `enableLocalDev()` before deploying your host app to production.
:::

## Management Dashboard

Access the management dashboard at **http://localhost:9293** for a real-time overview of your dev environment:

<img src={require('../6_cli/img/dashboard-full.png').default} alt="Myop DevTools Dashboard — network architecture, registered components, activity log, and metrics" style={{maxWidth: '100%', display: 'block', margin: '20px auto', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.3)'}} />

### Network Architecture

The network diagram visualizes how requests flow through the dev server — from your host app, through the local server for registered components, and proxied to `cloud.myop.dev` for everything else:

<img src={require('../6_cli/img/network-architecture.png').default} alt="Network architecture — request origin, local dev server, cloud server" style={{maxWidth: '100%', display: 'block', margin: '20px auto', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.3)'}} />

### Registered Components

The panel shows all components currently served by the dev server, with their IDs, names, and local paths:

<img src={require('../6_cli/img/registered-components.png').default} alt="Registered components panel" style={{maxWidth: '400px', display: 'block', margin: '20px auto', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.3)'}} />

## Working on Existing Components Locally

When you need to modify a component that's already deployed:

```bash
# 1. Pull the component source
mkdir components/sidebar && cd components/sidebar
npx myop pull <componentId>

# 2. Start the dev server
npx myop dev

# 3. Enable local dev in your host app (see above)

# 4. Edit index.html — changes reflect instantly

# 5. Push when done
npx myop push
```

### Multiple components

```bash
mkdir -p components && cd components
npx myop pull <sidebar-id> -o sidebar/index.html
npx myop pull <chart-id> -o chart/index.html
npx myop dev -m    # Monorepo mode
```

---

# Getting Started

Source: /docs/cli/getting-started

# Getting Started with Myop CLI

The Myop CLI is a command-line tool for creating, developing, and deploying Myop components. Components are isolated, independently deployable UI modules that integrate into any host application — React, Vue, Angular, React Native, or any web framework.

## Installation

Use directly with `npx` (no install required):

```bash
npx myop create
```

Or install globally:

```bash
npm install -g myop
```

:::info Package Name
The npm package is **`myop`**. Always use `npx myop <command>`.
:::

## Create Your First Component

```bash
mkdir my-widget && cd my-widget
npx myop create
```

This will:
1. Prompt for a component name (defaults to the directory name)
2. Scaffold `index.html` and `myop.config.json`
3. Install AI agent skills for your coding assistant
4. Start the dev server automatically

Your component is now running at **http://localhost:9292**.

## Project Structure

After `myop create`, you get a single-file component:

```
my-widget/
├── index.html          # Your component (all HTML, CSS, JS in one file)
└── myop.config.json    # Component metadata
```

### index.html

The generated component includes:

- **Type definitions** — `<script type="myop/types">` block with TypeScript interfaces for the data your component receives and the events it emits
- **Sizing metadata** — `<meta name="myop:size">` for responsive layout
- **Component logic** — an IIFE that implements `myop_init_interface` (receive data) and `myop_cta_handler` (send events)
- **Preview data** — `<script id="myop_preview">` with sample data so you can see the component immediately

### myop.config.json

```json
{
  "name": "my-widget",
  "componentId": "DEV",
  "type": "html",
  "author": "@myop-cli",
  "HMR": true
}
```

- `componentId` is `"DEV"` until you push — then it becomes a UUID
- `organization` is added automatically after the first push

## Development Workflow

### 1. Develop locally

```bash
npx myop dev
```

- Component preview: **http://localhost:9292**
- Management dashboard: **http://localhost:9293**
- Edit `index.html` — changes reflect instantly via HMR

### 2. Deploy to Myop

```bash
npx myop push
```

Uploads the component to the Myop platform. On the first push, a `componentId` (UUID) is assigned and saved to `myop.config.json`.

After pushing, your component is live at:
```
https://dashboard.myop.dev/dashboard/2.0/component/<componentId>
```

### 3. Embed in your app

Install the host SDK for your framework:

```bash
# React
npm install @myop/react @myop/sdk

# Vue
npm install @myop/vue @myop/sdk

# Angular
npm install @myop/angular @myop/sdk

# React Native
npm install @myop/react-native react-native-webview
```

Then use the component:

```tsx
import { MyopComponent } from "@myop/react";

<MyopComponent
    componentId="<your-component-id>"
    data={{ title: "Hello" }}
    on={(action, payload) => console.log(action, payload)}
/>
```

See the [Host Integration guide](/docs/cli/host-integration) for framework-specific examples.

## What's Next

- [Commands Reference](/docs/cli/commands) — all CLI commands and options
- [Component Development](/docs/cli/create-component) — building components with the public API
- [Local Development](/docs/cli/dev-server) — dev server, HMR, monorepo mode
- [Push & Pull](/docs/cli/push-and-pull) — deploying and downloading components
- [Host Integration](/docs/cli/host-integration) — embedding in React, Vue, Angular, React Native
- [AI Integration](/docs/cli/ai-integration) — `myop train` and `myop mcp` for AI coding assistants

---

# Host Integration

Source: /docs/cli/host-integration

Myop components run inside any host application via framework-specific SDKs. The SDK handles all iframe/WebView management, communication, loading states, error handling, and caching.

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/host-frameworks.svg" alt="Myop host SDKs for React, Vue, Angular, and React Native" width="500" />
</div>

:::danger Never Create Iframes Manually
Always use the SDK's `<MyopComponent>`. Never create `<iframe>` or `<WebView>` elements manually — the SDK handles all communication, sizing, lifecycle, and error recovery.
:::

## React

### Installation

```bash
npm install @myop/react @myop/sdk
```

### Basic Usage

```tsx
import { MyopComponent } from "@myop/react";

function App() {
    return (
        <MyopComponent
            componentId="your-component-id"
            data={{ title: "Hello", items: ["a", "b"] }}
            on={(action, payload) => console.log(action, payload)}
            style={{ width: 400, height: 300 }}
        />
    );
}
```

### Typed Event Handlers

CTA actions from the component become `on[PascalCase]` props:

```tsx
<MyopComponent
    componentId="task-list"
    data={{ tasks }}
    onTaskToggled={({ taskId, completed }) => {
        setTasks(prev => prev.map(t => t.id === taskId ? { ...t, completed } : t));
    }}
    onTaskDeleted={({ taskId }) => {
        setTasks(prev => prev.filter(t => t.id !== taskId));
    }}
/>
```

| Component CTA action | React prop |
|---------------------|------------|
| `'item-selected'` | `onItemSelected` |
| `'form-submitted'` | `onFormSubmitted` |
| `'task-toggled'` | `onTaskToggled` |

### Props

| Prop | Type | Description |
|------|------|-------------|
| `componentId` | `string` | Myop component ID (UUID) |
| `data` | `TData` | Data passed to `myop_init_interface`. Reactive — updates trigger re-render |
| `on` | `(action, payload) => void` | Generic handler for all CTA events |
| `on[ActionName]` | `(payload) => void` | Typed handler for specific CTA |
| `onLoad` | `(component) => void` | Called when component finishes loading |
| `onError` | `(error: string) => void` | Called on load failure |
| `style` | `CSSProperties` | CSS styles for the container |
| `loader` | `ReactNode` | Custom loading indicator |
| `fallback` | `ReactNode` | Custom error fallback |
| `autoSize` | `boolean` | Auto-size container to match content |
| `environment` | `string` | Load from specific environment |
| `preview` | `boolean` | Load unpublished preview version |

### Preloading

```tsx
import { preloadComponents, isPreloaded } from "@myop/react";

await preloadComponents(["component-id-1", "component-id-2"]);
```

---

## Vue

### Installation

```bash
npm install @myop/vue @myop/sdk
```

Requires **Vue 3.5+**.

### Basic Usage

```vue
<script setup>
import { MyopComponent } from "@myop/vue";
</script>

<template>
    <MyopComponent
        component-id="your-component-id"
        :data="{ title: 'Hello' }"
        @cta="(action, payload) => console.log(action, payload)"
    />
</template>
```

### Events

| Event | Payload | Description |
|-------|---------|-------------|
| `@cta` | `action, payload` | CTA event from component |
| `@load` | `ITypedMyopComponent` | Component finished loading |
| `@error` | `string` | Load failure message |
| `@sizeChange` | `SizeInfo` | Dimension change |

### Slots

```vue
<MyopComponent component-id="...">
    <template #loader>
        <div class="spinner">Loading...</div>
    </template>
    <template #fallback>
        <div class="error">Failed to load</div>
    </template>
</MyopComponent>
```

### Data Binding

The `data` prop is **deep-watched**. Vue reactivity changes automatically call `myop_init_interface`:

```vue
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
    <button @click="count++">+1</button>
    <MyopComponent component-id="counter" :data="{ count }" />
</template>
```

### Preloading

```ts
import { preloadComponents } from "@myop/vue";
await preloadComponents(["component-id-1", "component-id-2"]);
```

---

## Angular

### Installation

```bash
npm install @myop/angular @myop/sdk
```

### Basic Usage

`MyopComponent` is a **standalone** Angular component — import directly, no NgModule needed:

```typescript
import { MyopComponent } from "@myop/angular";

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [MyopComponent],
    template: `
        <myop-component
            [componentId]="'your-component-id'"
            [data]="{ title: 'Hello' }"
            (cta)="onCta($event)"
        />
    `
})
export class AppComponent {
    onCta(event: any) {
        console.log(event.action, event.payload);
    }
}
```

### Content Projection

```html
<myop-component [componentId]="'...'">
    <ng-template #loader>
        <div class="spinner">Loading...</div>
    </ng-template>
    <ng-template #fallback>
        <div class="error">Failed to load</div>
    </ng-template>
</myop-component>
```

### Data Binding

The `data` input is tracked via `ngOnChanges`. Create a new object reference to trigger updates:

```typescript
increment() {
    this.count++;
    this.counterData = { count: this.count }; // New reference triggers update
}
```

### Preloading

```typescript
import { preloadComponents } from "@myop/angular";
await preloadComponents(["component-id-1", "component-id-2"]);
```

---

## React Native

### Installation

```bash
npm install @myop/react-native react-native-webview
```

For Expo projects:
```bash
npx expo install react-native-webview
npm install @myop/react-native
```

### Basic Usage

```tsx
import { MyopComponent } from "@myop/react-native";

function App() {
    return (
        <View style={{ flex: 1 }}>
            <MyopComponent
                componentId="your-component-id"
                data={{ title: "Hello" }}
                on={(action, payload) => console.log(action, payload)}
                style={{ flex: 1 }}
            />
        </View>
    );
}
```

### Native-Specific Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `scrollEnabled` | `boolean` | `false` | Allow scrolling inside WebView |
| `zoomEnabled` | `boolean` | `false` | Allow pinch-to-zoom |
| `selectionEnabled` | `boolean` | `false` | Allow text selection |

### Local Dev on Devices

```tsx
import { enableLocalDev, setCloudRepositoryUrl } from "@myop/react-native";

// iOS Simulator
enableLocalDev();

// Android Emulator
setCloudRepositoryUrl("http://10.0.2.2:9292");

// Physical device
setCloudRepositoryUrl("http://192.168.1.100:9292");
```

### Preloading

```tsx
import { preloadComponents } from "@myop/react-native";
await preloadComponents(["component-id-1", "component-id-2"]);
```

---

## Auto-Generated Packages

Every Myop component has an auto-generated, fully typed package for each framework:

```bash
# React
npm install https://cloud.myop.dev/npm/{componentId}/react

# Vue
npm install https://cloud.myop.dev/npm/{componentId}/vue

# Angular
npm install https://cloud.myop.dev/npm/{componentId}/angular

# React Native
npm install https://cloud.myop.dev/npm/{componentId}/react-native
```

Auto-generated packages:
- Have full TypeScript types derived from the component's `<script type="myop/types">` block
- Bake in the `componentId` — no prop needed
- Have the same API as `<MyopComponent>` but with typed data and events

```tsx
// Using auto-generated package (recommended for production)
import { TaskList } from "@myop/task-list";

<TaskList
    data={{ tasks }}
    onTaskToggled={(payload) => {
        // payload is typed: { taskId: string; completed: boolean }
    }}
/>
```

---

## Configuration Functions

All SDKs export the same configuration functions:

```ts
import { enableLocalDev, setCloudRepositoryUrl, setEnvironment } from "@myop/react";

enableLocalDev();                        // Load from localhost:9292
setCloudRepositoryUrl("https://custom"); // Custom cloud URL
setEnvironment("staging");               // Default environment
```

---

# Myop CLI

Source: /docs/cli

The Myop CLI is a command-line tool for creating, developing, and deploying **Myop components** — isolated, independently deployable UI modules that integrate into any host application.

```bash
npm install -g myop
# or use directly
npx myop create
```

---

## Workflow

Build a component in three steps — create, develop, deploy:

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/workflow-create.svg" alt="Myop CLI workflow: create, develop, deploy" width="400" />
</div>

| Step | Command | What happens |
|------|---------|-------------|
| **Create** | `npx myop create` | Scaffolds `index.html` + `myop.config.json`, installs AI skills, starts dev server |
| **Develop** | `npx myop dev` | Local dev server on port 9292 with hot reload |
| **Deploy** | `npx myop push` | Uploads to Myop platform — live instantly, no redeploy needed |

---

## Component Public API

Every Myop component communicates through exactly **2 global functions**:

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/component-api.svg" alt="Myop component public API — myop_init_interface and myop_cta_handler" width="500" />
</div>

| Function | Direction | Purpose |
|----------|-----------|---------|
| `myop_init_interface(data)` | Host → Component | Receive data, render UI |
| `myop_cta_handler(action, payload)` | Component → Host | Send user actions back |

Types are defined in a `<script type="myop/types">` block with TypeScript interfaces — used by auto-generated packages and AI coding assistants.

[Learn more about component development →](/docs/cli/create-component)

---

## Dev Server

Start a local development server with file watching and instant HMR:

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/dev-server.svg" alt="Myop dev server with hot reload on port 9292" width="440" />
</div>

```bash
npx myop dev        # Single component
npx myop dev -m     # Monorepo mode — multiple components
```

- **Port 9292** — Component preview with hot reload
- **Port 9293** — Management dashboard
- **Monorepo mode** — Serve multiple components simultaneously

<img src={require('../6_cli/img/dashboard-full.png').default} alt="Myop DevTools Dashboard" style={{maxWidth: '100%', display: 'block', margin: '20px auto', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.3)'}} />

[Learn more about the dev server →](/docs/cli/dev-server)

---

## Host Integration

Embed Myop components in any framework with the official SDKs:

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/host-frameworks.svg" alt="Myop host SDKs for React, Vue, Angular, and React Native" width="500" />
</div>

```tsx
import { MyopComponent } from "@myop/react";

<MyopComponent
    componentId="your-component-id"
    data={{ title: "Hello", items: ["a", "b"] }}
    onItemSelected={({ itemId }) => console.log(itemId)}
/>
```

All SDKs support typed event handlers, data binding, preloading, auto-sizing, custom loaders/fallbacks, and `enableLocalDev()` for local development.

[Learn more about host integration →](/docs/cli/host-integration)

---

## Push & Pull

Deploy components and download them from the Myop platform:

```bash
npx myop push                  # Deploy to Myop
npx myop pull <componentId>    # Download component
npx myop list                  # Browse, search, batch pull/push
```

- **First push** assigns a `componentId` (UUID) and saves it to `myop.config.json`
- **Subsequent pushes** add new versions — live instantly
- **`myop list`** provides interactive search with multi-select for batch operations

[Learn more about push & pull →](/docs/cli/push-and-pull)

---

## AI Integration

Teach AI coding assistants how to build Myop components and give them platform access:

<div style={{textAlign: 'center', margin: '24px 0'}}>
  <img src="/img/cli/ai-skills.svg" alt="myop train installs skills for 30+ AI coding assistants" width="460" />
</div>

```bash
npx myop train    # Install AI agent skills (30+ assistants)
npx myop mcp      # Configure MCP server (Claude Code, Cursor, Windsurf, Copilot)
```

**`myop train`** installs SKILL.md files using the [Agent Skills standard](https://www.npmjs.com/package/skills) — works with Claude Code, Cursor, Windsurf, VS Code Copilot, Kiro, Goose, Augment, Cline, and 30+ more.

**`myop mcp`** configures the Myop MCP server so your AI assistant can upload, list, and read components directly.

[Learn more about AI integration →](/docs/cli/ai-integration)

---

## All Commands

| Command | Description |
|---------|-------------|
| [`myop create`](/docs/cli/commands#myop-create) | Create a new component |
| [`myop dev`](/docs/cli/commands#myop-dev) | Start dev server with HMR |
| [`myop push`](/docs/cli/commands#myop-push) | Deploy component to Myop |
| [`myop pull`](/docs/cli/commands#myop-pull) | Download component from Myop |
| [`myop list`](/docs/cli/commands#myop-list) | Browse and batch operations |
| [`myop train`](/docs/cli/commands#myop-train) | Install AI agent skills |
| [`myop mcp`](/docs/cli/commands#myop-mcp) | Configure MCP server |
| [`myop login`](/docs/cli/commands#myop-login) | Authenticate with Myop |
| [`myop logout`](/docs/cli/commands#myop-logout) | Clear credentials |
| [`myop whoami`](/docs/cli/commands#myop-whoami) | Show current user |

[Full commands reference →](/docs/cli/commands)

---

# Push & Pull

Source: /docs/cli/push-and-pull

## Push — Deploy a Component

`myop push` uploads the component to the Myop platform. After a successful push, the component is live immediately — no rebuild or redeploy of the host application needed.

```bash
# Push using componentId from myop.config.json
npx myop push

# Push to a specific component ID (overrides config)
npx myop push <componentId>
```

### What happens during push

1. Reads `myop.config.json` to identify the component
2. If a `componentId` argument is passed, it overrides the config
3. Detects the entry point:
   - **Single-file mode** — `index.html` in the root
   - **Multi-file mode** — `dist/index.html` (runs `npm run build` first)
4. Authenticates (prompts for login if needed)
5. Uploads the HTML via a presigned URL
6. Confirms the upload

### First push vs subsequent pushes

**First push:**
- Assigns a `componentId` (UUID) and saves it to `myop.config.json`
- Adds the `organization` field to `myop.config.json`
- The component appears on the [Myop Dashboard](https://dashboard.myop.dev)

**Subsequent pushes:**
- Adds a new version to the existing component
- The latest version goes live immediately
- Previous versions remain accessible

### Dashboard URL

After pushing:
```
https://dashboard.myop.dev/dashboard/2.0/component/<componentId>
```

---

## Pull — Download a Component

`myop pull` downloads a component's latest version from the Myop platform.

```bash
# Pull using componentId from myop.config.json
npx myop pull

# Pull a specific component by ID
npx myop pull <componentId>

# Pull to a custom output path
npx myop pull <componentId> -o ./components/sidebar/index.html
```

### What happens during pull

1. Determines `componentId` from the argument or `myop.config.json`
2. Authenticates (prompts for login if needed)
3. Fetches the component HTML from Myop
4. Writes the HTML to the output path
5. Creates or updates `myop.config.json` with component metadata

### Output path logic

- If `-o <path>` is specified — writes to that path
- If `dist/index.html` exists — writes there
- Otherwise — writes to `index.html`

Parent directories are created automatically.

### Use cases

- **Clone a remote component** — `myop pull <id>` in an empty directory creates `index.html` + `myop.config.json`
- **Sync latest version** — `myop pull` in an existing component directory gets the latest remote version
- **Download to custom path** — use `-o` flag

---

## List — Browse & Batch Operations

`myop list` provides interactive search, multi-select, and batch pull or push for all components in your organization.

```bash
# Interactive browse
npx myop list

# Specify organization
npx myop list --org <orgId>
```

### How it works

1. Authenticates and loads your organizations
2. Resolves which org to use:
   - `--org <orgId>` flag takes precedence
   - Otherwise uses the saved default from `~/.myop/preferences.json`
   - If only one org, uses it automatically
   - If multiple orgs, prompts for selection
3. Fetches all components
4. Shows a **searchable** list — type to filter by name, press Enter to select, repeat
5. When done, choose:
   - **Pull** — downloads all selected components in parallel, each into its own subdirectory with `index.html` + `myop.config.json`
   - **Push** — scans local directories for matching `componentId`s and uploads in parallel

### Batch pull example

Clone an entire environment:

```bash
mkdir my-components && cd my-components
npx myop list
# Type to search, select components, choose Pull
# Each component gets its own subdirectory:
#   ./sidebar/index.html + myop.config.json
#   ./chart/index.html + myop.config.json
#   ./modal/index.html + myop.config.json
```

### Batch push example

Push all local changes at once:

```bash
cd my-components
npx myop list
# Select the components you've modified, choose Push
# Scans for matching componentIds in local directories
# Uploads all in parallel
```

### Organization memory

The selected organization is saved to `~/.myop/preferences.json` and reused automatically on subsequent runs. Use `--org <orgId>` to switch.

---

## Authentication

Push, pull, and list all require authentication. If you're not logged in, the CLI prompts automatically.

```bash
# Log in (opens browser for OAuth)
npx myop login

# Check who you're logged in as
npx myop whoami

# Log out
npx myop logout
```

Credentials are stored at `~/.myop/credentials.json` with `0o600` permissions. Tokens refresh automatically when expired.

---

# Overview

Source: /docs/intro

## Myop Overview

Myop SDKs are open-source tools designed to connect your application logic with dynamic user interfaces, enabling real-time UI changes without redeployment or backend involvement. These SDKs integrate seamlessly into your app, improving flexibility, scalability, and user experience.

## SDK Highlights

- **Root SDK:** Core module for dynamic component loading and UI modifications.
- **Host SDK:** Manages and embeds Myop components for a consistent user experience.
- **Iframe SDK:** Integrates isolated components securely while enabling communication with the host app.
- **WebComponent SDK:** Simplifies embedding reusable Myop web components with lifecycle management and real-time updates.

## Framework Integrations

Myop SDKs work with popular frameworks like:

- **React:** Easy integration via component-based setup.
- **Angular:** Embed and manage Myop components within Angular projects.
- **Vue.js:** Load and control Myop components efficiently.

## Key Features

- **Real-Time Modifications:** Update UI dynamically without redeployment.
- **Seamless Integration:** Compatible with iframes, web components, and frameworks.
- **Flexibility:** Dynamically load components based on app needs.
- **Independent Lifecycle Management:** Optimize performance and reuse components.

## Why Choose Myop SDKs?

- Scale your application effortlessly.
- Empower front-end teams with UI independence.
- Build modular, reusable, and future-proof components.

## Get Started

Enhance your UI/UX today! Check out [Myop Documentation](https://docs.myop.dev) or [Join Myop on GitHub](https://myop.dev) for examples and resources.

---

# Quick Start

Source: /docs/quickstart

This tutorial provides a step-by-step guide to integrating [Myop](https://www.myop.dev/),
into a new JavaScript application without using frameworks like React, Vue or Angular.

## Prerequisites

Before you begin, ensure you have the following:

- **Node.js**: [Download and install Node.js](https://nodejs.org/).
- **npm**: Node.js includes npm, the Node package manager.

## 1. Set Up Your Project Directory

Create a new directory for your project and navigate into it:

```bash
mkdir myop-js-app
cd myop-js-app
```

## 2. Initialize the Project

Initialize a new Node.js project:

```bash
npm init -y
```

## 3. Install the Myop SDK

Install the Myop SDK package:

```bash
npm install vite @myop/sdk
```

This command adds the Myop SDK to your project,
providing the tools needed to integrate Myop components.

## 4. Create the Vite Configuration

Create a `vite.config.js` file in your project root directory with the following content:

```js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    open: true, // Automatically open the browser on server start
  },
});
```

This configuration enables a simple setup to run the application with Vite.

## 5. Create the HTML File

Create an `index.html` file in your project directory with the following content:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Myop JavaScript Integration</title>
  </head>
  <body>
    <h1>Myop Component Integration</h1>
    <div id="myop-container"></div>
    <script src="./index.js" type="module"></script>
  </body>
</html>
```

This HTML file includes a `<div>` element with the ID `myop-container`,
which will serve as the container for the Myop component.
It also references an index.js script that you'll create next.

## 6. Create the JavaScript File

Create an `index.js` file in your project directory with the following content:

```js
import { getHostModule } from '@myop/sdk';

async function loadMyopComponent() {
  const { hostSDK } = await getHostModule();

  /*
   get your real component config
   you can load it directly from Myop cloud, read more about it at : 
   https://docs.myop.dev/docs/myopCloud/ 
   */

  const flowId = '49283058-a787-4fa5-b0d2-516b2e6dc5e3';
  const componentId = '8c72d29b-c8a0-41cf-b08f-4acca96c7a16';
  const res = await fetch(
    `https://cloud.myop.dev/flow?id=${flowId}&resolve=components`
  );
  const json = await res.json();
  const userFlow = json.item;
  const componentConfig = userFlow.components.find(
    (c) => c.type.id === componentId
  );

  const container = document.getElementById('myop-container');
  const myopComponent = await hostSDK.loadComponent(componentConfig, container);
}

loadMyopComponent();
```

In this script:

- We import `getHostModule` from the Myop SDK.
- We define an asynchronous function `loadMyopComponent` that:
  - Retrieves and initializes the `hostSDK`.
  - Get a `componentConfig` object containing the configuration for your Myop component.
    - there is few options from where and how to get `componentConfig` at runtime for the simplicity of this tutorial [read here](https://docs.myop.dev/docs/myopCloud/) how to load it directly from the Myop cloud.
  - Selects the `myop-container` `<div>` from the DOM.
  - Loads the specified Myop component into the selected container.
  - After you load Myop component you can start passing and getting props, interacting with refs and change component lifecycle events.
    - Read more about [interacting with components](https://docs.myop.dev)

## 7. Run the Application

To run your application, use Vite's development server. Add a script to your `package.json`:

```json
{
  "scripts": {
    "dev": "vite"
  }
}
```

Now, start the development server:

```bash
npm run dev
```

This will start the Vite development server, and the application will be available at http://localhost:3000 in your
browser.

## Additional Resources

By following these steps, you've should be able to integrating Myop components into a standard JavaScript application,
enabling dynamic and real-time UI updates.

For comprehensive details, including framework integrations,
uploading custom components, and advanced configurations,
please refer to the [Learn Myop](/docs/learnMyop) section.

---

# @myop/angular

Source: /docs/sdk-angular

Official Angular bindings for embedding [Myop](https://myop.dev) components in your Angular applications.

Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.

[![npm version](https://img.shields.io/npm/v/@myop/angular.svg)](https://www.npmjs.com/package/@myop/angular)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![Discord](https://img.shields.io/badge/Discord-Join%20us-5865F2?logo=discord&logoColor=white)](https://myop.dev/discord)

[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)

## Installation

```bash
npm install @myop/angular
```

```bash
yarn add @myop/angular
```

```bash
pnpm add @myop/angular
```

## Auto-Generated Angular Components

Myop automatically generates a typed Angular component package for every component you create in the [dashboard](https://dashboard.myop.dev/). Install it directly via npm:

```bash
npm install https://cloud.myop.dev/npm/{component-id}/angular
```

### Setup (One-Time Configuration)

Add `node_modules/@myop` to your TypeScript compilation in `tsconfig.app.json`:

```json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app"
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "node_modules/@myop/**/*.ts"
  ]
}
```

This allows Angular to compile the auto-generated component packages alongside your application code.

### Usage

Import and use the generated component directly. For example, if you created a table component called "users-table" in the dashboard:

```typescript
import { Component } from "@angular/core";
import { UsersTableComponent, UsersTableCtaPayloads, CtaEvent } from "@myop/users-table";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [UsersTableComponent],
  template: `
    <users-table
      [data]="{ rows: users }"
      (cta)="onCta($event)"
    />
  `,
})
export class AppComponent {
  users = [
    { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
    { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
    { id: 3, name: "Charlie", email: "charlie@example.com", role: "User" },
  ];

  onCta(event: CtaEvent<UsersTableCtaPayloads>) {
    switch (event.action) {
      case "rowClicked":
        console.log("Selected user:", event.payload.rowData);
        break;
      case "deleteClicked":
        this.deleteUser(event.payload.userId);
        break;
      case "exportRequested":
        this.exportToFormat(event.payload.format);
        break;
    }
  }
}
```

**Why this is powerful:**

- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required
- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
- **Zero bundle impact** — The entire `@myop/angular` package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed

**Environment options:**

Set the default environment for all components using `setEnvironment`:

```typescript
import { setEnvironment } from "@myop/angular";

// Set default environment for all component loads
setEnvironment("staging");
```

You can also override the environment directly on a specific component:

```html
<myop-users-table
  [data]="{ rows: users }"
  [preview]="true"
  environment="staging"
/>
```

Environments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.

For more details on auto-generated packages, see the [Auto-Generated Packages documentation](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages).

## Requirements

- Angular 17.0+

## Quick Start

```typescript
import { Component } from "@angular/core";
import { MyopComponent } from "@myop/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [MyopComponent],
  template: `
    <myop-component
      [componentId]="'your-component-id'"
      [style]="{ width: '600px', height: '400px' }"
      (action)="onAction($event)"
    />
  `,
})
export class AppComponent {
  onAction(event: { action: string; payload: any }) {
    console.log("Action:", event.action, "Payload:", event.payload);
  }
}
```

## Components

### `myop-component`

The main component for embedding Myop components.

```typescript
import { Component } from "@angular/core";
import { MyopComponent } from "@myop/angular";

@Component({
  selector: "app-dashboard",
  standalone: true,
  imports: [MyopComponent],
  template: `
    <myop-component
      [componentId]="'abc123'"
      [data]="{ items: items }"
      (rowClicked)="onRowClicked($event)"
      (load)="onLoad($event)"
      (error)="onError($event)"
    />
  `,
})
export class DashboardComponent {
  items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
  ];

  onRowClicked(payload: any) {
    console.log("Row clicked:", payload);
  }

  onLoad(component: any) {
    console.log("Loaded!", component);
  }

  onError(error: string) {
    console.error("Error:", error);
  }
}
```

#### Inputs

| Input | Type | Description |
|-------|------|-------------|
| `componentId` | `string` | The ID of the Myop component to load |
| `data` | `object` | Data to pass to the component via `myop_init_interface` |
| `style` | `object` | CSS styles for the container |
| `fadeDuration` | `number` | Loader fade-out duration in ms (default: `200`) |
| `environment` | `string` | Load from a specific environment (e.g., `"staging"`, `"prod"`) |
| `preview` | `boolean` | Load the unpublished preview version of the component |

#### Outputs

| Output | Type | Description |
|--------|------|-------------|
| `(action)` | `EventEmitter<{action, payload}>` | Generic handler for all CTA events |
| `([actionName])` | `EventEmitter<payload>` | Handler for specific actions (e.g., `(rowClicked)`) |
| `(load)` | `EventEmitter<component>` | Called when the component finishes loading |
| `(error)` | `EventEmitter<string>` | Called when loading fails |

#### Inputs for Loading/Fallback

| Input | Type | Description |
|-------|------|-------------|
| `loader` | `TemplateRef` | Loading indicator template (default: `null` - no loader). Use `MyopLoader` for default Myop loader |
| `fallback` | `TemplateRef` | Error fallback template (default: built-in `MyopFallback`). Override with custom template |

#### Environments & Preview

Myop supports multiple environments, allowing you to test changes before going live:

```html
<!-- Production (default) -->
<myop-component [componentId]="'abc123'" />

<!-- Load from staging environment -->
<myop-component [componentId]="'abc123'" environment="staging" />

<!-- Load unpublished preview version (for testing before publishing) -->
<myop-component [componentId]="'abc123'" [preview]="true" />

<!-- Combine both: preview version in staging -->
<myop-component [componentId]="'abc123'" environment="staging" [preview]="true" />
```

Environments are configured in the [dashboard](https://dashboard.myop.dev/). Use `[preview]="true"` to test unpublished changes before making them live.

### `myop-container` (Legacy)

The legacy container component. Use `myop-component` for new projects.

```typescript
import { Component } from "@angular/core";
import { MyopContainerComponent } from "@myop/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [MyopContainerComponent],
  template: `
    <myop-container
      [componentId]="'abc123'"
      (componentReady)="onReady($event)"
    />
  `,
})
export class AppComponent {
  onReady(component: any) {
    console.log("Ready!", component);
  }
}
```

## Type-Safe Event Handlers

Define your CTA payloads for fully typed event handlers:

```typescript
import { Component } from "@angular/core";
import { MyopComponent } from "@myop/angular";

// Define your component's data and CTA payload types
interface MyData {
  items: { id: string; name: string }[];
}

interface RowClickedPayload {
  rowIndex: number;
  rowData: any;
}

interface ItemSelectedPayload {
  itemId: string;
}

interface ExportRequestedPayload {
  format: "csv" | "json";
}

@Component({
  selector: "app-dashboard",
  standalone: true,
  imports: [MyopComponent],
  template: `
    <myop-component
      [componentId]="'dashboard-component'"
      [data]="data"
      (rowClicked)="onRowClicked($event)"
      (itemSelected)="onItemSelected($event)"
      (action)="onAction($event)"
    />
  `,
})
export class DashboardComponent {
  data: MyData = {
    items: [
      { id: "1", name: "Item 1" },
      { id: "2", name: "Item 2" },
    ],
  };

  onRowClicked(payload: RowClickedPayload) {
    console.log("Row clicked:", payload.rowIndex);
  }

  onItemSelected(payload: ItemSelectedPayload) {
    console.log("Item selected:", payload.itemId);
  }

  onAction(event: { action: string; payload: any }) {
    console.log(event.action, event.payload);
  }
}
```

## Configuration

### Preloading Components

Preload components for faster rendering:

```typescript
import { preloadComponents, isPreloaded } from "@myop/angular";

// Preload multiple components
await preloadComponents(["component-1", "component-2"]);

// Check if a component is preloaded
if (isPreloaded("component-1")) {
  console.log("Component is cached and ready");
}
```

### Custom Repository URL

```typescript
import { setCloudRepositoryUrl } from "@myop/angular";

// Point to a custom Myop server
setCloudRepositoryUrl("https://your-custom-server.com");
```

### Environment Configuration

```typescript
import { setEnvironment } from "@myop/angular";

// Set default environment for all component loads
setEnvironment("staging");
```

### Local Development

```typescript
import { enableLocalDev } from "@myop/angular";

// Connect to local Myop development server (localhost:9292)
enableLocalDev();
```

### Advanced: Custom Repository

```typescript
import { setCloudRepository, getCloudRepository } from "@myop/angular";
import { CloudRepository } from "@myop/sdk/helpers";

// Set a custom CloudRepository instance
const customRepo = new CloudRepository("https://custom-url.com");
setCloudRepository(customRepo);

// Get the current repository
const repo = getCloudRepository();
```

## Loading & Error States

By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.

### Using the Default Myop Loader

```typescript
import { Component } from "@angular/core";
import { MyopComponent, MyopLoader } from "@myop/angular";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [MyopComponent, MyopLoader],
  template: `
    <myop-component [componentId]="'my-component'" [loader]="loaderTpl" [fadeDuration]="300">
    </myop-component>

    <ng-template #loaderTpl>
      <myop-loader></myop-loader>
    </ng-template>
  `,
})
export class ExampleComponent {}
```

### Custom Loading State

```typescript
@Component({
  selector: "app-example",
  standalone: true,
  imports: [MyopComponent],
  template: `
    <myop-component [componentId]="'my-component'" [loader]="loaderTpl" [fadeDuration]="300">
    </myop-component>

    <ng-template #loaderTpl>
      <div class="custom-loader">
        <app-spinner />
        <p>Loading component...</p>
      </div>
    </ng-template>
  `,
})
export class ExampleComponent {}
```

### Custom Error Fallback

```typescript
import { Component } from "@angular/core";
import { MyopComponent, MyopFallback } from "@myop/angular";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [MyopComponent, MyopFallback],
  template: `
    <myop-component [componentId]="'my-component'" [fallback]="fallbackTpl">
    </myop-component>

    <!-- Custom fallback -->
    <ng-template #fallbackTpl>
      <div class="error-state">
        <p>Failed to load component</p>
        <button (click)="retry()">Retry</button>
      </div>
    </ng-template>

    <!-- Or use default Myop fallback explicitly -->
    <ng-template #myopFallbackTpl>
      <myop-fallback></myop-fallback>
    </ng-template>
  `,
})
export class ExampleComponent {
  retry() {
    window.location.reload();
  }
}
```

## Using in NgModules

If you're not using standalone components, import in your module:

```typescript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MyopComponent } from "@myop/angular";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MyopComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

## API Reference

### Exports

| Export | Description |
|--------|-------------|
| `MyopComponent` | Main component for embedding Myop components |
| `MyopLoader` / `MyopLoaderComponent` | Default Myop-branded loading indicator (opt-in) |
| `MyopFallback` / `MyopFallbackComponent` | Default Myop-branded error fallback |
| `preloadComponents` | Preload components for faster rendering |
| `isPreloaded` | Check if a component is cached |
| `enableLocalDev` | Enable local development mode |
| `setCloudRepositoryUrl` | Set custom server URL |
| `setCloudRepository` | Set custom CloudRepository instance |
| `getCloudRepository` | Get current CloudRepository instance |
| `setEnvironment` | Set default environment |

## License

MIT

---

# Class: MyopContainerComponent

Source: /docs/sdk-angular/lib/myop-container.component/classes/MyopContainerComponent

Defined in: [lib/myop-container.component.ts:38](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L38)

## Implements

- `OnChanges`

## Constructors

### new MyopContainerComponent()

> **new MyopContainerComponent**(`appRef`, `injector`, `elementRef`): [`MyopContainerComponent`](/docs/sdk-angular/lib/myop-container.component/classes/MyopContainerComponent)

Defined in: [lib/myop-container.component.ts:74](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L74)

#### Parameters

##### appRef

`ApplicationRef`

##### injector

`Injector`

##### elementRef

`ElementRef`

#### Returns

[`MyopContainerComponent`](/docs/sdk-angular/lib/myop-container.component/classes/MyopContainerComponent)

## Properties

### \_componentId

> **\_componentId**: `InputSignal`\<`string`\>

Defined in: [lib/myop-container.component.ts:63](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L63)

***

### \_flowId

> **\_flowId**: `InputSignal`\<`undefined` \| `string`\>

Defined in: [lib/myop-container.component.ts:60](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L60)

***

### \_inputs

> **\_inputs**: `InputSignal`\<\{\}\>

Defined in: [lib/myop-container.component.ts:67](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L67)

***

### componentId

> **componentId**: `WritableSignal`\<`string`\>

Defined in: [lib/myop-container.component.ts:64](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L64)

***

### componentReady

> **componentReady**: `OutputEmitterRef`\<`IMyopComponent`\>

Defined in: [lib/myop-container.component.ts:72](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L72)

***

### environmentInjector

> `protected` **environmentInjector**: `EnvironmentInjector`

Defined in: [lib/myop-container.component.ts:40](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L40)

***

### flowId

> **flowId**: `WritableSignal`\<`undefined` \| `string`\>

Defined in: [lib/myop-container.component.ts:61](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L61)

***

### inputs

> **inputs**: `WritableSignal`\<\{\}\>

Defined in: [lib/myop-container.component.ts:69](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L69)

***

### myopContainer

> **myopContainer**: `Signal`\<`undefined` \| `ElementRef`\<`HTMLDivElement`\>\>

Defined in: [lib/myop-container.component.ts:50](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L50)

***

### myopContainerRef

> **myopContainerRef**: `ViewContainerRef`

Defined in: [lib/myop-container.component.ts:57](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L57)

## Methods

### ngAfterViewInit()

> **ngAfterViewInit**(): `void`

Defined in: [lib/myop-container.component.ts:116](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L116)

#### Returns

`void`

***

### ngOnChanges()

> **ngOnChanges**(`changes`): `void`

Defined in: [lib/myop-container.component.ts:109](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-container.component.ts#L109)

A callback method that is invoked immediately after the
default change detector has checked data-bound properties
if at least one has changed, and before the view and content
children are checked.

#### Parameters

##### changes

`SimpleChanges`

The changed properties.

#### Returns

`void`

#### Implementation of

`OnChanges.ngOnChanges`

---

# lib/myop-container.component

Source: /docs/sdk-angular/lib/myop-container.component

## Classes

- [MyopContainerComponent](/docs/sdk-angular/lib/myop-container.component/classes/MyopContainerComponent)

---

# @myop/angular

Source: /docs/sdk-angular/modules

## Modules

- [lib/myop-container.component](/docs/sdk-angular/lib/myop-container.component)
- [public-api](/docs/sdk-angular/public-api)

---

# Class: MyopComponent\<TData, TCtaPayloads\>

Source: /docs/sdk-angular/public-api/classes/MyopComponent

Defined in: [lib/myop.component.ts:171](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L171)

## Type Parameters

• **TData** = `any`

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

## Implements

- `OnInit`
- `OnChanges`
- `OnDestroy`

## Constructors

### new MyopComponent()

> **new MyopComponent**\<`TData`, `TCtaPayloads`\>(`cdr`, `ngZone`): [`MyopComponent`](/docs/sdk-angular/public-api/classes/MyopComponent)\<`TData`, `TCtaPayloads`\>

Defined in: [lib/myop.component.ts:226](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L226)

#### Parameters

##### cdr

`ChangeDetectorRef`

##### ngZone

`NgZone`

#### Returns

[`MyopComponent`](/docs/sdk-angular/public-api/classes/MyopComponent)\<`TData`, `TCtaPayloads`\>

## Properties

### autoSize

> **autoSize**: `boolean` = `true`

Defined in: [lib/myop.component.ts:179](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L179)

***

### autoSizeResult?

> `optional` **autoSizeResult**: [`SizeInfo`](/docs/sdk-angular/public-api/interfaces/SizeInfo)

Defined in: [lib/myop.component.ts:213](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L213)

***

### componentConfig?

> `optional` **componentConfig**: [`IComponentInstanceConfig`](/docs/sdk-angular/public-api/interfaces/IComponentInstanceConfig)

Defined in: [lib/myop.component.ts:176](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L176)

***

### componentId?

> `optional` **componentId**: `string`

Defined in: [lib/myop.component.ts:175](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L175)

***

### cta

> **cta**: `EventEmitter`\<[`CtaEvent`](/docs/sdk-angular/public-api/interfaces/CtaEvent)\<`TCtaPayloads`\>\>

Defined in: [lib/myop.component.ts:194](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L194)

***

### customFallback?

> `optional` **customFallback**: `TemplateRef`\<`any`\>

Defined in: [lib/myop.component.ts:202](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L202)

***

### customLoader?

> `optional` **customLoader**: `TemplateRef`\<`any`\>

Defined in: [lib/myop.component.ts:201](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L201)

***

### data?

> `optional` **data**: `TData`

Defined in: [lib/myop.component.ts:177](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L177)

***

### environment?

> `optional` **environment**: `string`

Defined in: [lib/myop.component.ts:180](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L180)

***

### error

> **error**: `EventEmitter`\<`string`\>

Defined in: [lib/myop.component.ts:192](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L192)

***

### fadeDuration

> **fadeDuration**: `number` = `200`

Defined in: [lib/myop.component.ts:178](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L178)

***

### fallback?

> `optional` **fallback**: `TemplateRef`\<`any`\>

Defined in: [lib/myop.component.ts:206](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L206)

***

### isComponentLoaded

> **isComponentLoaded**: `boolean` = `false`

Defined in: [lib/myop.component.ts:212](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L212)

***

### load

> **load**: `EventEmitter`\<[`ITypedMyopComponent`](/docs/sdk-angular/public-api/type-aliases/ITypedMyopComponent)\<`TData`, `TCtaPayloads`\>\>

Defined in: [lib/myop.component.ts:191](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L191)

***

### loader?

> `optional` **loader**: `TemplateRef`\<`any`\>

Defined in: [lib/myop.component.ts:205](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L205)

***

### loaderOpacity

> **loaderOpacity**: `number` = `1`

Defined in: [lib/myop.component.ts:210](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L210)

***

### loaderOptions?

> `optional` **loaderOptions**: `loaderOptions`

Defined in: [lib/myop.component.ts:187](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L187)

Raw SDK loader options forwarded to hostSDK.loadComponent.
Use this to pass options like `injectCss` (theming), `hooks`, `timeout`, etc.
The `data` input, when provided, takes precedence over `loaderOptions.data`.

***

### logoPath

> `readonly` **logoPath**: `"M151.438 2.7168C177.625 2.76042 248.179 4.2832 300.4 56.7441C350.671 107.245 364.44 114.452 389.967 119.211C392.576 119.436 397.472 119.394 400.802 116.521C403.011 114.614 403.921 109.518 404.265 104.627V5.95996C404.265 4.85556 405.16 3.96023 406.265 3.95996H522.711C523.815 3.95996 524.711 4.85539 524.711 5.95996V122.405C524.711 123.51 523.815 124.405 522.711 124.405H421.998C418.579 124.728 413.852 125.627 410.974 128.095C407.879 130.748 407.042 137.805 406.845 142.661V240.414C406.845 241.436 406.111 242.292 405.093 242.38C366.548 245.717 277.079 228.462 235.837 173.668C202.909 129.919 173.882 122.474 151.458 122.077C150.354 122.058 149.459 121.164 149.459 120.06V4.71582C149.459 3.6114 150.334 2.71519 151.438 2.7168ZM62.2031 0C96.5566 0.000213148 124.405 27.8496 124.405 62.2031C124.405 96.5564 96.5564 124.405 62.2031 124.405C27.8496 124.405 0.000213175 96.5566 0 62.2031C0 27.8495 27.8495 0 62.2031 0Z"` = `MYOP_LOGO_PATH`

Defined in: [lib/myop.component.ts:217](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L217)

***

### myopContainer

> **myopContainer**: `ElementRef`\<`HTMLDivElement`\>

Defined in: [lib/myop.component.ts:198](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L198)

***

### on()?

> `optional` **on**: (`action`, `payload`) => `void`

Defined in: [lib/myop.component.ts:188](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L188)

#### Parameters

##### action

`string`

##### payload

`any`

#### Returns

`void`

***

### preview?

> `optional` **preview**: `boolean`

Defined in: [lib/myop.component.ts:181](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L181)

***

### showFallback

> **showFallback**: `boolean` = `false`

Defined in: [lib/myop.component.ts:211](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L211)

***

### showLoader

> **showLoader**: `boolean` = `true`

Defined in: [lib/myop.component.ts:209](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L209)

***

### sizeChange

> **sizeChange**: `EventEmitter`\<[`SizeInfo`](/docs/sdk-angular/public-api/interfaces/SizeInfo)\>

Defined in: [lib/myop.component.ts:193](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L193)

## Accessors

### fallbackContainerStyle

#### Get Signature

> **get** **fallbackContainerStyle**(): `object`

Defined in: [lib/myop.component.ts:591](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L591)

##### Returns

`object`

***

### fallbackStyle

#### Get Signature

> **get** **fallbackStyle**(): `object`

Defined in: [lib/myop.component.ts:552](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L552)

##### Returns

`object`

***

### innerStyle

#### Get Signature

> **get** **innerStyle**(): `object`

Defined in: [lib/myop.component.ts:516](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L516)

##### Returns

`object`

***

### isFillMode

#### Get Signature

> **get** **isFillMode**(): `boolean`

Defined in: [lib/myop.component.ts:489](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L489)

##### Returns

`boolean`

***

### loaderContainerStyle

#### Get Signature

> **get** **loaderContainerStyle**(): `object`

Defined in: [lib/myop.component.ts:577](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L577)

##### Returns

`object`

***

### loaderMinHeight

#### Get Signature

> **get** **loaderMinHeight**(): `undefined` \| `string`

Defined in: [lib/myop.component.ts:485](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L485)

##### Returns

`undefined` \| `string`

***

### loaderStyle

#### Get Signature

> **get** **loaderStyle**(): `object`

Defined in: [lib/myop.component.ts:534](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L534)

##### Returns

`object`

***

### outerStyle

#### Get Signature

> **get** **outerStyle**(): `object`

Defined in: [lib/myop.component.ts:493](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L493)

##### Returns

`object`

***

### resolvedFallback

#### Get Signature

> **get** **resolvedFallback**(): `undefined` \| `TemplateRef`\<`any`\>

Defined in: [lib/myop.component.ts:572](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L572)

##### Returns

`undefined` \| `TemplateRef`\<`any`\>

***

### resolvedLoader

#### Get Signature

> **get** **resolvedLoader**(): `undefined` \| `TemplateRef`\<`any`\>

Defined in: [lib/myop.component.ts:567](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L567)

##### Returns

`undefined` \| `TemplateRef`\<`any`\>

## Methods

### ngOnChanges()

> **ngOnChanges**(`changes`): `void`

Defined in: [lib/myop.component.ts:242](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L242)

A callback method that is invoked immediately after the
default change detector has checked data-bound properties
if at least one has changed, and before the view and content
children are checked.

#### Parameters

##### changes

`SimpleChanges`

The changed properties.

#### Returns

`void`

#### Implementation of

`OnChanges.ngOnChanges`

***

### ngOnDestroy()

> **ngOnDestroy**(): `void`

Defined in: [lib/myop.component.ts:254](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L254)

A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.

#### Returns

`void`

#### Implementation of

`OnDestroy.ngOnDestroy`

***

### ngOnInit()

> **ngOnInit**(): `void`

Defined in: [lib/myop.component.ts:231](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L231)

A callback method that is invoked immediately after the
default change detector has checked the directive's
data-bound properties for the first time,
and before any of the view or content children have been checked.
It is invoked only once when the directive is instantiated.

#### Returns

`void`

#### Implementation of

`OnInit.ngOnInit`

---

# Class: MyopFallbackComponent

Source: /docs/sdk-angular/public-api/classes/MyopFallbackComponent

Defined in: [lib/myop-fallback.component.ts:30](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-fallback.component.ts#L30)

## Constructors

### new MyopFallbackComponent()

> **new MyopFallbackComponent**(): [`MyopFallbackComponent`](/docs/sdk-angular/public-api/classes/MyopFallbackComponent)

#### Returns

[`MyopFallbackComponent`](/docs/sdk-angular/public-api/classes/MyopFallbackComponent)

## Properties

### logoPath

> `readonly` **logoPath**: `"M151.438 2.7168C177.625 2.76042 248.179 4.2832 300.4 56.7441C350.671 107.245 364.44 114.452 389.967 119.211C392.576 119.436 397.472 119.394 400.802 116.521C403.011 114.614 403.921 109.518 404.265 104.627V5.95996C404.265 4.85556 405.16 3.96023 406.265 3.95996H522.711C523.815 3.95996 524.711 4.85539 524.711 5.95996V122.405C524.711 123.51 523.815 124.405 522.711 124.405H421.998C418.579 124.728 413.852 125.627 410.974 128.095C407.879 130.748 407.042 137.805 406.845 142.661V240.414C406.845 241.436 406.111 242.292 405.093 242.38C366.548 245.717 277.079 228.462 235.837 173.668C202.909 129.919 173.882 122.474 151.458 122.077C150.354 122.058 149.459 121.164 149.459 120.06V4.71582C149.459 3.6114 150.334 2.71519 151.438 2.7168ZM62.2031 0C96.5566 0.000213148 124.405 27.8496 124.405 62.2031C124.405 96.5564 96.5564 124.405 62.2031 124.405C27.8496 124.405 0.000213175 96.5566 0 62.2031C0 27.8495 27.8495 0 62.2031 0Z"` = `MYOP_LOGO_PATH`

Defined in: [lib/myop-fallback.component.ts:31](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-fallback.component.ts#L31)

## Accessors

### fallbackStyle

#### Get Signature

> **get** **fallbackStyle**(): `object`

Defined in: [lib/myop-fallback.component.ts:33](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-fallback.component.ts#L33)

##### Returns

`object`

---

# Class: MyopLoaderComponent

Source: /docs/sdk-angular/public-api/classes/MyopLoaderComponent

Defined in: [lib/myop-loader.component.ts:30](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-loader.component.ts#L30)

## Constructors

### new MyopLoaderComponent()

> **new MyopLoaderComponent**(): [`MyopLoaderComponent`](/docs/sdk-angular/public-api/classes/MyopLoaderComponent)

#### Returns

[`MyopLoaderComponent`](/docs/sdk-angular/public-api/classes/MyopLoaderComponent)

## Properties

### logoPath

> `readonly` **logoPath**: `"M151.438 2.7168C177.625 2.76042 248.179 4.2832 300.4 56.7441C350.671 107.245 364.44 114.452 389.967 119.211C392.576 119.436 397.472 119.394 400.802 116.521C403.011 114.614 403.921 109.518 404.265 104.627V5.95996C404.265 4.85556 405.16 3.96023 406.265 3.95996H522.711C523.815 3.95996 524.711 4.85539 524.711 5.95996V122.405C524.711 123.51 523.815 124.405 522.711 124.405H421.998C418.579 124.728 413.852 125.627 410.974 128.095C407.879 130.748 407.042 137.805 406.845 142.661V240.414C406.845 241.436 406.111 242.292 405.093 242.38C366.548 245.717 277.079 228.462 235.837 173.668C202.909 129.919 173.882 122.474 151.458 122.077C150.354 122.058 149.459 121.164 149.459 120.06V4.71582C149.459 3.6114 150.334 2.71519 151.438 2.7168ZM62.2031 0C96.5566 0.000213148 124.405 27.8496 124.405 62.2031C124.405 96.5564 96.5564 124.405 62.2031 124.405C27.8496 124.405 0.000213175 96.5566 0 62.2031C0 27.8495 27.8495 0 62.2031 0Z"` = `MYOP_LOGO_PATH`

Defined in: [lib/myop-loader.component.ts:31](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-loader.component.ts#L31)

## Accessors

### loaderStyle

#### Get Signature

> **get** **loaderStyle**(): `object`

Defined in: [lib/myop-loader.component.ts:33](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop-loader.component.ts#L33)

##### Returns

`object`

---

# public-api

Source: /docs/sdk-angular/public-api

## Classes

- [MyopComponent](/docs/sdk-angular/public-api/classes/MyopComponent)
- [MyopFallbackComponent](/docs/sdk-angular/public-api/classes/MyopFallbackComponent)
- [MyopLoaderComponent](/docs/sdk-angular/public-api/classes/MyopLoaderComponent)

## Interfaces

- [CtaEvent](/docs/sdk-angular/public-api/interfaces/CtaEvent)
- [IComponentInstanceConfig](/docs/sdk-angular/public-api/interfaces/IComponentInstanceConfig)
- [IMyopComponentProps](/docs/sdk-angular/public-api/interfaces/IMyopComponentProps)
- [SizeInfo](/docs/sdk-angular/public-api/interfaces/SizeInfo)

## Type Aliases

- [EventHandlerProps](/docs/sdk-angular/public-api/type-aliases/EventHandlerProps)
- [IPropTypes](/docs/sdk-angular/public-api/type-aliases/IPropTypes)
- [ITypedMyopComponent](/docs/sdk-angular/public-api/type-aliases/ITypedMyopComponent)
- [KebabToPascal](/docs/sdk-angular/public-api/type-aliases/KebabToPascal)

## References

### MyopFallback

Renames and re-exports [MyopFallbackComponent](/docs/sdk-angular/public-api/classes/MyopFallbackComponent)

***

### MyopLoader

Renames and re-exports [MyopLoaderComponent](/docs/sdk-angular/public-api/classes/MyopLoaderComponent)

---

# Interface: CtaEvent\<TCtaPayloads\>

Source: /docs/sdk-angular/public-api/interfaces/CtaEvent

Defined in: [lib/myop.component.ts:50](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L50)

## Type Parameters

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

## Properties

### action

> **action**: `string` \| keyof `TCtaPayloads`

Defined in: [lib/myop.component.ts:51](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L51)

***

### payload

> **payload**: `any`

Defined in: [lib/myop.component.ts:52](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L52)

---

# Interface: IComponentInstanceConfig

Source: /docs/sdk-angular/public-api/interfaces/IComponentInstanceConfig

Defined in: [lib/myop.component.ts:32](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L32)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### componentId

> **componentId**: `string`

Defined in: [lib/myop.component.ts:34](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L34)

***

### componentName

> **componentName**: `string`

Defined in: [lib/myop.component.ts:35](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L35)

***

### id

> **id**: `string`

Defined in: [lib/myop.component.ts:33](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L33)

***

### nestedComponents?

> `optional` **nestedComponents**: [`IComponentInstanceConfig`](/docs/sdk-angular/public-api/interfaces/IComponentInstanceConfig)[]

Defined in: [lib/myop.component.ts:37](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L37)

***

### resolvedExperiences?

> `optional` **resolvedExperiences**: `object`[]

Defined in: [lib/myop.component.ts:38](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L38)

#### Index Signature

\[`key`: `string`\]: `any`

***

### resolvedNestedComponents?

> `optional` **resolvedNestedComponents**: `object`[]

Defined in: [lib/myop.component.ts:39](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L39)

#### Index Signature

\[`key`: `string`\]: `any`

***

### skinSelector

> **skinSelector**: `object`

Defined in: [lib/myop.component.ts:36](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L36)

#### Index Signature

\[`key`: `string`\]: `any`

---

# Interface: IMyopComponentProps\<TData, TCtaPayloads\>

Source: /docs/sdk-angular/public-api/interfaces/IMyopComponentProps

Defined in: [lib/myop.component.ts:89](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L89)

Typed props interface for accessing component.props with autocomplete.
Contains myop_init_interface and myop_cta_handler with proper types.

## Type Parameters

• **TData** = `any`

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

## Properties

### myop\_cta\_handler()?

> `optional` **myop\_cta\_handler**: \<`K`\>(`action`, `payload`) => `void`

Defined in: [lib/myop.component.ts:96](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L96)

Handle CTA events from the component

#### Type Parameters

• **K** *extends* `string` \| `number` \| `symbol`

#### Parameters

##### action

`K`

##### payload

`TCtaPayloads`\[`K`\]

#### Returns

`void`

***

### myop\_init\_interface()?

> `optional` **myop\_init\_interface**: (`data`) => `void`

Defined in: [lib/myop.component.ts:94](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L94)

Initialize the component with data

#### Parameters

##### data

`TData`

#### Returns

`void`

---

# Interface: SizeInfo

Source: /docs/sdk-angular/public-api/interfaces/SizeInfo

Defined in: [lib/myop.component.ts:43](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L43)

## Properties

### autoSizingHeight

> **autoSizingHeight**: `boolean`

Defined in: [lib/myop.component.ts:47](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L47)

***

### autoSizingWidth

> **autoSizingWidth**: `boolean`

Defined in: [lib/myop.component.ts:46](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L46)

***

### height

> **height**: `number`

Defined in: [lib/myop.component.ts:45](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L45)

***

### width

> **width**: `number`

Defined in: [lib/myop.component.ts:44](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L44)

---

# Type Alias: EventHandlerProps\<TPayloads\>

Source: /docs/sdk-angular/public-api/type-aliases/EventHandlerProps

> **EventHandlerProps**\<`TPayloads`\>: `string` *extends* keyof `TPayloads` ? `object` : `` { [K in keyof TPayloads as `on${KebabToPascal<K & string>}`]?: (payload: TPayloads[K]) => void } ``

Defined in: [lib/myop.component.ts:68](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L68)

Generates typed event handler props from CTA payloads.
e.g., `{ 'row-clicked': { rowIndex: number } }` -> `{ onRowClicked?: (payload: { rowIndex: number }) => void }`

## Type Parameters

• **TPayloads** *extends* `Record`\<`string`, `any`\>

---

# Type Alias: IPropTypes\<TData, TCtaPayloads\>

Source: /docs/sdk-angular/public-api/type-aliases/IPropTypes

> **IPropTypes**\<`TData`, `TCtaPayloads`\>: `IBaseProps`\<`TData`, `TCtaPayloads`\> & [`EventHandlerProps`](/docs/sdk-angular/public-api/type-aliases/EventHandlerProps)\<`TCtaPayloads`\>

Defined in: [lib/myop.component.ts:132](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L132)

Full props type including generated event handlers.
Supports both generic `on` callback and individual typed handlers like `onRowClicked`.

## Type Parameters

• **TData** = `any`

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

---

# Type Alias: ITypedMyopComponent\<TData, TCtaPayloads\>

Source: /docs/sdk-angular/public-api/type-aliases/ITypedMyopComponent

> **ITypedMyopComponent**\<`TData`, `TCtaPayloads`\>: `Omit`\<`IMyopComponent`, `"props"`\> & `object`

Defined in: [lib/myop.component.ts:103](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L103)

Typed Myop component interface with typed props.
Use this type for the component returned in load event.

## Type declaration

### props

> **props**: [`IMyopComponentProps`](/docs/sdk-angular/public-api/interfaces/IMyopComponentProps)\<`TData`, `TCtaPayloads`\> \| `null`

Typed props for the component

## Type Parameters

• **TData** = `any`

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

---

# Type Alias: KebabToPascal\<S\>

Source: /docs/sdk-angular/public-api/type-aliases/KebabToPascal

> **KebabToPascal**\<`S`\>: `S` *extends* `` `${infer First}-${infer Rest}` `` ? `` `${Capitalize<First>}${KebabToPascal<Rest>}` `` : `Capitalize`\<`S`\>

Defined in: [lib/myop.component.ts:59](https://github.com/hadarge/myop/blob/main/myop-angular-host/projects/components/src/lib/myop.component.ts#L59)

Converts kebab-case string to PascalCase
e.g., 'column-reordered' -> 'ColumnReordered'

## Type Parameters

• **S** *extends* `string`

---

# Function: MyopComponent()

Source: /docs/sdk-react-native/MyopComponent/functions/MyopComponent

> **MyopComponent**(`props`): `ReactNode`

Defined in: [src/MyopComponent.tsx:211](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L211)

## Parameters

### props

`IPropTypes` & `RefAttributes`\<[`MyopComponentRef`](/docs/sdk-react-native/MyopComponent/interfaces/MyopComponentRef)\>

## Returns

`ReactNode`

---

# MyopComponent

Source: /docs/sdk-react-native/MyopComponent

## Interfaces

- [IElementProxy](/docs/sdk-react-native/MyopComponent/interfaces/IElementProxy)
- [IMyopComponentProxy](/docs/sdk-react-native/MyopComponent/interfaces/IMyopComponentProxy)
- [MyopComponentRef](/docs/sdk-react-native/MyopComponent/interfaces/MyopComponentRef)
- [MyopCrashInfo](/docs/sdk-react-native/MyopComponent/interfaces/MyopCrashInfo)

## Functions

- [MyopComponent](/docs/sdk-react-native/MyopComponent/functions/MyopComponent)

---

# Interface: IElementProxy

Source: /docs/sdk-react-native/MyopComponent/interfaces/IElementProxy

Defined in: [src/MyopComponent.tsx:94](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L94)

Element proxy for accessing/modifying the component's DOM element

## Properties

### get()

> **get**: (`path`) => `Promise`\<`any`\>

Defined in: [src/MyopComponent.tsx:98](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L98)

Get a property from the element (e.g., element.style.background) - returns Promise

#### Parameters

##### path

`string`

#### Returns

`Promise`\<`any`\>

***

### set()

> **set**: (`path`, `value`) => `void`

Defined in: [src/MyopComponent.tsx:96](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L96)

Set a property on the element (e.g., element.style.background = 'red')

#### Parameters

##### path

`string`

##### value

`any`

#### Returns

`void`

***

### style

> **style**: `object`

Defined in: [src/MyopComponent.tsx:100](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L100)

Style proxy for convenient access

#### get()

> **get**: (`property`) => `Promise`\<`string`\>

##### Parameters

###### property

`string`

##### Returns

`Promise`\<`string`\>

#### set()

> **set**: (`property`, `value`) => `void`

##### Parameters

###### property

`string`

###### value

`string`

##### Returns

`void`

---

# Interface: IMyopComponentProxy

Source: /docs/sdk-react-native/MyopComponent/interfaces/IMyopComponentProxy

Defined in: [src/MyopComponent.tsx:138](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L138)

Proxy interface for window.myopComponent in WebView
Mirrors the IMyopComponent interface from @myop/sdk

## Properties

### dispose()

> **dispose**: () => `void`

Defined in: [src/MyopComponent.tsx:152](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L152)

Dispose the component

#### Returns

`void`

***

### element

> **element**: [`IElementProxy`](/docs/sdk-react-native/MyopComponent/interfaces/IElementProxy)

Defined in: [src/MyopComponent.tsx:149](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L149)

Element proxy for DOM manipulation

***

### hide()

> **hide**: () => `void`

Defined in: [src/MyopComponent.tsx:155](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L155)

Hide the component

#### Returns

`void`

***

### id

> **id**: `string`

Defined in: [src/MyopComponent.tsx:140](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L140)

Component ID

***

### inspect()

> **inspect**: () => `void`

Defined in: [src/MyopComponent.tsx:161](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L161)

Inspect the component (debug)

#### Returns

`void`

***

### props

> **props**: `object`

Defined in: [src/MyopComponent.tsx:143](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L143)

Props object with myop_init_interface and myop_cta_handler

#### myop\_cta\_handler

> **myop\_cta\_handler**: `null` \| (`action`, `payload`?) => `void`

#### myop\_init\_interface()

> **myop\_init\_interface**: (`data`) => `void`

##### Parameters

###### data

`any`

##### Returns

`void`

***

### show()

> **show**: () => `void`

Defined in: [src/MyopComponent.tsx:158](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L158)

Show the component

#### Returns

`void`

---

# Interface: MyopComponentRef

Source: /docs/sdk-react-native/MyopComponent/interfaces/MyopComponentRef

Defined in: [src/MyopComponent.tsx:127](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L127)

Imperative handle exposed via `ref` on `<MyopComponent>`.

## Properties

### reload()

> **reload**: () => `void`

Defined in: [src/MyopComponent.tsx:129](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L129)

Force a remount of the underlying WebView. Counts toward the retry cap.

#### Returns

`void`

***

### reset()

> **reset**: () => `void`

Defined in: [src/MyopComponent.tsx:131](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L131)

Reset the crash counter and fallback state, then remount.

#### Returns

`void`

---

# Interface: MyopCrashInfo

Source: /docs/sdk-react-native/MyopComponent/interfaces/MyopCrashInfo

Defined in: [src/MyopComponent.tsx:109](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L109)

Information about a WebView renderer crash.

## Properties

### attempt

> **attempt**: `number`

Defined in: [src/MyopComponent.tsx:117](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L117)

1-based crash count within the current mount.

***

### native?

> `optional` **native**: `any`

Defined in: [src/MyopComponent.tsx:121](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L121)

Raw native event payload, when available.

***

### reason

> **reason**: `"renderer-gone"` \| `"process-terminated"` \| `"unknown"`

Defined in: [src/MyopComponent.tsx:115](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L115)

- `renderer-gone`: Android `onRenderProcessGone`
- `process-terminated`: iOS `onContentProcessDidTerminate`
- `unknown`: a crash signal we couldn't classify

***

### willAutoRecover

> **willAutoRecover**: `boolean`

Defined in: [src/MyopComponent.tsx:119](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L119)

False when the retry cap has been reached or the consumer opted out.

---

# Function: MyopFallback()

Source: /docs/sdk-react-native/MyopFallback/functions/MyopFallback

> **MyopFallback**(): `any`

Defined in: [src/MyopFallback.tsx:63](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopFallback.tsx#L63)

## Returns

`any`

---

# MyopFallback

Source: /docs/sdk-react-native/MyopFallback

## Functions

- [MyopFallback](/docs/sdk-react-native/MyopFallback/functions/MyopFallback)

---

# Function: MyopLoader()

Source: /docs/sdk-react-native/MyopLoader/functions/MyopLoader

> **MyopLoader**(`props`): `ReactNode`

Defined in: [src/MyopLoader.tsx:103](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopLoader.tsx#L103)

## Parameters

### props

`RefAttributes`\<[`MyopLoaderRef`](/docs/sdk-react-native/MyopLoader/interfaces/MyopLoaderRef)\>

## Returns

`ReactNode`

---

# MyopLoader

Source: /docs/sdk-react-native/MyopLoader

## Interfaces

- [MyopLoaderRef](/docs/sdk-react-native/MyopLoader/interfaces/MyopLoaderRef)

## Functions

- [MyopLoader](/docs/sdk-react-native/MyopLoader/functions/MyopLoader)

---

# Interface: MyopLoaderRef

Source: /docs/sdk-react-native/MyopLoader/interfaces/MyopLoaderRef

Defined in: [src/MyopLoader.tsx:5](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopLoader.tsx#L5)

## Properties

### fadeOut()

> **fadeOut**: (`duration`?) => `void`

Defined in: [src/MyopLoader.tsx:6](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopLoader.tsx#L6)

#### Parameters

##### duration?

`number`

#### Returns

`void`

---

# @myop/react-native

Source: /docs/sdk-react-native

Official React Native bindings for embedding [Myop](https://myop.dev) components in your React Native applications.

Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.

[![npm version](https://img.shields.io/npm/v/@myop/react-native.svg)](https://www.npmjs.com/package/@myop/react-native)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![Discord](https://img.shields.io/badge/Discord-Join%20us-5865F2?logo=discord&logoColor=white)](https://myop.dev/discord)

[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)

## Installation

```bash
npm install @myop/react-native
```

Install the required peer dependency:

```bash
npm install react-native-webview
```

## Auto-Generated React Native Components

Myop automatically generates a typed React Native component package for every component you create in the [dashboard](https://dashboard.myop.dev/). Install it directly via npm:

```bash
npm install https://cloud.myop.dev/npm/{component-id}/react-native
```

Then import and use it like any React Native component. For example, if you created a table component called "users-table" in the dashboard:

```tsx
import { UsersTable } from "@myop/users-table";

export default function App() {
  const users = [
    { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
    { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
    { id: 3, name: "Charlie", email: "charlie@example.com", role: "User" },
  ];

  return (
    <UsersTable
      data={{ rows: users }}
      onRowClicked={(payload) => {
        console.log("Selected user:", payload.rowData);
      }}
      onDeleteClicked={(payload) => {
        deleteUser(payload.userId);
      }}
      onExportRequested={(payload) => {
        exportToFormat(payload.format); // "csv" | "xlsx"
      }}
      style={{ flex: 1 }}
    />
  );
}
```

**Why this is powerful:**

- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required
- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
- **Zero bundle impact** — Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime via WebView, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding to your application bundle

**Environment options:**

Set the default environment for all components using `setEnvironment`:

```tsx
import { setEnvironment } from "@myop/react-native";

// Set default environment for all component loads
setEnvironment("staging");
```

You can also override the environment directly on a specific component:

```tsx
<UsersTable
  data={{ rows: users }}
  preview={true}        // Load unpublished preview version
  environment="staging" // Load from specific environment (prod, staging, etc.)
  style={{ flex: 1 }}
/>
```

Environments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.

For more details on auto-generated packages, see the [Auto-Generated Packages documentation](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages).

## Requirements

| Dependency | Version |
|------------|---------|
| React | >= 16.8.0 |
| React Native | >= 0.60.0 |
| react-native-webview | >= 11.0.0 |

## Quick Start

```tsx
import { MyopComponent } from '@myop/react-native';

export default function App() {
  return (
    <MyopComponent
      componentId="your-component-id"
      style={{ flex: 1 }}
    />
  );
}
```

## Usage

### Loading by Component ID

The simplest way to embed a Myop component:

```tsx
<MyopComponent
  componentId="abc123"
  style={{ flex: 1 }}
/>
```

### Passing Data to Components

Use the `data` prop to send data to your component's `myop_init_interface`:

```tsx
const [userData, setUserData] = useState({ name: 'John', theme: 'dark' });

<MyopComponent
  componentId="abc123"
  data={userData}
  style={{ flex: 1 }}
/>
```

When `data` changes, `myop_init_interface` is automatically called with the new value.

### Handling Component Events

Listen for events from your component's `myop_cta_handler`:

```tsx
<MyopComponent
  componentId="abc123"
  on={(action, payload) => {
    switch (action) {
      case 'submit':
        handleSubmit(payload);
        break;
      case 'navigate':
        navigation.navigate(payload.screen);
        break;
    }
  }}
  style={{ flex: 1 }}
/>
```

### Component Proxy API

Access the component instance for direct manipulation:

```tsx
import { IMyopComponentProxy } from '@myop/react-native';

const [component, setComponent] = useState<IMyopComponentProxy | null>(null);

<MyopComponent
  componentId="abc123"
  onLoad={(proxy) => setComponent(proxy)}
  style={{ flex: 1 }}
/>

// Send data to component
component?.props.myop_init_interface({ theme: 'dark' });

// DOM manipulation
component?.element.style.set('opacity', '0.5');
component?.element.set('style.background', 'red');

// Get values (async)
const opacity = await component?.element.style.get('opacity');
const scrollTop = await component?.element.get('scrollTop');

// Lifecycle methods
component?.hide();
component?.show();
component?.dispose();
```

### Loading & Error States

By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.

### Using the Default Myop Loader

```tsx
import { MyopComponent, MyopLoader } from '@myop/react-native';

<MyopComponent
  componentId="abc123"
  loader={<MyopLoader />}  // Opt-in to default Myop loader
  fadeDuration={300}
  style={{ flex: 1 }}
/>
```

### Custom Loading State

Provide your own loading component:

```tsx
import { ActivityIndicator, View } from 'react-native';

<MyopComponent
  componentId="abc123"
  loader={
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  }
  fadeDuration={300}
  style={{ flex: 1 }}
/>
```

### Custom Error Fallback

Display a custom view when the component fails to load:

```tsx
import { MyopComponent, MyopFallback } from '@myop/react-native';

<MyopComponent
  componentId="abc123"
  fallback={
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Unable to load component</Text>
    </View>
  }
  onError={(error) => console.error('Load failed:', error)}
  style={{ flex: 1 }}
/>

// Or use the default Myop fallback explicitly
<MyopComponent
  componentId="abc123"
  fallback={<MyopFallback />}
  style={{ flex: 1 }}
/>
```

### Using Component Configuration

For advanced use cases, pass a full configuration object:

```tsx
import { MyopComponent, IComponentInstanceConfig } from '@myop/react-native';

const config: IComponentInstanceConfig = {
  id: 'instance-1',
  componentId: 'abc123',
  componentName: 'MyComponent',
  skinSelector: {
    type: 'Dedicated',
    skin: { id: 'skin-1' }
  }
};

<MyopComponent
  componentConfig={config}
  style={{ flex: 1 }}
/>
```

### Environment Selection

Target different deployment environments:

```tsx
<MyopComponent
  componentId="abc123"
  environment="staging"  // defaults to "production"
  style={{ flex: 1 }}
/>
```

### WebView Behavior

Control scroll, zoom, and text selection:

```tsx
<MyopComponent
  componentId="abc123"
  scrollEnabled={true}      // Enable scrolling (default: false)
  zoomEnabled={true}        // Enable pinch-to-zoom (default: false)
  selectionEnabled={true}   // Enable text selection (default: false)
  style={{ flex: 1 }}
/>
```

Pass through any other `react-native-webview` prop via `webViewProps` — for example, to debug the screen with Safari/Chrome DevTools:

```tsx
<MyopComponent
  componentId="abc123"
  webViewProps={{ webviewDebuggingEnabled: true }}
  style={{ flex: 1 }}
/>
```

### Crash Recovery

The OS can kill the WebView renderer process under memory pressure (Android `onRenderProcessGone`) or for similar reasons on iOS (`onContentProcessDidTerminate`). `MyopComponent` detects these crashes and automatically remounts a fresh WebView, up to `maxCrashRetries` consecutive crashes per mount (default `3`). After the cap, the fallback is shown instead.

```tsx
<MyopComponent
  componentId="abc123"
  maxCrashRetries={3}
  onCrash={(info) => {
    console.warn(`Myop renderer crashed: ${info.reason} (attempt ${info.attempt})`);
    // Return `false` to opt out of auto-recovery and show the fallback instead.
    // Return nothing (or `true`) to let MyopComponent remount.
  }}
  style={{ flex: 1 }}
/>
```

The `onCrash` callback receives a `MyopCrashInfo` object:

| Field | Type | Description |
|-------|------|-------------|
| `reason` | `'renderer-gone' \| 'process-terminated' \| 'unknown'` | `renderer-gone` = Android, `process-terminated` = iOS |
| `attempt` | `number` | 1-based crash count within the current mount |
| `willAutoRecover` | `boolean` | `false` once the retry cap has been hit |
| `native` | `any` | Raw native event payload, when available |

#### Imperative ref API

`MyopComponent` accepts a `ref` of type `MyopComponentRef`:

```tsx
import { useRef } from 'react';
import { MyopComponent, MyopComponentRef } from '@myop/react-native';

const ref = useRef<MyopComponentRef>(null);

<MyopComponent ref={ref} componentId="abc123" style={{ flex: 1 }} />

// Force a remount (counts toward the retry cap)
ref.current?.reload();

// Clear the crash counter and remount fresh
ref.current?.reset();
```

`reload()` is useful for retry UIs ("Tap to retry" buttons). `reset()` is what you typically call after the fallback has been shown — for example, when the user navigates back to the screen.

> **Note:** `onContentProcessDidTerminate` and `onRenderProcessGone` are owned by `MyopComponent` and cannot be overridden via `webViewProps`. Use `onCrash` instead.

### Preloading Components

Preload components for instant rendering when they're displayed:

```tsx
import { preloadComponents, isPreloaded } from '@myop/react-native';

// Preload on app startup or before navigating
await preloadComponents(['component-1', 'component-2']);

// Check if component is preloaded
if (isPreloaded('component-1')) {
  // Component will render instantly without loader
}
```

### Configuration APIs

Configure the CloudRepository for custom endpoints or local development:

```tsx
import {
  enableLocalDev,
  setCloudRepositoryUrl,
  setCloudRepository,
  setEnvironment,
  getCloudRepository
} from '@myop/react-native';

// Enable local development mode (connects to localhost:9292)
enableLocalDev();

// Use a custom endpoint
setCloudRepositoryUrl('https://custom.myop.dev');

// Set default environment for all components
setEnvironment('staging');

// Get the current CloudRepository instance
const repo = getCloudRepository();
```

## API Reference

### MyopComponent Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `componentId` | `string` | - | Component ID to load from Myop cloud |
| `componentConfig` | `IComponentInstanceConfig` | - | Full component configuration object |
| `data` | `any` | - | Data passed to `myop_init_interface` |
| `on` | `(action: string, payload?: any) => void` | - | Handler for `myop_cta_handler` events |
| `onLoad` | `(proxy: IMyopComponentProxy) => void` | - | Callback with component proxy when loaded |
| `onError` | `(error: string) => void` | - | Callback when component fails to load |
| `loader` | `ReactNode` | `null` | Loading component (default: no loader). Use `<MyopLoader />` for default Myop loader |
| `fallback` | `ReactNode` | `<MyopFallback />` | Error fallback component (default: Myop-branded fallback) |
| `fadeDuration` | `number` | `200` | Loader fade-out duration in ms |
| `environment` | `string` | `"production"` | Target environment |
| `preview` | `boolean` | `false` | Load preview version of component |
| `scrollEnabled` | `boolean` | `false` | Enable WebView scrolling |
| `zoomEnabled` | `boolean` | `false` | Enable pinch-to-zoom |
| `selectionEnabled` | `boolean` | `false` | Enable text selection |
| `webViewProps` | `WebViewProps` | - | Extra props forwarded to the underlying `<WebView>` (e.g. `{ webviewDebuggingEnabled: true }`). Controlled props (`ref`, `source`, `onMessage`, `onRenderProcessGone`, `onContentProcessDidTerminate`) can't be overridden |
| `onCrash` | `(info: MyopCrashInfo) => boolean \| void` | - | Called when the WebView renderer is killed by the OS. Return `false` to opt out of auto-recovery |
| `maxCrashRetries` | `number` | `3` | Max consecutive renderer crashes to auto-recover from per mount |
| `style` | `StyleProp<ViewStyle>` | - | Container styles |

Plus an imperative `ref` of type `MyopComponentRef` with `reload()` and `reset()` methods (see [Crash Recovery](#crash-recovery)).

Either `componentId` or `componentConfig` must be provided.

### Exported Components

| Component | Description |
|-----------|-------------|
| `MyopComponent` | Main component for embedding Myop content |
| `MyopLoader` | Default animated loading state |
| `MyopFallback` | Default error/fallback state |

### Exported Functions

| Function | Description |
|----------|-------------|
| `preloadComponents(ids, env?, preview?)` | Preload components for instant rendering |
| `isPreloaded(componentId, env?, preview?)` | Check if a component is cached |
| `enableLocalDev()` | Enable local development mode (localhost:9292) |
| `setCloudRepositoryUrl(url)` | Set a custom CloudRepository URL |
| `setCloudRepository(repository)` | Set a custom CloudRepository instance |
| `setEnvironment(env)` | Set the default environment |
| `getCloudRepository()` | Get the current CloudRepository instance |

### Types

```typescript
interface IMyopComponentProxy {
  id: string;
  props: {
    myop_init_interface: (data: any) => void;
    myop_cta_handler: ((action: string, payload?: any) => void) | null;
  };
  element: IElementProxy;
  dispose: () => void;
  hide: () => void;
  show: () => void;
  inspect: () => void;
}

interface IElementProxy {
  set: (path: string, value: any) => void;
  get: (path: string) => Promise<any>;
  style: {
    set: (property: string, value: string) => void;
    get: (property: string) => Promise<string>;
  };
}

interface IComponentInstanceConfig {
  id: string;
  componentId: string;
  componentName: string;
  skinSelector: ISkinSelectorConfig;
  nestedComponents?: IComponentInstanceConfig[];
  resolvedExperiences?: IExperience[];
  resolvedNestedComponents?: IComponentConfig[];
  [key: string]: any;
}

interface MyopLoaderRef {
  fadeOut: (duration?: number) => void;
}

interface MyopCrashInfo {
  reason: 'renderer-gone' | 'process-terminated' | 'unknown';
  attempt: number;
  willAutoRecover: boolean;
  native?: any;
}

interface MyopComponentRef {
  reload: () => void;
  reset: () => void;
}
```

## License

MIT

---

# index

Source: /docs/sdk-react-native/index

## References

### IComponentInstanceConfig

Re-exports [IComponentInstanceConfig](/docs/sdk-react-native/types/interfaces/IComponentInstanceConfig)

***

### IMyopComponentProxy

Re-exports [IMyopComponentProxy](/docs/sdk-react-native/MyopComponent/interfaces/IMyopComponentProxy)

***

### MyopComponent

Re-exports [MyopComponent](/docs/sdk-react-native/MyopComponent/functions/MyopComponent)

***

### MyopComponentRef

Re-exports [MyopComponentRef](/docs/sdk-react-native/MyopComponent/interfaces/MyopComponentRef)

***

### MyopCrashInfo

Re-exports [MyopCrashInfo](/docs/sdk-react-native/MyopComponent/interfaces/MyopCrashInfo)

***

### MyopFallback

Re-exports [MyopFallback](/docs/sdk-react-native/MyopFallback/functions/MyopFallback)

***

### MyopLoader

Re-exports [MyopLoader](/docs/sdk-react-native/MyopLoader/functions/MyopLoader)

***

### MyopLoaderRef

Re-exports [MyopLoaderRef](/docs/sdk-react-native/MyopLoader/interfaces/MyopLoaderRef)

---

# @myop/react-native

Source: /docs/sdk-react-native/modules

## Modules

- [index](/docs/sdk-react-native/index)
- [MyopComponent](/docs/sdk-react-native/MyopComponent)
- [MyopFallback](/docs/sdk-react-native/MyopFallback)
- [MyopLoader](/docs/sdk-react-native/MyopLoader)
- [types](/docs/sdk-react-native/types)

---

# types

Source: /docs/sdk-react-native/types

## Interfaces

- [IComponentConfig](/docs/sdk-react-native/types/interfaces/IComponentConfig)
- [IComponentInstanceConfig](/docs/sdk-react-native/types/interfaces/IComponentInstanceConfig)
- [IExperience](/docs/sdk-react-native/types/interfaces/IExperience)
- [ISkinSelectorConfig](/docs/sdk-react-native/types/interfaces/ISkinSelectorConfig)

---

# Interface: IComponentConfig

Source: /docs/sdk-react-native/types/interfaces/IComponentConfig

Defined in: [src/types.ts:12](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L12)

## Indexable

\[`key`: `string`\]: `any`

---

# Interface: IComponentInstanceConfig

Source: /docs/sdk-react-native/types/interfaces/IComponentInstanceConfig

Defined in: [src/types.ts:16](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L16)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### componentId

> **componentId**: `string`

Defined in: [src/types.ts:18](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L18)

***

### componentName

> **componentName**: `string`

Defined in: [src/types.ts:19](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L19)

***

### id

> **id**: `string`

Defined in: [src/types.ts:17](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L17)

***

### nestedComponents?

> `optional` **nestedComponents**: [`IComponentInstanceConfig`](/docs/sdk-react-native/types/interfaces/IComponentInstanceConfig)[]

Defined in: [src/types.ts:21](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L21)

***

### resolvedExperiences?

> `optional` **resolvedExperiences**: [`IExperience`](/docs/sdk-react-native/types/interfaces/IExperience)[]

Defined in: [src/types.ts:22](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L22)

***

### resolvedNestedComponents?

> `optional` **resolvedNestedComponents**: [`IComponentConfig`](/docs/sdk-react-native/types/interfaces/IComponentConfig)[]

Defined in: [src/types.ts:23](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L23)

***

### skinSelector

> **skinSelector**: [`ISkinSelectorConfig`](/docs/sdk-react-native/types/interfaces/ISkinSelectorConfig)

Defined in: [src/types.ts:20](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L20)

---

# Interface: IExperience

Source: /docs/sdk-react-native/types/interfaces/IExperience

Defined in: [src/types.ts:8](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L8)

## Indexable

\[`key`: `string`\]: `any`

---

# Interface: ISkinSelectorConfig

Source: /docs/sdk-react-native/types/interfaces/ISkinSelectorConfig

Defined in: [src/types.ts:4](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L4)

## Indexable

\[`key`: `string`\]: `any`

---

# Function: MyopFallback()

Source: /docs/sdk-react/components/MyopFallback/functions/MyopFallback

> **MyopFallback**(`__namedParameters`): `Element`

Defined in: [components/MyopFallback.tsx:17](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopFallback.tsx#L17)

## Parameters

### \_\_namedParameters

`MyopFallbackProps`

## Returns

`Element`

---

# components/MyopFallback

Source: /docs/sdk-react/components/MyopFallback

## Functions

- [MyopFallback](/docs/sdk-react/components/MyopFallback/functions/MyopFallback)

---

# Function: MyopLoader()

Source: /docs/sdk-react/components/MyopLoader/functions/MyopLoader

> **MyopLoader**(`__namedParameters`): `Element`

Defined in: [components/MyopLoader.tsx:29](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopLoader.tsx#L29)

## Parameters

### \_\_namedParameters

`MyopLoaderProps`

## Returns

`Element`

---

# Function: MyopLogo()

Source: /docs/sdk-react/components/MyopLoader/functions/MyopLogo

> **MyopLogo**(): `Element`

Defined in: [components/MyopLoader.tsx:9](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopLoader.tsx#L9)

## Returns

`Element`

---

# components/MyopLoader

Source: /docs/sdk-react/components/MyopLoader

## Functions

- [MyopLoader](/docs/sdk-react/components/MyopLoader/functions/MyopLoader)
- [MyopLogo](/docs/sdk-react/components/MyopLoader/functions/MyopLogo)

---

# Function: MyopReactComponent()

Source: /docs/sdk-react/components/MyopReactComponent/functions/MyopReactComponent

> **MyopReactComponent**(`props`): `Element`

Defined in: [components/MyopReactComponent.tsx:13](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopReactComponent.tsx#L13)

## Parameters

### props

`IPropTypes`

## Returns

`Element`

---

# components/MyopReactComponent

Source: /docs/sdk-react/components/MyopReactComponent

## Functions

- [MyopReactComponent](/docs/sdk-react/components/MyopReactComponent/functions/MyopReactComponent)

---

# Function: MyopV2ReactComponent()

Source: /docs/sdk-react/components/MyopV2ReactComponent/functions/MyopV2ReactComponent

> **MyopV2ReactComponent**\<`TData`, `TCtaPayloads`\>(`props`): `Element`

Defined in: [components/MyopV2ReactComponent.tsx:146](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L146)

## Type Parameters

• **TData** = `any`

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

## Parameters

### props

[`IPropTypes`](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/IPropTypes)\<`TData`, `TCtaPayloads`\>

## Returns

`Element`

---

# components/MyopV2ReactComponent

Source: /docs/sdk-react/components/MyopV2ReactComponent

## Interfaces

- [IComponentInstanceConfig](/docs/sdk-react/components/MyopV2ReactComponent/interfaces/IComponentInstanceConfig)
- [IMyopComponentProps](/docs/sdk-react/components/MyopV2ReactComponent/interfaces/IMyopComponentProps)

## Type Aliases

- [EventHandlerProps](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/EventHandlerProps)
- [IPropTypes](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/IPropTypes)
- [ITypedMyopComponent](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/ITypedMyopComponent)
- [KebabToPascal](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/KebabToPascal)

## Functions

- [MyopV2ReactComponent](/docs/sdk-react/components/MyopV2ReactComponent/functions/MyopV2ReactComponent)

---

# Interface: IComponentInstanceConfig

Source: /docs/sdk-react/components/MyopV2ReactComponent/interfaces/IComponentInstanceConfig

Defined in: [components/MyopV2ReactComponent.tsx:15](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L15)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### componentId

> **componentId**: `string`

Defined in: [components/MyopV2ReactComponent.tsx:17](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L17)

***

### componentName

> **componentName**: `string`

Defined in: [components/MyopV2ReactComponent.tsx:18](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L18)

***

### id

> **id**: `string`

Defined in: [components/MyopV2ReactComponent.tsx:16](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L16)

***

### nestedComponents?

> `optional` **nestedComponents**: [`IComponentInstanceConfig`](/docs/sdk-react/components/MyopV2ReactComponent/interfaces/IComponentInstanceConfig)[]

Defined in: [components/MyopV2ReactComponent.tsx:20](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L20)

***

### resolvedExperiences?

> `optional` **resolvedExperiences**: `object`[]

Defined in: [components/MyopV2ReactComponent.tsx:21](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L21)

#### Index Signature

\[`key`: `string`\]: `any`

***

### resolvedNestedComponents?

> `optional` **resolvedNestedComponents**: `object`[]

Defined in: [components/MyopV2ReactComponent.tsx:22](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L22)

#### Index Signature

\[`key`: `string`\]: `any`

***

### skinSelector

> **skinSelector**: `object`

Defined in: [components/MyopV2ReactComponent.tsx:19](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L19)

#### Index Signature

\[`key`: `string`\]: `any`

---

# Interface: IMyopComponentProps\<TData, TCtaPayloads\>

Source: /docs/sdk-react/components/MyopV2ReactComponent/interfaces/IMyopComponentProps

Defined in: [components/MyopV2ReactComponent.tsx:64](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L64)

Typed props interface for accessing component.props with autocomplete.
Contains myop_init_interface and myop_cta_handler with proper types.

## Type Parameters

• **TData** = `any`

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

## Properties

### myop\_cta\_handler()?

> `optional` **myop\_cta\_handler**: \<`K`\>(`action`, `payload`) => `void`

Defined in: [components/MyopV2ReactComponent.tsx:71](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L71)

Handle CTA events from the component

#### Type Parameters

• **K** *extends* `string` \| `number` \| `symbol`

#### Parameters

##### action

`K`

##### payload

`TCtaPayloads`\[`K`\]

#### Returns

`void`

***

### myop\_init\_interface()?

> `optional` **myop\_init\_interface**: (`data`) => `void`

Defined in: [components/MyopV2ReactComponent.tsx:69](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L69)

Initialize the component with data

#### Parameters

##### data

`TData`

#### Returns

`void`

---

# Type Alias: EventHandlerProps\<TCtaPayloads\>

Source: /docs/sdk-react/components/MyopV2ReactComponent/type-aliases/EventHandlerProps

> **EventHandlerProps**\<`TCtaPayloads`\>: `string` *extends* keyof `TCtaPayloads` ? `object` : `` { [K in keyof TCtaPayloads as `on${KebabToPascal<K & string>}`]?: (payload: TCtaPayloads[K]) => void } ``

Defined in: [components/MyopV2ReactComponent.tsx:41](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L41)

Generates typed event handler props from CTA payloads.
e.g., `{ 'row-clicked': { rowIndex: number } }` -> `{ onRowClicked?: (payload: { rowIndex: number }) => void }`
When TCtaPayloads is a generic `Record<string, any>`, returns empty object to avoid index signature conflicts.

## Type Parameters

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\>

---

# Type Alias: IPropTypes\<TData, TCtaPayloads\>

Source: /docs/sdk-react/components/MyopV2ReactComponent/type-aliases/IPropTypes

> **IPropTypes**\<`TData`, `TCtaPayloads`\>: `IBasePropTypes`\<`TData`, `TCtaPayloads`\> & [`EventHandlerProps`](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/EventHandlerProps)\<`TCtaPayloads`\>

Defined in: [components/MyopV2ReactComponent.tsx:130](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L130)

Full props type including generated event handlers.
Supports both generic `on` callback and individual typed handlers like `onRowClicked`.

## Type Parameters

• **TData** = `any`

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

---

# Type Alias: ITypedMyopComponent\<TData, TCtaPayloads\>

Source: /docs/sdk-react/components/MyopV2ReactComponent/type-aliases/ITypedMyopComponent

> **ITypedMyopComponent**\<`TData`, `TCtaPayloads`\>: `Omit`\<`IMyopComponent`, `"props"`\> & `object`

Defined in: [components/MyopV2ReactComponent.tsx:78](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L78)

Typed Myop component interface with typed props.
Use this type for the component returned in onLoad callback.

## Type declaration

### props

> **props**: [`IMyopComponentProps`](/docs/sdk-react/components/MyopV2ReactComponent/interfaces/IMyopComponentProps)\<`TData`, `TCtaPayloads`\> \| `null`

Typed props for the component

## Type Parameters

• **TData** = `any`

• **TCtaPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

---

# Type Alias: KebabToPascal\<S\>

Source: /docs/sdk-react/components/MyopV2ReactComponent/type-aliases/KebabToPascal

> **KebabToPascal**\<`S`\>: `S` *extends* `` `${infer First}-${infer Rest}` `` ? `` `${Capitalize<First>}${KebabToPascal<Rest>}` `` : `Capitalize`\<`S`\>

Defined in: [components/MyopV2ReactComponent.tsx:31](https://github.com/hadarge/myop/blob/main/myop-react-host/src/components/MyopV2ReactComponent.tsx#L31)

Converts kebab-case string to PascalCase
e.g., 'column-reordered' -> 'ColumnReordered'

## Type Parameters

• **S** *extends* `string`

---

# @myop/react

Source: /docs/sdk-react

Official React bindings for embedding [Myop](https://myop.dev) components in your React applications.

Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.

[![npm version](https://img.shields.io/npm/v/@myop/react.svg)](https://www.npmjs.com/package/@myop/react)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![Discord](https://img.shields.io/badge/Discord-Join%20us-5865F2?logo=discord&logoColor=white)](https://myop.dev/discord)

[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)

## Installation

```bash
npm install @myop/react
```

```bash
yarn add @myop/react
```

```bash
pnpm add @myop/react
```

## Auto-Generated React Components

Myop automatically generates a typed React component package for every component you create in the [dashboard](https://dashboard.myop.dev/). Install it directly via npm:

```bash
npm install https://cloud.myop.dev/npm/{component-id}/react
```

Then import and use it like any React component. For example, if you created a table component called "users-table" in the dashboard:

```tsx
import { UsersTable } from "@myop/users-table";

function App() {
  const users = [
    { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
    { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
    { id: 3, name: "Charlie", email: "charlie@example.com", role: "User" },
  ];

  return (
    <UsersTable
      data={{ rows: users }}
      onRowClicked={(payload) => {
        console.log("Selected user:", payload.rowData);
      }}
      onDeleteClicked={(payload) => {
        deleteUser(payload.userId);
      }}
      onExportRequested={(payload) => {
        exportToFormat(payload.format); // "csv" | "xlsx"
      }}
    />
  );
}
```

**Why this is powerful:**

- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required
- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
- **Zero bundle impact** — The entire `@myop/react` package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed

**Environment options:**

Set the default environment for all components using `setEnvironment`:

```tsx
import { setEnvironment } from "@myop/react";

// Set default environment for all component loads
setEnvironment("staging");
```

You can also override the environment directly on a specific component:

```tsx
<UsersTable
  data={...}
  preview={true}        // Load unpublished preview version
  environment="staging" // Load from specific environment (prod, staging, etc.)
/>
```

Environments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.

For more details on auto-generated packages, see the [Auto-Generated Packages documentation](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages).

## Requirements

- React 18.0+

## Quick Start

```tsx
import { MyopComponent } from "@myop/react";

function App() {
  return (
    <MyopComponent
      componentId="your-component-id"
      style={{ width: 600, height: 400 }}
      on={(action, payload) => {
        console.log("Action:", action, "Payload:", payload);
      }}
    />
  );
}
```

## Components

### `MyopComponent`

The main component for embedding Myop components.

```tsx
import { MyopComponent } from "@myop/react";

<MyopComponent
  componentId="abc123"
  data={{ items: [...] }}
  onRowClicked={(payload) => console.log(payload)}
  onLoad={(component) => console.log("Loaded!", component)}
  onError={(error) => console.error(error)}
/>
```

#### Props

| Prop | Type | Description |
|------|------|-------------|
| `componentId` | `string` | The ID of the Myop component to load |
| `data` | `TData` | Data to pass to the component via `myop_init_interface` |
| `on` | `(action, payload) => void` | Generic handler for all CTA events |
| `on[ActionName]` | `(payload) => void` | Typed handler for specific actions (e.g., `onRowClicked`) |
| `onLoad` | `(component) => void` | Called when the component finishes loading |
| `onError` | `(error: string) => void` | Called when loading fails |
| `style` | `CSSProperties` | CSS styles for the container |
| `loader` | `ReactNode` | Loading indicator (default: `null` - no loader). Use `loader={<MyopLoader />}` for default Myop loader |
| `fallback` | `ReactNode` | Error fallback UI (default: `<MyopFallback />`). Override with custom component |
| `fadeDuration` | `number` | Loader fade-out duration in ms (default: `200`) |
| `environment` | `string` | Load from a specific environment (e.g., `"staging"`, `"prod"`) |
| `preview` | `boolean` | Load the unpublished preview version of the component |

#### Environments & Preview

Myop supports multiple environments, allowing you to test changes before going live:

```tsx
// Production (default)
<MyopComponent componentId="abc123" />

// Load from staging environment
<MyopComponent componentId="abc123" environment="staging" />

// Load unpublished preview version (for testing before publishing)
<MyopComponent componentId="abc123" preview={true} />

// Combine both: preview version in staging
<MyopComponent componentId="abc123" environment="staging" preview={true} />
```

Environments are configured in the [dashboard](https://dashboard.myop.dev/). Use `preview={true}` to test unpublished changes before making them live.

### `MyopContainer` (Legacy)

The legacy container component. Use `MyopComponent` for new projects.

```tsx
import { MyopContainer } from "@myop/react";

<MyopContainer
  componentId="abc123"
  onReady={(component) => console.log("Ready!", component)}
/>
```

## Type-Safe Event Handlers

Define your CTA payloads for fully typed event handlers:

```tsx
import { MyopComponent, IPropTypes } from "@myop/react";

// Define your component's data and CTA payload types
interface MyData {
  items: { id: string; name: string }[];
}

interface MyCtaPayloads {
  "row-clicked": { rowIndex: number; rowData: any };
  "item-selected": { itemId: string };
  "export-requested": { format: "csv" | "json" };
}

function Dashboard() {
  return (
    <MyopComponent<MyData, MyCtaPayloads>
      componentId="dashboard-component"
      data={{ items: [...] }}
      // Typed handler - kebab-case converts to onPascalCase
      onRowClicked={(payload) => {
        // payload is typed as { rowIndex: number; rowData: any }
        console.log("Row clicked:", payload.rowIndex);
      }}
      onItemSelected={(payload) => {
        // payload is typed as { itemId: string }
        console.log("Item selected:", payload.itemId);
      }}
      // Or use the generic handler
      on={(action, payload) => {
        // action is keyof MyCtaPayloads
        console.log(action, payload);
      }}
    />
  );
}
```

## Configuration

### Preloading Components

Preload components for faster rendering:

```tsx
import { preloadComponents, isPreloaded } from "@myop/react";

// Preload multiple components
await preloadComponents(["component-1", "component-2"]);

// Check if a component is preloaded
if (isPreloaded("component-1")) {
  console.log("Component is cached and ready");
}
```

### Custom Repository URL

```tsx
import { setCloudRepositoryUrl } from "@myop/react";

// Point to a custom Myop server
setCloudRepositoryUrl("https://your-custom-server.com");
```

### Environment Configuration

```tsx
import { setEnvironment } from "@myop/react";

// Set default environment for all component loads
setEnvironment("staging");
```

### Local Development

```tsx
import { enableLocalDev } from "@myop/react";

// Connect to local Myop development server (localhost:9292)
enableLocalDev();
```

### Advanced: Custom Repository

```tsx
import { setCloudRepository, getCloudRepository } from "@myop/react";
import { CloudRepository } from "@myop/sdk/helpers";

// Set a custom CloudRepository instance
const customRepo = new CloudRepository("https://custom-url.com");
setCloudRepository(customRepo);

// Get the current repository
const repo = getCloudRepository();
```

## Loading & Error States

By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.

### Using the Default Myop Loader

```tsx
import { MyopComponent, MyopLoader } from "@myop/react";

<MyopComponent
  componentId="my-component"
  loader={<MyopLoader />}  // Opt-in to default Myop loader
  fadeDuration={300}
/>
```

### Custom Loading State

```tsx
<MyopComponent
  componentId="my-component"
  loader={
    <div className="custom-loader">
      <Spinner />
      <p>Loading component...</p>
    </div>
  }
  fadeDuration={300}
/>
```

### Custom Error Fallback

```tsx
import { MyopComponent, MyopFallback } from "@myop/react";

<MyopComponent
  componentId="my-component"
  fallback={
    <div className="error-state">
      <p>Failed to load component</p>
      <button onClick={() => window.location.reload()}>Retry</button>
    </div>
  }
/>

// Or use the default Myop fallback explicitly
<MyopComponent
  componentId="my-component"
  fallback={<MyopFallback />}
/>
```

## API Reference

### Exports

| Export | Description |
|--------|-------------|
| `MyopComponent` | Main component for embedding Myop components |
| `MyopLoader` | Default Myop-branded loading indicator (opt-in) |
| `MyopFallback` | Default Myop-branded error fallback |
| `preloadComponents` | Preload components for faster rendering |
| `isPreloaded` | Check if a component is cached |
| `enableLocalDev` | Enable local development mode |
| `setCloudRepositoryUrl` | Set custom server URL |
| `setCloudRepository` | Set custom CloudRepository instance |
| `getCloudRepository` | Get current CloudRepository instance |
| `setEnvironment` | Set default environment |
| `IComponentInstanceConfig` | TypeScript interface for component config |
| `IPropTypes` | TypeScript interface for component props |

## License

MIT

---

# index

Source: /docs/sdk-react/index

## References

### IComponentInstanceConfig

Re-exports [IComponentInstanceConfig](/docs/sdk-react/components/MyopV2ReactComponent/interfaces/IComponentInstanceConfig)

***

### IMyopComponentProps

Re-exports [IMyopComponentProps](/docs/sdk-react/components/MyopV2ReactComponent/interfaces/IMyopComponentProps)

***

### IPropTypes

Re-exports [IPropTypes](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/IPropTypes)

***

### ITypedMyopComponent

Re-exports [ITypedMyopComponent](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/ITypedMyopComponent)

***

### MyopComponent

Renames and re-exports [MyopV2ReactComponent](/docs/sdk-react/components/MyopV2ReactComponent/functions/MyopV2ReactComponent)

***

### MyopContainer

Renames and re-exports [MyopReactComponent](/docs/sdk-react/components/MyopReactComponent/functions/MyopReactComponent)

***

### MyopFallback

Re-exports [MyopFallback](/docs/sdk-react/components/MyopFallback/functions/MyopFallback)

***

### MyopLoader

Re-exports [MyopLoader](/docs/sdk-react/components/MyopLoader/functions/MyopLoader)

***

### MyopV2Container

Renames and re-exports [MyopV2ReactComponent](/docs/sdk-react/components/MyopV2ReactComponent/functions/MyopV2ReactComponent)

---

# @myop/react

Source: /docs/sdk-react/modules

## Modules

- [components/MyopFallback](/docs/sdk-react/components/MyopFallback)
- [components/MyopLoader](/docs/sdk-react/components/MyopLoader)
- [components/MyopReactComponent](/docs/sdk-react/components/MyopReactComponent)
- [components/MyopV2ReactComponent](/docs/sdk-react/components/MyopV2ReactComponent)
- [index](/docs/sdk-react/index)

---

# @myop/vue

Source: /docs/sdk-vue/globals

## References

### MyopContainer

Renames and re-exports [MyopComponent](/docs/sdk-vue/variables/MyopComponent)

***

### MyopFallback

Renames and re-exports [MyopComponent](/docs/sdk-vue/variables/MyopComponent)

***

### MyopLoader

Renames and re-exports [MyopComponent](/docs/sdk-vue/variables/MyopComponent)

## Interfaces

- [IComponentInstanceConfig](/docs/sdk-vue/interfaces/IComponentInstanceConfig)
- [IMyopComponentProps](/docs/sdk-vue/interfaces/IMyopComponentProps)
- [SizeInfo](/docs/sdk-vue/interfaces/SizeInfo)

## Type Aliases

- [EventHandlerProps](/docs/sdk-vue/type-aliases/EventHandlerProps)
- [IPropTypes](/docs/sdk-vue/type-aliases/IPropTypes)
- [ITypedMyopComponent](/docs/sdk-vue/type-aliases/ITypedMyopComponent)
- [KebabToPascal](/docs/sdk-vue/type-aliases/KebabToPascal)

## Variables

- [MyopComponent](/docs/sdk-vue/variables/MyopComponent)

---

# @myop/vue

Source: /docs/sdk-vue

Official Vue bindings for embedding [Myop](https://myop.dev) components in your Vue applications.

Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.

[![npm version](https://img.shields.io/npm/v/@myop/vue.svg)](https://www.npmjs.com/package/@myop/vue)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![Discord](https://img.shields.io/badge/Discord-Join%20us-5865F2?logo=discord&logoColor=white)](https://myop.dev/discord)

[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)

## Installation

```bash
npm install @myop/vue
```

```bash
yarn add @myop/vue
```

```bash
pnpm add @myop/vue
```

## Auto-Generated Vue Components

Myop automatically generates a typed Vue component package for every component you create in the [dashboard](https://dashboard.myop.dev/). Install it directly via npm:

```bash
npm install https://cloud.myop.dev/npm/{component-id}/vue
```

Then import and use it like any Vue component. For example, if you created a table component called "users-table" in the dashboard:

```vue
<script setup lang="ts">
import { UsersTable } from "@myop/users-table";

const users = [
  { id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
  { id: 2, name: "Bob", email: "bob@example.com", role: "User" },
  { id: 3, name: "Charlie", email: "charlie@example.com", role: "User" },
];

function handleRowClicked(payload: { rowData: any }) {
  console.log("Selected user:", payload.rowData);
}

function handleDeleteClicked(payload: { userId: number }) {
  deleteUser(payload.userId);
}

function handleExportRequested(payload: { format: "csv" | "xlsx" }) {
  exportToFormat(payload.format);
}
</script>

<template>
  <UsersTable
    :data="{ rows: users }"
    @row-clicked="handleRowClicked"
    @delete-clicked="handleDeleteClicked"
    @export-requested="handleExportRequested"
  />
</template>
```

**Why this is powerful:**

- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required
- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
- **Zero bundle impact** — The entire `@myop/vue` package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed

**Environment options:**

Set the default environment for all components using `setEnvironment`:

```ts
import { setEnvironment } from "@myop/vue";

// Set default environment for all component loads
setEnvironment("staging");
```

You can also override the environment directly on a specific component:

```vue
<template>
  <UsersTable
    :data="{ rows: users }"
    :preview="true"
    environment="staging"
  />
</template>
```

Environments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.

For more details on auto-generated packages, see the [Auto-Generated Packages documentation](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages).

## Requirements

- Vue 3.0+

## Quick Start

```vue
<script setup lang="ts">
import { MyopComponent } from "@myop/vue";

function handleAction(action: string, payload: any) {
  console.log("Action:", action, "Payload:", payload);
}
</script>

<template>
  <MyopComponent
    componentId="your-component-id"
    :style="{ width: '600px', height: '400px' }"
    @action="handleAction"
  />
</template>
```

## Components

### `MyopComponent`

The main component for embedding Myop components.

```vue
<script setup lang="ts">
import { MyopComponent } from "@myop/vue";

const items = [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }];

function handleRowClicked(payload: any) {
  console.log("Row clicked:", payload);
}

function handleLoad(component: any) {
  console.log("Loaded!", component);
}

function handleError(error: string) {
  console.error("Error:", error);
}
</script>

<template>
  <MyopComponent
    componentId="abc123"
    :data="{ items }"
    @row-clicked="handleRowClicked"
    @load="handleLoad"
    @error="handleError"
  />
</template>
```

#### Props

| Prop | Type | Description |
|------|------|-------------|
| `componentId` | `string` | The ID of the Myop component to load |
| `data` | `object` | Data to pass to the component via `myop_init_interface` |
| `style` | `object` | CSS styles for the container |
| `#loader` | `slot` | Loading indicator slot (default: no loader). Use `<MyopLoader />` for default Myop loader |
| `#fallback` | `slot` | Error fallback slot (default: `<MyopFallback />`). Override with custom component |
| `fadeDuration` | `number` | Loader fade-out duration in ms (default: `200`) |
| `environment` | `string` | Load from a specific environment (e.g., `"staging"`, `"prod"`) |
| `preview` | `boolean` | Load the unpublished preview version of the component |

#### Events

| Event | Payload | Description |
|-------|---------|-------------|
| `@action` | `(action, payload)` | Generic handler for all CTA events |
| `@[action-name]` | `payload` | Handler for specific actions (e.g., `@row-clicked`) |
| `@load` | `component` | Called when the component finishes loading |
| `@error` | `error: string` | Called when loading fails |

#### Environments & Preview

Myop supports multiple environments, allowing you to test changes before going live:

```vue
<template>
  <!-- Production (default) -->
  <MyopComponent componentId="abc123" />

  <!-- Load from staging environment -->
  <MyopComponent componentId="abc123" environment="staging" />

  <!-- Load unpublished preview version (for testing before publishing) -->
  <MyopComponent componentId="abc123" :preview="true" />

  <!-- Combine both: preview version in staging -->
  <MyopComponent componentId="abc123" environment="staging" :preview="true" />
</template>
```

Environments are configured in the [dashboard](https://dashboard.myop.dev/). Use `:preview="true"` to test unpublished changes before making them live.

### `MyopContainer` (Legacy)

The legacy container component. Use `MyopComponent` for new projects.

```vue
<script setup lang="ts">
import { MyopContainer } from "@myop/vue";

function handleReady(component: any) {
  console.log("Ready!", component);
}
</script>

<template>
  <MyopContainer
    componentId="abc123"
    :onReady="handleReady"
  />
</template>
```

## Type-Safe Event Handlers

Define your CTA payloads for fully typed event handlers:

```vue
<script setup lang="ts">
import { MyopComponent } from "@myop/vue";

// Define your component's data and CTA payload types
interface MyData {
  items: { id: string; name: string }[];
}

interface RowClickedPayload {
  rowIndex: number;
  rowData: any;
}

interface ItemSelectedPayload {
  itemId: string;
}

interface ExportRequestedPayload {
  format: "csv" | "json";
}

function handleRowClicked(payload: RowClickedPayload) {
  console.log("Row clicked:", payload.rowIndex);
}

function handleItemSelected(payload: ItemSelectedPayload) {
  console.log("Item selected:", payload.itemId);
}

function handleAction(action: string, payload: any) {
  console.log(action, payload);
}
</script>

<template>
  <MyopComponent
    componentId="dashboard-component"
    :data="{ items: [...] }"
    @row-clicked="handleRowClicked"
    @item-selected="handleItemSelected"
    @action="handleAction"
  />
</template>
```

## Configuration

### Preloading Components

Preload components for faster rendering:

```ts
import { preloadComponents, isPreloaded } from "@myop/vue";

// Preload multiple components
await preloadComponents(["component-1", "component-2"]);

// Check if a component is preloaded
if (isPreloaded("component-1")) {
  console.log("Component is cached and ready");
}
```

### Custom Repository URL

```ts
import { setCloudRepositoryUrl } from "@myop/vue";

// Point to a custom Myop server
setCloudRepositoryUrl("https://your-custom-server.com");
```

### Environment Configuration

```ts
import { setEnvironment } from "@myop/vue";

// Set default environment for all component loads
setEnvironment("staging");
```

### Local Development

```ts
import { enableLocalDev } from "@myop/vue";

// Connect to local Myop development server (localhost:9292)
enableLocalDev();
```

### Advanced: Custom Repository

```ts
import { setCloudRepository, getCloudRepository } from "@myop/vue";
import { CloudRepository } from "@myop/sdk/helpers";

// Set a custom CloudRepository instance
const customRepo = new CloudRepository("https://custom-url.com");
setCloudRepository(customRepo);

// Get the current repository
const repo = getCloudRepository();
```

## Loading & Error States

By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.

### Using the Default Myop Loader

```vue
<script setup lang="ts">
import { MyopComponent, MyopLoader } from "@myop/vue";
</script>

<template>
  <MyopComponent componentId="my-component" :fadeDuration="300">
    <template #loader>
      <MyopLoader />
    </template>
  </MyopComponent>
</template>
```

### Custom Loading State

```vue
<template>
  <MyopComponent componentId="my-component" :fadeDuration="300">
    <template #loader>
      <div class="custom-loader">
        <Spinner />
        <p>Loading component...</p>
      </div>
    </template>
  </MyopComponent>
</template>
```

### Custom Error Fallback

```vue
<script setup lang="ts">
import { MyopComponent, MyopFallback } from "@myop/vue";
</script>

<template>
  <MyopComponent componentId="my-component">
    <!-- Custom fallback -->
    <template #fallback>
      <div class="error-state">
        <p>Failed to load component</p>
        <button @click="() => window.location.reload()">Retry</button>
      </div>
    </template>
  </MyopComponent>

  <!-- Or use default Myop fallback explicitly -->
  <MyopComponent componentId="other-component">
    <template #fallback>
      <MyopFallback />
    </template>
  </MyopComponent>
</template>
```

## API Reference

### Exports

| Export | Description |
|--------|-------------|
| `MyopComponent` | Main component for embedding Myop components |
| `MyopLoader` | Default Myop-branded loading indicator (opt-in) |
| `MyopFallback` | Default Myop-branded error fallback |
| `preloadComponents` | Preload components for faster rendering |
| `isPreloaded` | Check if a component is cached |
| `enableLocalDev` | Enable local development mode |
| `setCloudRepositoryUrl` | Set custom server URL |
| `setCloudRepository` | Set custom CloudRepository instance |
| `getCloudRepository` | Get current CloudRepository instance |
| `setEnvironment` | Set default environment |

## License

MIT

---

# Interface: IComponentInstanceConfig

Source: /docs/sdk-vue/interfaces/IComponentInstanceConfig

Defined in: [types.ts:5](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L5)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### componentId

> **componentId**: `string`

Defined in: [types.ts:7](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L7)

***

### componentName

> **componentName**: `string`

Defined in: [types.ts:8](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L8)

***

### id

> **id**: `string`

Defined in: [types.ts:6](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L6)

***

### nestedComponents?

> `optional` **nestedComponents**: [`IComponentInstanceConfig`](/docs/sdk-vue/interfaces/IComponentInstanceConfig)[]

Defined in: [types.ts:10](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L10)

***

### resolvedExperiences?

> `optional` **resolvedExperiences**: `object`[]

Defined in: [types.ts:11](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L11)

#### Index Signature

\[`key`: `string`\]: `any`

***

### resolvedNestedComponents?

> `optional` **resolvedNestedComponents**: `object`[]

Defined in: [types.ts:12](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L12)

#### Index Signature

\[`key`: `string`\]: `any`

***

### skinSelector

> **skinSelector**: `object`

Defined in: [types.ts:9](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L9)

#### Index Signature

\[`key`: `string`\]: `any`

---

# Interface: IMyopComponentProps\<TDataType, TPayloads\>

Source: /docs/sdk-vue/interfaces/IMyopComponentProps

Defined in: [types.ts:57](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L57)

Typed props interface for accessing component.props with autocomplete.
Contains myop_init_interface and myop_cta_handler with proper types.

## Type Parameters

• **TDataType** = `any`

• **TPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

## Properties

### myop\_cta\_handler()?

> `optional` **myop\_cta\_handler**: \<`K`\>(`action`, `payload`) => `void`

Defined in: [types.ts:64](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L64)

Handle CTA events from the component

#### Type Parameters

• **K** *extends* `string` \| `number` \| `symbol`

#### Parameters

##### action

`K`

##### payload

`TPayloads`\[`K`\]

#### Returns

`void`

***

### myop\_init\_interface()?

> `optional` **myop\_init\_interface**: (`data`) => `void`

Defined in: [types.ts:62](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L62)

Initialize the component with data

#### Parameters

##### data

`TDataType`

#### Returns

`void`

---

# Interface: SizeInfo

Source: /docs/sdk-vue/interfaces/SizeInfo

Defined in: [types.ts:16](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L16)

## Properties

### autoSizingHeight

> **autoSizingHeight**: `boolean`

Defined in: [types.ts:20](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L20)

***

### autoSizingWidth

> **autoSizingWidth**: `boolean`

Defined in: [types.ts:19](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L19)

***

### height

> **height**: `number`

Defined in: [types.ts:18](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L18)

***

### width

> **width**: `number`

Defined in: [types.ts:17](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L17)

---

# Type Alias: EventHandlerProps\<TPayloads\>

Source: /docs/sdk-vue/type-aliases/EventHandlerProps

> **EventHandlerProps**\<`TPayloads`\>: `string` *extends* keyof `TPayloads` ? `object` : `` { [K in keyof TPayloads as `on${KebabToPascal<K & string>}`]?: (payload: TPayloads[K]) => void } ``

Defined in: [types.ts:36](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L36)

Generates typed event handler props from CTA payloads.
e.g., `{ 'row-clicked': { rowIndex: number } }` -> `{ onRowClicked?: (payload: { rowIndex: number }) => void }`

## Type Parameters

• **TPayloads** *extends* `Record`\<`string`, `any`\>

---

# Type Alias: IPropTypes\<TDataType, TPayloads\>

Source: /docs/sdk-vue/type-aliases/IPropTypes

> **IPropTypes**\<`TDataType`, `TPayloads`\>: `IBaseProps`\<`TDataType`, `TPayloads`\> & [`EventHandlerProps`](/docs/sdk-vue/type-aliases/EventHandlerProps)\<`TPayloads`\>

Defined in: [types.ts:106](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L106)

Full props type including generated event handlers.
Supports both generic `on` callback and individual typed handlers like `onRowClicked`.

## Type Parameters

• **TDataType** = `any`

• **TPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

---

# Type Alias: ITypedMyopComponent\<TDataType, TPayloads\>

Source: /docs/sdk-vue/type-aliases/ITypedMyopComponent

> **ITypedMyopComponent**\<`TDataType`, `TPayloads`\>: `Omit`\<`IMyopComponent`, `"props"`\> & `object`

Defined in: [types.ts:71](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L71)

Typed Myop component interface with typed props.
Use this type for the component returned in load event.

## Type declaration

### props

> **props**: [`IMyopComponentProps`](/docs/sdk-vue/interfaces/IMyopComponentProps)\<`TDataType`, `TPayloads`\> \| `null`

Typed props for the component

## Type Parameters

• **TDataType** = `any`

• **TPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>

---

# Type Alias: KebabToPascal\<S\>

Source: /docs/sdk-vue/type-aliases/KebabToPascal

> **KebabToPascal**\<`S`\>: `S` *extends* `` `${infer First}-${infer Rest}` `` ? `` `${Capitalize<First>}${KebabToPascal<Rest>}` `` : `Capitalize`\<`S`\>

Defined in: [types.ts:27](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L27)

Converts kebab-case string to PascalCase
e.g., 'column-reordered' -> 'ColumnReordered'

## Type Parameters

• **S** *extends* `string`

---

# Variable: MyopComponent

Source: /docs/sdk-vue/variables/MyopComponent

> **MyopComponent**: `any`

---

# Class: IframeSDK

Source: /docs/sdk/Iframe/IframeSDK/classes/IframeSDK

Defined in: [Iframe/IframeSDK.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L61)

The Iframe SDK is intended for scenarios where developers wish to implement Myop components as separate web applications hosted within iframes.<br/><br/>
By importing the Iframe SDK, developers gain access to tools and utilities necessary for handling communication between the host application and the embedded iframe-based Myop components<br/><br/>
This SDK facilitates secure isolation, allowing components to function independently while still benefiting from the overall structure and management capabilities provided by the host application.<br/><br/>

Once loaded the `RootSDK`, you can load the `IframeSDK`
```js
const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());
```
or
```ts
import {getIframeModule} from '@myop/sdk';
const {IframeSDK} = (await getIframeModule());
```

## Extends

- [`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK)

## Constructors

### new IframeSDK()

> **new IframeSDK**(): [`IframeSDK`](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)

Defined in: [Iframe/IframeSDK.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L65)

#### Returns

[`IframeSDK`](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)

#### Overrides

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`constructor`](/docs/sdk/common/classes/BaseMyopSDK#constructors)

## Properties

### alwaysPassEnvelopesToHost

> **alwaysPassEnvelopesToHost**: `boolean` = `false`

Defined in: [common/BaseMyopSDK.ts:53](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L53)

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`alwaysPassEnvelopesToHost`](/docs/sdk/common/classes/BaseMyopSDK#alwayspassenvelopestohost)

***

### components

> **components**: `Record`\<`string`, [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\> = `{}`

Defined in: [common/BaseMyopSDK.ts:51](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L51)

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`components`](/docs/sdk/common/classes/BaseMyopSDK#components)

***

### messageCleanupCache

> **messageCleanupCache**: `Promise`\<`void`\> \| `Record`\<`string`, [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler) \| `Promise`\<[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)\>\> = `{}`

Defined in: [common/BaseMyopSDK.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L55)

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`messageCleanupCache`](/docs/sdk/common/classes/BaseMyopSDK#messagecleanupcache)

***

### messageToHandleAfterInit

> **messageToHandleAfterInit**: [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)[] = `[]`

Defined in: [common/BaseMyopSDK.ts:49](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L49)

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`messageToHandleAfterInit`](/docs/sdk/common/classes/BaseMyopSDK#messagetohandleafterinit)

***

### supportedHandlers

> **supportedHandlers**: [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)[]

Defined in: [Iframe/IframeSDK.ts:100](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L100)

#### Overrides

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`supportedHandlers`](/docs/sdk/common/classes/BaseMyopSDK#supportedhandlers)

***

### version

> **version**: `any`

Defined in: [Iframe/IframeSDK.ts:63](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L63)

## Methods

### handleIncomeMessages()

> **handleIncomeMessages**(`event`): `void`

Defined in: [common/BaseMyopSDK.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L57)

#### Parameters

##### event

`any`

#### Returns

`void`

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`handleIncomeMessages`](/docs/sdk/common/classes/BaseMyopSDK#handleincomemessages)

***

### init()

> **init**(): `void`

Defined in: [Iframe/IframeSDK.ts:117](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L117)

#### Returns

`void`

#### Overrides

`BaseMyopSDK.init`

***

### messageToHost()

> **messageToHost**(`message`, `replayTo`?): `void`

Defined in: [Iframe/IframeSDK.ts:76](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L76)

#### Parameters

##### message

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

##### replayTo?

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)

#### Returns

`void`

#### Overrides

`BaseMyopSDK.messageToHost`

---

# Iframe/IframeSDK

Source: /docs/sdk/Iframe/IframeSDK

The Iframe SDK is intended for scenarios where developers wish to implement Myop components as separate web applications hosted within iframes.<br/><br/>
By importing the Iframe SDK, developers gain access to tools and utilities necessary for handling communication between the host application and the embedded iframe-based Myop components<br/><br/>
This SDK facilitates secure isolation, allowing components to function independently while still benefiting from the overall structure and management capabilities provided by the host application.<br/><br/>

Once loaded the `RootSDK`, you can load the `IframeSDK`
```js
const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());
```
or
```ts
import {getIframeModule} from '@myop/sdk';
const {IframeSDK} = (await getIframeModule());
```
or
```ts
import {IframeSDK} from '@myop/sdk/iframe';
```

## Classes

- [IframeSDK](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)

---

# Iframe

Source: /docs/sdk/Iframe

## References

### IframeSDK

Re-exports [IframeSDK](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)

---

# Class: `abstract` BaseContextMessageHandler\<T, E\>

Source: /docs/sdk/common/classes/BaseContextMessageHandler

Defined in: [common/baseMessageHandler.ts:45](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L45)

## Extends

- [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)\<`T`\>

## Type Parameters

• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage) = `any`

• **E** = `any`

## Constructors

### new BaseContextMessageHandler()

> **new BaseContextMessageHandler**\<`T`, `E`\>(`messageToHost`, `context`?): [`BaseContextMessageHandler`](/docs/sdk/common/classes/BaseContextMessageHandler)\<`T`, `E`\>

Defined in: [common/baseMessageHandler.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L46)

#### Parameters

##### messageToHost

(`message`, `replayTo`?) => `void`

##### context?

`E`

#### Returns

[`BaseContextMessageHandler`](/docs/sdk/common/classes/BaseContextMessageHandler)\<`T`, `E`\>

#### Overrides

[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler).[`constructor`](/docs/sdk/common/classes/BaseMessageHandler#constructors)

## Properties

### context?

> `optional` **context**: `E`

Defined in: [common/baseMessageHandler.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L46)

***

### executor

> `abstract` **executor**: `IMessageExecutor`\<`T`\>

Defined in: [common/baseMessageHandler.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L42)

#### Inherited from

[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler).[`executor`](/docs/sdk/common/classes/BaseMessageHandler#executor)

***

### messageToHost()

> **messageToHost**: (`message`, `replayTo`?) => `void`

Defined in: [common/baseMessageHandler.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L46)

#### Parameters

##### message

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

##### replayTo?

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)

#### Returns

`void`

#### Inherited from

[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler).[`messageToHost`](/docs/sdk/common/classes/BaseMessageHandler#messagetohost-1)

***

### messageType

> `abstract` **messageType**: `MyopMessageKey`

Defined in: [common/baseMessageHandler.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L41)

#### Inherited from

[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler).[`messageType`](/docs/sdk/common/classes/BaseMessageHandler#messagetype)

---

# Class: `abstract` BaseMessageHandler\<T\>

Source: /docs/sdk/common/classes/BaseMessageHandler

Defined in: [common/baseMessageHandler.ts:33](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L33)

## Extended by

- [`BaseContextMessageHandler`](/docs/sdk/common/classes/BaseContextMessageHandler)

## Type Parameters

• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage) = `any`

## Implements

- `IMessageHandler`\<`T`\>

## Constructors

### new BaseMessageHandler()

> **new BaseMessageHandler**\<`T`\>(`messageToHost`): [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)\<`T`\>

Defined in: [common/baseMessageHandler.ts:37](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L37)

#### Parameters

##### messageToHost

(`message`, `replayTo`?) => `void`

#### Returns

[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)\<`T`\>

## Properties

### executor

> `abstract` **executor**: `IMessageExecutor`\<`T`\>

Defined in: [common/baseMessageHandler.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L42)

#### Implementation of

`IMessageHandler.executor`

***

### messageToHost()

> **messageToHost**: (`message`, `replayTo`?) => `void`

Defined in: [common/baseMessageHandler.ts:37](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L37)

#### Parameters

##### message

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

##### replayTo?

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)

#### Returns

`void`

#### Implementation of

`IMessageHandler.messageToHost`

***

### messageType

> `abstract` **messageType**: `MyopMessageKey`

Defined in: [common/baseMessageHandler.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L41)

#### Implementation of

`IMessageHandler.messageType`

---

# Class: `abstract` BaseMyopSDK

Source: /docs/sdk/common/classes/BaseMyopSDK

Defined in: [common/BaseMyopSDK.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L43)

## Extended by

- [`IframeSDK`](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)
- [`WebComponentSDK`](/docs/sdk/webcomponent/WebComponentSDK/classes/WebComponentSDK)

## Implements

- [`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK)

## Constructors

### new BaseMyopSDK()

> **new BaseMyopSDK**(): [`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK)

#### Returns

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK)

## Properties

### alwaysPassEnvelopesToHost

> **alwaysPassEnvelopesToHost**: `boolean` = `false`

Defined in: [common/BaseMyopSDK.ts:53](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L53)

***

### components

> **components**: `Record`\<`string`, [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\> = `{}`

Defined in: [common/BaseMyopSDK.ts:51](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L51)

#### Implementation of

[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`components`](/docs/sdk/common/interfaces/IMyopSDK#components)

***

### init()

> `abstract` **init**: () => `void`

Defined in: [common/BaseMyopSDK.ts:197](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L197)

#### Returns

`void`

#### Implementation of

[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`init`](/docs/sdk/common/interfaces/IMyopSDK#init)

***

### messageCleanupCache

> **messageCleanupCache**: `Promise`\<`void`\> \| `Record`\<`string`, [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler) \| `Promise`\<[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)\>\> = `{}`

Defined in: [common/BaseMyopSDK.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L55)

***

### messageToHandleAfterInit

> **messageToHandleAfterInit**: [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)[] = `[]`

Defined in: [common/BaseMyopSDK.ts:49](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L49)

***

### messageToHost()

> `abstract` **messageToHost**: (`message`, `replayTo`?) => `void`

Defined in: [common/BaseMyopSDK.ts:45](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L45)

#### Parameters

##### message

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

##### replayTo?

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)

#### Returns

`void`

#### Implementation of

[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`messageToHost`](/docs/sdk/common/interfaces/IMyopSDK#messagetohost)

***

### supportedHandlers

> `abstract` **supportedHandlers**: [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)[]

Defined in: [common/BaseMyopSDK.ts:47](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L47)

#### Implementation of

[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`supportedHandlers`](/docs/sdk/common/interfaces/IMyopSDK#supportedhandlers)

## Methods

### handleIncomeMessages()

> **handleIncomeMessages**(`event`): `void`

Defined in: [common/BaseMyopSDK.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L57)

#### Parameters

##### event

`any`

#### Returns

`void`

#### Implementation of

[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`handleIncomeMessages`](/docs/sdk/common/interfaces/IMyopSDK#handleincomemessages)

---

# Class: HostedComponent\<T\>

Source: /docs/sdk/common/classes/HostedComponent

Defined in: [common/BaseMyopSDK.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L13)

## Type Parameters

• **T** = `any`

## Constructors

### new HostedComponent()

> **new HostedComponent**\<`T`\>(`id`, `context`?): [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\<`T`\>

Defined in: [common/BaseMyopSDK.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L20)

#### Parameters

##### id

`string`

##### context?

`T`

#### Returns

[`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\<`T`\>

## Properties

### context?

> `optional` **context**: `T`

Defined in: [common/BaseMyopSDK.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L20)

***

### id

> **id**: `string`

Defined in: [common/BaseMyopSDK.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L20)

## Methods

### send()

> **send**(`message`): `void`

Defined in: [common/BaseMyopSDK.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L14)

#### Parameters

##### message

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`void`

---

# Class: MyopElementRef

Source: /docs/sdk/common/classes/MyopElementRef

Defined in: [common/MyopElementRef.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L22)

## Implements

- [`IElementRef`](/docs/sdk/common/interfaces/IElementRef)

## Constructors

### new MyopElementRef()

> **new MyopElementRef**(`myopId`, `htmlTagName`, `BoundingRect`?, `offsetTop`?, `offsetLeft`?): [`MyopElementRef`](/docs/sdk/common/classes/MyopElementRef)

Defined in: [common/MyopElementRef.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L23)

#### Parameters

##### myopId

`string`

##### htmlTagName

`string`

##### BoundingRect?

`DOMRect`

##### offsetTop?

`number`

##### offsetLeft?

`number`

#### Returns

[`MyopElementRef`](/docs/sdk/common/classes/MyopElementRef)

## Properties

### BoundingRect?

> `optional` **BoundingRect**: `DOMRect`

Defined in: [common/MyopElementRef.ts:25](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L25)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`BoundingRect`](/docs/sdk/common/interfaces/IElementRef#boundingrect)

***

### htmlTagName

> **htmlTagName**: `string`

Defined in: [common/MyopElementRef.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L24)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`htmlTagName`](/docs/sdk/common/interfaces/IElementRef#htmltagname)

***

### myopId

> **myopId**: `string`

Defined in: [common/MyopElementRef.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L23)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`myopId`](/docs/sdk/common/interfaces/IElementRef#myopid)

***

### offsetLeft?

> `optional` **offsetLeft**: `number`

Defined in: [common/MyopElementRef.ts:27](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L27)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`offsetLeft`](/docs/sdk/common/interfaces/IElementRef#offsetleft)

***

### offsetTop?

> `optional` **offsetTop**: `number`

Defined in: [common/MyopElementRef.ts:26](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L26)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`offsetTop`](/docs/sdk/common/interfaces/IElementRef#offsettop)

***

### type

> `readonly` **type**: `string` = `'MyopElementRef'`

Defined in: [common/MyopElementRef.ts:31](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L31)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`type`](/docs/sdk/common/interfaces/IElementRef#type)

---

# Class: RefBehaviorType

Source: /docs/sdk/common/classes/RefBehaviorType

Defined in: [common/index.ts:169](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L169)

## Constructors

### new RefBehaviorType()

> **new RefBehaviorType**(): [`RefBehaviorType`](/docs/sdk/common/classes/RefBehaviorType)

#### Returns

[`RefBehaviorType`](/docs/sdk/common/classes/RefBehaviorType)

## Properties

### code

> `static` **code**: `"code"`

Defined in: [common/index.ts:170](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L170)

***

### component

> `static` **component**: `"component"`

Defined in: [common/index.ts:171](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L171)

---

# Class: RootRef

Source: /docs/sdk/common/classes/RootRef

Defined in: [common/index.ts:493](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L493)

## Constructors

### new RootRef()

> **new RootRef**(`container`, `shadowRoot`?): [`RootRef`](/docs/sdk/common/classes/RootRef)

Defined in: [common/index.ts:494](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L494)

#### Parameters

##### container

`HTMLElement`

##### shadowRoot?

`ShadowRoot`

#### Returns

[`RootRef`](/docs/sdk/common/classes/RootRef)

## Properties

### container

> **container**: `HTMLElement`

Defined in: [common/index.ts:494](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L494)

***

### shadowRoot?

> `optional` **shadowRoot**: `ShadowRoot`

Defined in: [common/index.ts:494](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L494)

## Methods

### getRoot()

> **getRoot**(): `HTMLElement` \| `ShadowRoot`

Defined in: [common/index.ts:502](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L502)

#### Returns

`HTMLElement` \| `ShadowRoot`

***

### getRootDiv()

> **getRootDiv**(): `null` \| `HTMLDivElement`

Defined in: [common/index.ts:498](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L498)

#### Returns

`null` \| `HTMLDivElement`

---

# Class: XPathElementRef

Source: /docs/sdk/common/classes/XPathElementRef

Defined in: [common/MyopElementRef.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L11)

## Implements

- [`IElementRef`](/docs/sdk/common/interfaces/IElementRef)

## Constructors

### new XPathElementRef()

> **new XPathElementRef**(`xPath`, `htmlTagName`, `BoundingRect`?, `offsetTop`?, `offsetLeft`?): [`XPathElementRef`](/docs/sdk/common/classes/XPathElementRef)

Defined in: [common/MyopElementRef.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L12)

#### Parameters

##### xPath

`string`

##### htmlTagName

`string`

##### BoundingRect?

`DOMRect`

##### offsetTop?

`number`

##### offsetLeft?

`number`

#### Returns

[`XPathElementRef`](/docs/sdk/common/classes/XPathElementRef)

## Properties

### BoundingRect?

> `optional` **BoundingRect**: `DOMRect`

Defined in: [common/MyopElementRef.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L14)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`BoundingRect`](/docs/sdk/common/interfaces/IElementRef#boundingrect)

***

### htmlTagName

> **htmlTagName**: `string`

Defined in: [common/MyopElementRef.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L13)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`htmlTagName`](/docs/sdk/common/interfaces/IElementRef#htmltagname)

***

### offsetLeft?

> `optional` **offsetLeft**: `number`

Defined in: [common/MyopElementRef.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L16)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`offsetLeft`](/docs/sdk/common/interfaces/IElementRef#offsetleft)

***

### offsetTop?

> `optional` **offsetTop**: `number`

Defined in: [common/MyopElementRef.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L15)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`offsetTop`](/docs/sdk/common/interfaces/IElementRef#offsettop)

***

### type

> `readonly` **type**: `string` = `'XPathElementRef'`

Defined in: [common/MyopElementRef.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L19)

#### Implementation of

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`type`](/docs/sdk/common/interfaces/IElementRef#type)

***

### xPath

> **xPath**: `string`

Defined in: [common/MyopElementRef.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L12)

---

# Function: runExecutorCleanup()

Source: /docs/sdk/common/functions/runExecutorCleanup

> **runExecutorCleanup**(`task`): `Promise`\<`void`\>

Defined in: [common/baseMessageHandler.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L7)

## Parameters

### task

[`IMessageExecutorCleanup`](/docs/sdk/common/type-aliases/IMessageExecutorCleanup)

## Returns

`Promise`\<`void`\>

---

# common

Source: /docs/sdk/common

## Classes

- [BaseContextMessageHandler](/docs/sdk/common/classes/BaseContextMessageHandler)
- [BaseMessageHandler](/docs/sdk/common/classes/BaseMessageHandler)
- [BaseMyopSDK](/docs/sdk/common/classes/BaseMyopSDK)
- [HostedComponent](/docs/sdk/common/classes/HostedComponent)
- [MyopElementRef](/docs/sdk/common/classes/MyopElementRef)
- [RefBehaviorType](/docs/sdk/common/classes/RefBehaviorType)
- [RootRef](/docs/sdk/common/classes/RootRef)
- [XPathElementRef](/docs/sdk/common/classes/XPathElementRef)

## Interfaces

- [ComponentAccess](/docs/sdk/common/interfaces/ComponentAccess)
- [IABExperience](/docs/sdk/common/interfaces/IABExperience)
- [IBindMessagePropConfig](/docs/sdk/common/interfaces/IBindMessagePropConfig)
- [ICodeRefBehavior](/docs/sdk/common/interfaces/ICodeRefBehavior)
- [IComponentConfig](/docs/sdk/common/interfaces/IComponentConfig)
- [IComponentDefinitionConfig](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
- [IComponentInstanceConfig](/docs/sdk/common/interfaces/IComponentInstanceConfig)
- [IComponentRefBehavior](/docs/sdk/common/interfaces/IComponentRefBehavior)
- [IDateRange](/docs/sdk/common/interfaces/IDateRange)
- [IDedicatedSkinConfig](/docs/sdk/common/interfaces/IDedicatedSkinConfig)
- [IDefaultSkinConfig](/docs/sdk/common/interfaces/IDefaultSkinConfig)
- [IElementRef](/docs/sdk/common/interfaces/IElementRef)
- [IExperience](/docs/sdk/common/interfaces/IExperience)
- [IExperienceABSplit](/docs/sdk/common/interfaces/IExperienceABSplit)
- [IExperienceABSplitVersion](/docs/sdk/common/interfaces/IExperienceABSplitVersion)
- [IExperienceDefinitionConfig](/docs/sdk/common/interfaces/IExperienceDefinitionConfig)
- [IExperienceSegment](/docs/sdk/common/interfaces/IExperienceSegment)
- [IExperienceSegmentRule](/docs/sdk/common/interfaces/IExperienceSegmentRule)
- [IFunctionResultsSegment](/docs/sdk/common/interfaces/IFunctionResultsSegment)
- [IHTMLLoaderConfig](/docs/sdk/common/interfaces/IHTMLLoaderConfig)
- [IIframeLoaderConfig](/docs/sdk/common/interfaces/IIframeLoaderConfig)
- [IMessagePropConfig](/docs/sdk/common/interfaces/IMessagePropConfig)
- [IMinimizedLoaderConfig](/docs/sdk/common/interfaces/IMinimizedLoaderConfig)
- [IMyopSDK](/docs/sdk/common/interfaces/IMyopSDK)
- [IPropBehavior](/docs/sdk/common/interfaces/IPropBehavior)
- [IPropCodeBehavior](/docs/sdk/common/interfaces/IPropCodeBehavior)
- [IPropConfig](/docs/sdk/common/interfaces/IPropConfig)
- [IPropMessageBehavior](/docs/sdk/common/interfaces/IPropMessageBehavior)
- [IPropMessageBehaviorParam](/docs/sdk/common/interfaces/IPropMessageBehaviorParam)
- [IRefBehavior](/docs/sdk/common/interfaces/IRefBehavior)
- [IRefConfig](/docs/sdk/common/interfaces/IRefConfig)
- [ISegmentDefinition](/docs/sdk/common/interfaces/ISegmentDefinition)
- [ISegmentedSkinConfig](/docs/sdk/common/interfaces/ISegmentedSkinConfig)
- [ISegmentExperience](/docs/sdk/common/interfaces/ISegmentExperience)
- [ISegmentInstance](/docs/sdk/common/interfaces/ISegmentInstance)
- [ISkinConfig](/docs/sdk/common/interfaces/ISkinConfig)
- [ISkinInstanceConfig](/docs/sdk/common/interfaces/ISkinInstanceConfig)
- [ISkinLoaderConfig](/docs/sdk/common/interfaces/ISkinLoaderConfig)
- [ISkinSelectorConfig](/docs/sdk/common/interfaces/ISkinSelectorConfig)
- [IUserFlow](/docs/sdk/common/interfaces/IUserFlow)
- [IUserFlowDefinition](/docs/sdk/common/interfaces/IUserFlowDefinition)
- [IWebComponentLoaderConfig](/docs/sdk/common/interfaces/IWebComponentLoaderConfig)
- [v2\_IBaseMyopObject](/docs/sdk/common/interfaces/v2_IBaseMyopObject)
- [v2\_IComponentDefinitionConfig](/docs/sdk/common/interfaces/v2_IComponentDefinitionConfig)
- [v2\_IDTO](/docs/sdk/common/interfaces/v2_IDTO)
- [v2\_IMyopStoredObject](/docs/sdk/common/interfaces/v2_IMyopStoredObject)
- [v2\_IReleaseMetadata](/docs/sdk/common/interfaces/v2_IReleaseMetadata)
- [v2\_ISkinConfig](/docs/sdk/common/interfaces/v2_ISkinConfig)
- [v2\_IVariantConfig](/docs/sdk/common/interfaces/v2_IVariantConfig)

## Type Aliases

- [CleanupHandler](/docs/sdk/common/type-aliases/CleanupHandler)
- [Dictionary](/docs/sdk/common/type-aliases/Dictionary)
- [IDashboard](/docs/sdk/common/type-aliases/IDashboard)
- [IMessageExecutorCleanup](/docs/sdk/common/type-aliases/IMessageExecutorCleanup)
- [IRefBehaviorType](/docs/sdk/common/type-aliases/IRefBehaviorType)
- [LoaderFrameworkType](/docs/sdk/common/type-aliases/LoaderFrameworkType)
- [PropType](/docs/sdk/common/type-aliases/PropType)
- [RefSelectorType](/docs/sdk/common/type-aliases/RefSelectorType)
- [SkinLoaderType](/docs/sdk/common/type-aliases/SkinLoaderType)

## Variables

- [ExperienceTypes](/docs/sdk/common/variables/ExperienceTypes)
- [LoaderFrameworks](/docs/sdk/common/variables/LoaderFrameworks)
- [PropConfigBehaviorTypes](/docs/sdk/common/variables/PropConfigBehaviorTypes)
- [PropMessageModes](/docs/sdk/common/variables/PropMessageModes)
- [SegmentType](/docs/sdk/common/variables/SegmentType)
- [ShadowRootModeType](/docs/sdk/common/variables/ShadowRootModeType)
- [SkinLoaders](/docs/sdk/common/variables/SkinLoaders)
- [SkinSelectorTypes](/docs/sdk/common/variables/SkinSelectorTypes)

## Functions

- [runExecutorCleanup](/docs/sdk/common/functions/runExecutorCleanup)

---

# Interface: ComponentAccess

Source: /docs/sdk/common/interfaces/ComponentAccess

Defined in: [common/index.ts:289](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L289)

## Properties

### marketplace?

> `optional` **marketplace**: `object`

Defined in: [common/index.ts:294](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L294)

#### contactEmail

> **contactEmail**: `string`

#### deadline

> **deadline**: `string`

#### description

> **description**: `string`

#### status

> **status**: `"closed"` \| `"draft"` \| `"submitted"` \| `"claimed"`

***

### unlisted?

> `optional` **unlisted**: `object`

Defined in: [common/index.ts:291](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L291)

#### slug

> **slug**: `string`

***

### visibility

> **visibility**: `"private"` \| `"unlisted"` \| `"public"`

Defined in: [common/index.ts:290](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L290)

---

# Interface: IABExperience

Source: /docs/sdk/common/interfaces/IABExperience

Defined in: [common/index.ts:447](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L447)

## Extends

- [`IExperience`](/docs/sdk/common/interfaces/IExperience)

## Properties

### description

> **description**: `string`

Defined in: [common/index.ts:434](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L434)

#### Inherited from

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`description`](/docs/sdk/common/interfaces/IExperience#description)

***

### experiences

> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]

Defined in: [common/index.ts:450](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L450)

#### Overrides

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`experiences`](/docs/sdk/common/interfaces/IExperience#experiences)

***

### id

> **id**: `string`

Defined in: [common/index.ts:432](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L432)

#### Inherited from

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`id`](/docs/sdk/common/interfaces/IExperience#id)

***

### name

> **name**: `string`

Defined in: [common/index.ts:433](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L433)

#### Inherited from

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`name`](/docs/sdk/common/interfaces/IExperience#name)

***

### percentage

> **percentage**: `number`

Defined in: [common/index.ts:451](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L451)

***

### type

> **type**: `"AB"`

Defined in: [common/index.ts:448](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L448)

#### Overrides

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`type`](/docs/sdk/common/interfaces/IExperience#type)

---

# Interface: IBindMessagePropConfig

Source: /docs/sdk/common/interfaces/IBindMessagePropConfig

Defined in: [common/index.ts:124](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L124)

## Extends

- [`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)

## Properties

### behavior

> **behavior**: [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)

Defined in: [common/index.ts:165](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L165)

#### Inherited from

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`behavior`](/docs/sdk/common/interfaces/IPropConfig#behavior)

***

### description

> **description**: `string`

Defined in: [common/index.ts:163](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L163)

#### Inherited from

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`description`](/docs/sdk/common/interfaces/IPropConfig#description)

***

### id

> **id**: `string`

Defined in: [common/index.ts:161](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L161)

#### Inherited from

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`id`](/docs/sdk/common/interfaces/IPropConfig#id)

***

### messageType

> **messageType**: `MyopMessageKey`

Defined in: [common/index.ts:126](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L126)

***

### name

> **name**: `string`

Defined in: [common/index.ts:162](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L162)

#### Inherited from

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`name`](/docs/sdk/common/interfaces/IPropConfig#name)

***

### type

> **type**: `string`

Defined in: [common/index.ts:125](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L125)

#### Overrides

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`type`](/docs/sdk/common/interfaces/IPropConfig#type)

---

# Interface: ICodeRefBehavior

Source: /docs/sdk/common/interfaces/ICodeRefBehavior

Defined in: [common/index.ts:191](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L191)

## Extends

- [`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior)

## Properties

### type

> **type**: `"code"`

Defined in: [common/index.ts:192](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L192)

#### Overrides

[`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior).[`type`](/docs/sdk/common/interfaces/IRefBehavior#type)

---

# Interface: IComponentConfig

Source: /docs/sdk/common/interfaces/IComponentConfig

Defined in: [common/index.ts:477](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L477)

## Properties

### instance

> **instance**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)

Defined in: [common/index.ts:478](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L478)

***

### name

> **name**: `string`

Defined in: [common/index.ts:482](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L482)

***

### type

> **type**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

Defined in: [common/index.ts:479](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L479)

---

# Interface: IComponentDefinitionConfig

Source: /docs/sdk/common/interfaces/IComponentDefinitionConfig

Defined in: [common/index.ts:256](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L256)

## Properties

### createdBy?

> `optional` **createdBy**: `string`

Defined in: [common/index.ts:273](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L273)

***

### createdOn?

> `optional` **createdOn**: `string`

Defined in: [common/index.ts:272](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L272)

***

### defaultSkin

> **defaultSkin**: `number`

Defined in: [common/index.ts:266](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L266)

***

### description

> **description**: `string`

Defined in: [common/index.ts:259](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L259)

***

### id

> **id**: `string`

Defined in: [common/index.ts:257](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L257)

***

### name

> **name**: `string`

Defined in: [common/index.ts:258](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L258)

***

### props

> **props**: [`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)[]

Defined in: [common/index.ts:263](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L263)

***

### refs

> **refs**: [`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)[]

Defined in: [common/index.ts:264](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L264)

***

### skins

> **skins**: [`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)[]

Defined in: [common/index.ts:265](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L265)

***

### updatedBy?

> `optional` **updatedBy**: `string`

Defined in: [common/index.ts:274](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L274)

---

# Interface: IComponentInstanceConfig

Source: /docs/sdk/common/interfaces/IComponentInstanceConfig

Defined in: [common/index.ts:403](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L403)

## Properties

### componentId

> **componentId**: `string`

Defined in: [common/index.ts:405](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L405)

***

### componentName

> **componentName**: `string`

Defined in: [common/index.ts:411](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L411)

***

### id

> **id**: `string`

Defined in: [common/index.ts:404](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L404)

***

### nestedComponents?

> `optional` **nestedComponents**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)[]

Defined in: [common/index.ts:416](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L416)

***

### resolvedExperiences?

> `optional` **resolvedExperiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]

Defined in: [common/index.ts:420](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L420)

***

### resolvedNestedComponents?

> `optional` **resolvedNestedComponents**: [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)[]

Defined in: [common/index.ts:422](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L422)

***

### skinSelector

> **skinSelector**: [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)

Defined in: [common/index.ts:413](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L413)

---

# Interface: IComponentRefBehavior

Source: /docs/sdk/common/interfaces/IComponentRefBehavior

Defined in: [common/index.ts:180](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L180)

## Extends

- [`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior)

## Properties

### componentId

> **componentId**: `string`

Defined in: [common/index.ts:182](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L182)

***

### ~~instance~~

> **instance**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)

Defined in: [common/index.ts:188](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L188)

#### Deprecated

Property instance is deprecated and will be removed in future versions.

***

### type

> **type**: `"component"`

Defined in: [common/index.ts:181](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L181)

#### Overrides

[`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior).[`type`](/docs/sdk/common/interfaces/IRefBehavior#type)

---

# Interface: IDateRange

Source: /docs/sdk/common/interfaces/IDateRange

Defined in: [common/index.ts:454](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L454)

## Properties

### end

> **end**: `Date`

Defined in: [common/index.ts:457](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L457)

***

### id

> **id**: `string`

Defined in: [common/index.ts:455](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L455)

***

### start

> **start**: `Date`

Defined in: [common/index.ts:456](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L456)

***

### timezone

> **timezone**: `string`

Defined in: [common/index.ts:458](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L458)

---

# Interface: IDedicatedSkinConfig

Source: /docs/sdk/common/interfaces/IDedicatedSkinConfig

Defined in: [common/index.ts:389](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L389)

## Extends

- [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)

## Properties

### skin

> **skin**: [`ISkinInstanceConfig`](/docs/sdk/common/interfaces/ISkinInstanceConfig)

Defined in: [common/index.ts:400](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L400)

***

### ~~skins?~~

> `optional` **skins**: [`ISkinInstanceConfig`](/docs/sdk/common/interfaces/ISkinInstanceConfig)[]

Defined in: [common/index.ts:399](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L399)

#### Deprecated

Use [skin](/docs/sdk/common/interfaces/IDedicatedSkinConfig#skin) instead.
Property skins is deprecated and will be removed in future versions.
Please update your code to use [skin](/docs/sdk/common/interfaces/IDedicatedSkinConfig#skin) for better compatibility.

***

### type

> **type**: `"Dedicated"`

Defined in: [common/index.ts:390](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L390)

#### Overrides

[`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig).[`type`](/docs/sdk/common/interfaces/ISkinSelectorConfig#type)

---

# Interface: IDefaultSkinConfig

Source: /docs/sdk/common/interfaces/IDefaultSkinConfig

Defined in: [common/index.ts:380](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L380)

This Skin Config Type is not yet supported but will be added in a future release.
Please check the documentation for updates.

## Extends

- [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)

## Properties

### type

> **type**: `"Default"`

Defined in: [common/index.ts:381](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L381)

#### Overrides

[`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig).[`type`](/docs/sdk/common/interfaces/ISkinSelectorConfig#type)

---

# Interface: IElementRef

Source: /docs/sdk/common/interfaces/IElementRef

Defined in: [common/MyopElementRef.ts:1](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L1)

## Properties

### BoundingRect?

> `optional` **BoundingRect**: `DOMRect`

Defined in: [common/MyopElementRef.ts:4](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L4)

***

### htmlTagName

> **htmlTagName**: `string`

Defined in: [common/MyopElementRef.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L3)

***

### myopId?

> `optional` **myopId**: `string`

Defined in: [common/MyopElementRef.ts:2](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L2)

***

### offsetLeft?

> `optional` **offsetLeft**: `number`

Defined in: [common/MyopElementRef.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L6)

***

### offsetTop?

> `optional` **offsetTop**: `number`

Defined in: [common/MyopElementRef.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L5)

***

### type

> **type**: `string`

Defined in: [common/MyopElementRef.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L8)

---

# Interface: IExperience

Source: /docs/sdk/common/interfaces/IExperience

Defined in: [common/index.ts:431](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L431)

## Extended by

- [`IABExperience`](/docs/sdk/common/interfaces/IABExperience)
- [`ISegmentExperience`](/docs/sdk/common/interfaces/ISegmentExperience)

## Properties

### description

> **description**: `string`

Defined in: [common/index.ts:434](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L434)

***

### experiences

> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]

Defined in: [common/index.ts:436](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L436)

***

### id

> **id**: `string`

Defined in: [common/index.ts:432](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L432)

***

### name

> **name**: `string`

Defined in: [common/index.ts:433](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L433)

***

### type

> **type**: `"Segment"` \| `"Promo"` \| `"AB"`

Defined in: [common/index.ts:435](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L435)

---

# Interface: IExperienceABSplit

Source: /docs/sdk/common/interfaces/IExperienceABSplit

Defined in: [common/index.ts:224](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L224)

Experience A/B split configuration

## Properties

### versions

> **versions**: [`IExperienceABSplitVersion`](/docs/sdk/common/interfaces/IExperienceABSplitVersion)[]

Defined in: [common/index.ts:225](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L225)

---

# Interface: IExperienceABSplitVersion

Source: /docs/sdk/common/interfaces/IExperienceABSplitVersion

Defined in: [common/index.ts:216](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L216)

Experience A/B split version

## Properties

### id

> **id**: `string`

Defined in: [common/index.ts:217](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L217)

***

### percentage

> **percentage**: `number`

Defined in: [common/index.ts:218](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L218)

---

# Interface: IExperienceDefinitionConfig

Source: /docs/sdk/common/interfaces/IExperienceDefinitionConfig

Defined in: [common/index.ts:245](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L245)

Experience definition config (v2)

## Extends

- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)

## Properties

### components

> **components**: `string`[]

Defined in: [common/index.ts:247](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L247)

Selected component IDs

***

### description

> **description**: `string`

Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`description`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#description)

***

### fallback

> **fallback**: `Record`\<`string`, `string`\>

Defined in: [common/index.ts:251](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L251)

Fallback variant per component

***

### id

> **id**: `string`

Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`id`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#id)

***

### name

> **name**: `string`

Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`name`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#name)

***

### segments

> **segments**: [`IExperienceSegment`](/docs/sdk/common/interfaces/IExperienceSegment)[]

Defined in: [common/index.ts:249](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L249)

Segment configurations

***

### tags

> **tags**: `string`[]

Defined in: [common/index.ts:253](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L253)

Tags

***

### updatedBy?

> `optional` **updatedBy**: `string`

Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedBy`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedby)

***

### updatedOn?

> `optional` **updatedOn**: `string`

Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedOn`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedon)

---

# Interface: IExperienceSegment

Source: /docs/sdk/common/interfaces/IExperienceSegment

Defined in: [common/index.ts:231](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L231)

Experience segment configuration

## Properties

### abSplit?

> `optional` **abSplit**: [`IExperienceABSplit`](/docs/sdk/common/interfaces/IExperienceABSplit)

Defined in: [common/index.ts:238](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L238)

***

### componentVariants

> **componentVariants**: `Record`\<`string`, `string` \| `Record`\<`string`, `string`\>\>

Defined in: [common/index.ts:237](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L237)

***

### description

> **description**: `string`

Defined in: [common/index.ts:234](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L234)

***

### id

> **id**: `string`

Defined in: [common/index.ts:232](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L232)

***

### name

> **name**: `string`

Defined in: [common/index.ts:233](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L233)

***

### rules

> **rules**: [`IExperienceSegmentRule`](/docs/sdk/common/interfaces/IExperienceSegmentRule)[]

Defined in: [common/index.ts:235](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L235)

***

### stickyProperties?

> `optional` **stickyProperties**: `string`[]

Defined in: [common/index.ts:239](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L239)

***

### useAb

> **useAb**: `boolean`

Defined in: [common/index.ts:236](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L236)

---

# Interface: IExperienceSegmentRule

Source: /docs/sdk/common/interfaces/IExperienceSegmentRule

Defined in: [common/index.ts:207](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L207)

Experience segment rule

## Properties

### operator

> **operator**: `string`

Defined in: [common/index.ts:209](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L209)

***

### property

> **property**: `string`

Defined in: [common/index.ts:208](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L208)

***

### value

> **value**: `string`

Defined in: [common/index.ts:210](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L210)

---

# Interface: IFunctionResultsSegment

Source: /docs/sdk/common/interfaces/IFunctionResultsSegment

Defined in: [common/index.ts:352](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L352)

## Extends

- [`ISegmentDefinition`](/docs/sdk/common/interfaces/ISegmentDefinition)

## Properties

### description

> **description**: `string`

Defined in: [common/index.ts:356](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L356)

***

### function

> **function**: `string`

Defined in: [common/index.ts:357](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L357)

***

### id

> **id**: `string`

Defined in: [common/index.ts:353](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L353)

#### Overrides

[`ISegmentDefinition`](/docs/sdk/common/interfaces/ISegmentDefinition).[`id`](/docs/sdk/common/interfaces/ISegmentDefinition#id)

***

### name

> **name**: `string`

Defined in: [common/index.ts:355](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L355)

***

### type

> **type**: `"FunctionResult"`

Defined in: [common/index.ts:354](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L354)

#### Overrides

[`ISegmentDefinition`](/docs/sdk/common/interfaces/ISegmentDefinition).[`type`](/docs/sdk/common/interfaces/ISegmentDefinition#type)

---

# Interface: IHTMLLoaderConfig

Source: /docs/sdk/common/interfaces/IHTMLLoaderConfig

Defined in: [common/index.ts:54](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L54)

## Extends

- [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### autoHeight?

> `optional` **autoHeight**: `boolean`

Defined in: [common/index.ts:59](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L59)

***

### height?

> `optional` **height**: `string`

Defined in: [common/index.ts:60](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L60)

***

### HTML

> **HTML**: `string`

Defined in: [common/index.ts:56](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L56)

***

### shadowRootMode?

> `optional` **shadowRootMode**: `"open"` \| `"closed"` \| `"none"` \| `"localFrame"`

Defined in: [common/index.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L58)

***

### type

> **type**: `"HTMLLoader"`

Defined in: [common/index.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L55)

#### Overrides

[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig).[`type`](/docs/sdk/common/interfaces/ISkinLoaderConfig#type)

***

### width?

> `optional` **width**: `string`

Defined in: [common/index.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L61)

---

# Interface: IIframeLoaderConfig

Source: /docs/sdk/common/interfaces/IIframeLoaderConfig

Defined in: [common/index.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L38)

## Extends

- [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### autoHeight

> **autoHeight**: `boolean`

Defined in: [common/index.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L41)

***

### height?

> `optional` **height**: `string`

Defined in: [common/index.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L42)

***

### type

> **type**: `"IframeLoader"`

Defined in: [common/index.ts:39](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L39)

#### Overrides

[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig).[`type`](/docs/sdk/common/interfaces/ISkinLoaderConfig#type)

***

### url

> **url**: `string`

Defined in: [common/index.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L40)

***

### width?

> `optional` **width**: `string`

Defined in: [common/index.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L43)

---

# Interface: IMessagePropConfig

Source: /docs/sdk/common/interfaces/IMessagePropConfig

Defined in: [common/index.ts:119](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L119)

## Extends

- [`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)

## Properties

### behavior

> **behavior**: [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)

Defined in: [common/index.ts:165](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L165)

#### Inherited from

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`behavior`](/docs/sdk/common/interfaces/IPropConfig#behavior)

***

### description

> **description**: `string`

Defined in: [common/index.ts:163](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L163)

#### Inherited from

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`description`](/docs/sdk/common/interfaces/IPropConfig#description)

***

### id

> **id**: `string`

Defined in: [common/index.ts:161](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L161)

#### Inherited from

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`id`](/docs/sdk/common/interfaces/IPropConfig#id)

***

### messageType

> **messageType**: `MyopMessageKey`

Defined in: [common/index.ts:121](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L121)

***

### name

> **name**: `string`

Defined in: [common/index.ts:162](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L162)

#### Inherited from

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`name`](/docs/sdk/common/interfaces/IPropConfig#name)

***

### type

> **type**: `string`

Defined in: [common/index.ts:120](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L120)

#### Overrides

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`type`](/docs/sdk/common/interfaces/IPropConfig#type)

---

# Interface: IMinimizedLoaderConfig

Source: /docs/sdk/common/interfaces/IMinimizedLoaderConfig

Defined in: [common/index.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L65)

## Extends

- [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### type

> **type**: `"MinimizedLoader"`

Defined in: [common/index.ts:66](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L66)

#### Overrides

[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig).[`type`](/docs/sdk/common/interfaces/ISkinLoaderConfig#type)

---

# Interface: IMyopSDK

Source: /docs/sdk/common/interfaces/IMyopSDK

Defined in: [common/BaseMyopSDK.ts:25](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L25)

## Properties

### components

> **components**: `Record`\<`string`, [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\>

Defined in: [common/BaseMyopSDK.ts:34](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L34)

***

### handleIncomeMessages()

> **handleIncomeMessages**: (`message`) => `void`

Defined in: [common/BaseMyopSDK.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L32)

#### Parameters

##### message

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`void`

***

### init()

> **init**: () => `void`

Defined in: [common/BaseMyopSDK.ts:26](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L26)

#### Returns

`void`

***

### messageToHost()

> **messageToHost**: (`message`, `replayTo`?) => `void`

Defined in: [common/BaseMyopSDK.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L28)

#### Parameters

##### message

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

##### replayTo?

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)

#### Returns

`void`

***

### supportedHandlers

> **supportedHandlers**: [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)[]

Defined in: [common/BaseMyopSDK.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L30)

---

# Interface: IPropBehavior

Source: /docs/sdk/common/interfaces/IPropBehavior

Defined in: [common/index.ts:143](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L143)

## Extended by

- [`IPropCodeBehavior`](/docs/sdk/common/interfaces/IPropCodeBehavior)
- [`IPropMessageBehavior`](/docs/sdk/common/interfaces/IPropMessageBehavior)

## Properties

### type

> **type**: `"message"` \| `"code"`

Defined in: [common/index.ts:144](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L144)

---

# Interface: IPropCodeBehavior

Source: /docs/sdk/common/interfaces/IPropCodeBehavior

Defined in: [common/index.ts:147](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L147)

## Extends

- [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)

## Properties

### remap?

> `optional` **remap**: `string`

Defined in: [common/index.ts:149](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L149)

***

### type

> **type**: `"code"`

Defined in: [common/index.ts:148](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L148)

#### Overrides

[`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior).[`type`](/docs/sdk/common/interfaces/IPropBehavior#type)

---

# Interface: IPropConfig

Source: /docs/sdk/common/interfaces/IPropConfig

Defined in: [common/index.ts:160](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L160)

## Extended by

- [`IMessagePropConfig`](/docs/sdk/common/interfaces/IMessagePropConfig)
- [`IBindMessagePropConfig`](/docs/sdk/common/interfaces/IBindMessagePropConfig)

## Properties

### behavior

> **behavior**: [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)

Defined in: [common/index.ts:165](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L165)

***

### description

> **description**: `string`

Defined in: [common/index.ts:163](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L163)

***

### id

> **id**: `string`

Defined in: [common/index.ts:161](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L161)

***

### name

> **name**: `string`

Defined in: [common/index.ts:162](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L162)

***

### type

> **type**: `string`

Defined in: [common/index.ts:164](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L164)

---

# Interface: IPropMessageBehavior

Source: /docs/sdk/common/interfaces/IPropMessageBehavior

Defined in: [common/index.ts:152](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L152)

## Extends

- [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)

## Properties

### message

> **message**: `MyopMessageKey`

Defined in: [common/index.ts:154](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L154)

***

### mode

> **mode**: `"input"` \| `"output"`

Defined in: [common/index.ts:157](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L157)

***

### params

> **params**: [`IPropMessageBehaviorParam`](/docs/sdk/common/interfaces/IPropMessageBehaviorParam)[]

Defined in: [common/index.ts:156](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L156)

***

### ref

> **ref**: `string`

Defined in: [common/index.ts:155](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L155)

***

### type

> **type**: `"message"`

Defined in: [common/index.ts:153](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L153)

#### Overrides

[`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior).[`type`](/docs/sdk/common/interfaces/IPropBehavior#type)

---

# Interface: IPropMessageBehaviorParam

Source: /docs/sdk/common/interfaces/IPropMessageBehaviorParam

Defined in: [common/index.ts:139](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L139)

## Properties

### value

> **value**: `string`

Defined in: [common/index.ts:140](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L140)

---

# Interface: IRefBehavior

Source: /docs/sdk/common/interfaces/IRefBehavior

Defined in: [common/index.ts:176](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L176)

## Extended by

- [`IComponentRefBehavior`](/docs/sdk/common/interfaces/IComponentRefBehavior)
- [`ICodeRefBehavior`](/docs/sdk/common/interfaces/ICodeRefBehavior)

## Properties

### type

> **type**: [`IRefBehaviorType`](/docs/sdk/common/type-aliases/IRefBehaviorType)

Defined in: [common/index.ts:177](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L177)

---

# Interface: IRefConfig

Source: /docs/sdk/common/interfaces/IRefConfig

Defined in: [common/index.ts:195](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L195)

## Properties

### behavior

> **behavior**: [`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior)

Defined in: [common/index.ts:201](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L201)

***

### description

> **description**: `string`

Defined in: [common/index.ts:198](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L198)

***

### id

> **id**: `string`

Defined in: [common/index.ts:196](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L196)

***

### name

> **name**: `string`

Defined in: [common/index.ts:197](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L197)

***

### selector

> **selector**: `string`

Defined in: [common/index.ts:200](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L200)

***

### selectorType

> **selectorType**: `string`

Defined in: [common/index.ts:199](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L199)

---

# Interface: ISegmentDefinition

Source: /docs/sdk/common/interfaces/ISegmentDefinition

Defined in: [common/index.ts:347](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L347)

## Extended by

- [`IFunctionResultsSegment`](/docs/sdk/common/interfaces/IFunctionResultsSegment)

## Properties

### id

> **id**: `string`

Defined in: [common/index.ts:348](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L348)

***

### type

> **type**: `"FunctionResult"`

Defined in: [common/index.ts:349](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L349)

---

# Interface: ISegmentExperience

Source: /docs/sdk/common/interfaces/ISegmentExperience

Defined in: [common/index.ts:461](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L461)

## Extends

- [`IExperience`](/docs/sdk/common/interfaces/IExperience)

## Properties

### dateRange?

> `optional` **dateRange**: [`IDateRange`](/docs/sdk/common/interfaces/IDateRange)

Defined in: [common/index.ts:464](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L464)

***

### description

> **description**: `string`

Defined in: [common/index.ts:434](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L434)

#### Inherited from

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`description`](/docs/sdk/common/interfaces/IExperience#description)

***

### experiences

> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]

Defined in: [common/index.ts:436](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L436)

#### Inherited from

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`experiences`](/docs/sdk/common/interfaces/IExperience#experiences)

***

### id

> **id**: `string`

Defined in: [common/index.ts:432](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L432)

#### Inherited from

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`id`](/docs/sdk/common/interfaces/IExperience#id)

***

### name

> **name**: `string`

Defined in: [common/index.ts:433](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L433)

#### Inherited from

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`name`](/docs/sdk/common/interfaces/IExperience#name)

***

### segment

> **segment**: [`ISegmentDefinition`](/docs/sdk/common/interfaces/ISegmentDefinition)

Defined in: [common/index.ts:463](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L463)

***

### type

> **type**: `"Segment"` \| `"Promo"` \| `"AB"`

Defined in: [common/index.ts:462](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L462)

#### Overrides

[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`type`](/docs/sdk/common/interfaces/IExperience#type)

---

# Interface: ISegmentInstance

Source: /docs/sdk/common/interfaces/ISegmentInstance

Defined in: [common/index.ts:342](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L342)

## Properties

### segmentId

> **segmentId**: `string`

Defined in: [common/index.ts:343](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L343)

***

### skinSelector

> **skinSelector**: [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)

Defined in: [common/index.ts:344](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L344)

---

# Interface: ISegmentedSkinConfig

Source: /docs/sdk/common/interfaces/ISegmentedSkinConfig

Defined in: [common/index.ts:384](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L384)

## Extends

- [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)

## Properties

### segments

> **segments**: [`ISegmentInstance`](/docs/sdk/common/interfaces/ISegmentInstance)[]

Defined in: [common/index.ts:386](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L386)

***

### type

> **type**: `"Segmented"`

Defined in: [common/index.ts:385](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L385)

#### Overrides

[`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig).[`type`](/docs/sdk/common/interfaces/ISkinSelectorConfig#type)

---

# Interface: ISkinConfig

Source: /docs/sdk/common/interfaces/ISkinConfig

Defined in: [common/index.ts:106](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L106)

## Extended by

- [`v2_ISkinConfig`](/docs/sdk/common/interfaces/v2_ISkinConfig)

## Properties

### createdBy?

> `optional` **createdBy**: `string`

Defined in: [common/index.ts:111](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L111)

***

### createdOn?

> `optional` **createdOn**: `string`

Defined in: [common/index.ts:112](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L112)

***

### description

> **description**: `string`

Defined in: [common/index.ts:109](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L109)

***

### id

> **id**: `string`

Defined in: [common/index.ts:107](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L107)

***

### loader

> **loader**: [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

Defined in: [common/index.ts:110](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L110)

***

### name

> **name**: `string`

Defined in: [common/index.ts:108](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L108)

---

# Interface: ISkinInstanceConfig

Source: /docs/sdk/common/interfaces/ISkinInstanceConfig

Defined in: [common/index.ts:329](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L329)

## Properties

### id

> **id**: `string`

Defined in: [common/index.ts:330](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L330)

---

# Interface: ISkinLoaderConfig

Source: /docs/sdk/common/interfaces/ISkinLoaderConfig

Defined in: [common/index.ts:85](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L85)

## Extended by

- [`IWebComponentLoaderConfig`](/docs/sdk/common/interfaces/IWebComponentLoaderConfig)
- [`IIframeLoaderConfig`](/docs/sdk/common/interfaces/IIframeLoaderConfig)
- [`IHTMLLoaderConfig`](/docs/sdk/common/interfaces/IHTMLLoaderConfig)
- [`IMinimizedLoaderConfig`](/docs/sdk/common/interfaces/IMinimizedLoaderConfig)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### type

> **type**: `"IframeLoader"` \| `"WebComponentLoader"` \| `"HTMLLoader"` \| `"MinimizedLoader"`

Defined in: [common/index.ts:86](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L86)

---

# Interface: ISkinSelectorConfig

Source: /docs/sdk/common/interfaces/ISkinSelectorConfig

Defined in: [common/index.ts:333](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L333)

## Extended by

- [`IDefaultSkinConfig`](/docs/sdk/common/interfaces/IDefaultSkinConfig)
- [`ISegmentedSkinConfig`](/docs/sdk/common/interfaces/ISegmentedSkinConfig)
- [`IDedicatedSkinConfig`](/docs/sdk/common/interfaces/IDedicatedSkinConfig)

## Properties

### type

> **type**: `"Segmented"` \| `"Dedicated"` \| `"Default"`

Defined in: [common/index.ts:334](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L334)

---

# Interface: IUserFlow

Source: /docs/sdk/common/interfaces/IUserFlow

Defined in: [common/index.ts:489](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L489)

## Extends

- `Omit`\<[`IUserFlowDefinition`](/docs/sdk/common/interfaces/IUserFlowDefinition), `"components"`\>.`IBranchable`

## Properties

### branch?

> `optional` **branch**: `string`

Defined in: [common/index.ts:474](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L474)

#### Inherited from

`Omit.branch`

***

### components

> **components**: [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)[]

Defined in: [common/index.ts:490](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L490)

***

### description

> **description**: `string`

Defined in: [common/index.ts:470](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L470)

#### Inherited from

`Omit.description`

***

### experiences

> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]

Defined in: [common/index.ts:473](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L473)

#### Inherited from

`Omit.experiences`

***

### id

> **id**: `string`

Defined in: [common/index.ts:468](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L468)

#### Inherited from

`Omit.id`

***

### name

> **name**: `string`

Defined in: [common/index.ts:469](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L469)

#### Inherited from

`Omit.name`

***

### origins

> **origins**: `string`[]

Defined in: [common/index.ts:472](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L472)

#### Inherited from

`Omit.origins`

---

# Interface: IUserFlowDefinition

Source: /docs/sdk/common/interfaces/IUserFlowDefinition

Defined in: [common/index.ts:467](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L467)

## Properties

### branch?

> `optional` **branch**: `string`

Defined in: [common/index.ts:474](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L474)

***

### components

> **components**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)[]

Defined in: [common/index.ts:471](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L471)

***

### description

> **description**: `string`

Defined in: [common/index.ts:470](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L470)

***

### experiences

> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]

Defined in: [common/index.ts:473](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L473)

***

### id

> **id**: `string`

Defined in: [common/index.ts:468](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L468)

***

### name

> **name**: `string`

Defined in: [common/index.ts:469](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L469)

***

### origins

> **origins**: `string`[]

Defined in: [common/index.ts:472](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L472)

---

# Interface: IWebComponentLoaderConfig

Source: /docs/sdk/common/interfaces/IWebComponentLoaderConfig

Defined in: [common/index.ts:31](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L31)

## Extends

- [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

## Indexable

\[`key`: `string`\]: `any`

## Properties

### framework?

> `optional` **framework**: `"react"` \| `"vue"` \| `"angular"`

Defined in: [common/index.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L35)

***

### tag

> **tag**: `string`

Defined in: [common/index.ts:34](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L34)

***

### type

> **type**: `"WebComponentLoader"`

Defined in: [common/index.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L32)

#### Overrides

[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig).[`type`](/docs/sdk/common/interfaces/ISkinLoaderConfig#type)

***

### url

> **url**: `string`

Defined in: [common/index.ts:33](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L33)

---

# Interface: v2\_IBaseMyopObject

Source: /docs/sdk/common/interfaces/v2_IBaseMyopObject

Defined in: [common/index.ts:278](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L278)

## Extended by

- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)

## Properties

### description

> **description**: `string`

Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)

***

### id

> **id**: `string`

Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)

***

### name

> **name**: `string`

Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)

---

# Interface: v2\_IComponentDefinitionConfig

Source: /docs/sdk/common/interfaces/v2_IComponentDefinitionConfig

Defined in: [common/index.ts:302](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L302)

## Extends

- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)

## Properties

### access?

> `optional` **access**: [`ComponentAccess`](/docs/sdk/common/interfaces/ComponentAccess)

Defined in: [common/index.ts:306](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L306)

***

### description

> **description**: `string`

Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`description`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#description)

***

### DTOs

> **DTOs**: [`v2_IDTO`](/docs/sdk/common/interfaces/v2_IDTO)[]

Defined in: [common/index.ts:304](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L304)

***

### extra?

> `optional` **extra**: `object`

Defined in: [common/index.ts:319](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L319)

#### firstVariant

> **firstVariant**: [`v2_IVariantConfig`](/docs/sdk/common/interfaces/v2_IVariantConfig)

***

### id

> **id**: `string`

Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`id`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#id)

***

### name

> **name**: `string`

Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`name`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#name)

***

### preview\_variant

> **preview\_variant**: [`v2_IVariantConfig`](/docs/sdk/common/interfaces/v2_IVariantConfig)

Defined in: [common/index.ts:318](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L318)

***

### tags

> **tags**: `string`[]

Defined in: [common/index.ts:305](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L305)

***

### updatedBy?

> `optional` **updatedBy**: `string`

Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedBy`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedby)

***

### updatedOn?

> `optional` **updatedOn**: `string`

Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedOn`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedon)

***

### variants\_data

> **variants\_data**: `object`[]

Defined in: [common/index.ts:310](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L310)

#### has\_releases?

> `optional` **has\_releases**: `boolean`

#### id

> **id**: `string`

#### name

> **name**: `string`

#### updatedBy?

> `optional` **updatedBy**: `string`

#### updatedOn?

> `optional` **updatedOn**: `string`

***

### variants\_ids

> **variants\_ids**: `string`[]

Defined in: [common/index.ts:303](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L303)

***

### variants\_names

> **variants\_names**: `string`[]

Defined in: [common/index.ts:309](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L309)

---

# Interface: v2\_IDTO

Source: /docs/sdk/common/interfaces/v2_IDTO

Defined in: [common/index.ts:324](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L324)

## Extends

- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)

## Properties

### data

> **data**: `object`

Defined in: [common/index.ts:325](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L325)

***

### description

> **description**: `string`

Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`description`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#description)

***

### id

> **id**: `string`

Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`id`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#id)

***

### methodName

> **methodName**: `string`

Defined in: [common/index.ts:326](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L326)

***

### name

> **name**: `string`

Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`name`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#name)

***

### updatedBy?

> `optional` **updatedBy**: `string`

Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedBy`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedby)

***

### updatedOn?

> `optional` **updatedOn**: `string`

Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedOn`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedon)

---

# Interface: v2\_IMyopStoredObject

Source: /docs/sdk/common/interfaces/v2_IMyopStoredObject

Defined in: [common/index.ts:284](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L284)

## Extends

- [`v2_IBaseMyopObject`](/docs/sdk/common/interfaces/v2_IBaseMyopObject)

## Extended by

- [`v2_IVariantConfig`](/docs/sdk/common/interfaces/v2_IVariantConfig)
- [`IExperienceDefinitionConfig`](/docs/sdk/common/interfaces/IExperienceDefinitionConfig)
- [`v2_IComponentDefinitionConfig`](/docs/sdk/common/interfaces/v2_IComponentDefinitionConfig)
- [`v2_IDTO`](/docs/sdk/common/interfaces/v2_IDTO)

## Properties

### description

> **description**: `string`

Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)

#### Inherited from

[`v2_IBaseMyopObject`](/docs/sdk/common/interfaces/v2_IBaseMyopObject).[`description`](/docs/sdk/common/interfaces/v2_IBaseMyopObject#description)

***

### id

> **id**: `string`

Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)

#### Inherited from

[`v2_IBaseMyopObject`](/docs/sdk/common/interfaces/v2_IBaseMyopObject).[`id`](/docs/sdk/common/interfaces/v2_IBaseMyopObject#id)

***

### name

> **name**: `string`

Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)

#### Inherited from

[`v2_IBaseMyopObject`](/docs/sdk/common/interfaces/v2_IBaseMyopObject).[`name`](/docs/sdk/common/interfaces/v2_IBaseMyopObject#name)

***

### updatedBy?

> `optional` **updatedBy**: `string`

Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)

***

### updatedOn?

> `optional` **updatedOn**: `string`

Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)

---

# Interface: v2\_IReleaseMetadata

Source: /docs/sdk/common/interfaces/v2_IReleaseMetadata

Defined in: [common/index.ts:91](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L91)

## Properties

### environmentId

> **environmentId**: `string`

Defined in: [common/index.ts:92](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L92)

***

### environmentIdentifier

> **environmentIdentifier**: `string`

Defined in: [common/index.ts:93](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L93)

---

# Interface: v2\_ISkinConfig

Source: /docs/sdk/common/interfaces/v2_ISkinConfig

Defined in: [common/index.ts:115](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L115)

## Extends

- [`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

## Properties

### componentId

> **componentId**: `string`

Defined in: [common/index.ts:116](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L116)

***

### createdBy?

> `optional` **createdBy**: `string`

Defined in: [common/index.ts:111](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L111)

#### Inherited from

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`createdBy`](/docs/sdk/common/interfaces/ISkinConfig#createdby)

***

### createdOn?

> `optional` **createdOn**: `string`

Defined in: [common/index.ts:112](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L112)

#### Inherited from

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`createdOn`](/docs/sdk/common/interfaces/ISkinConfig#createdon)

***

### description

> **description**: `string`

Defined in: [common/index.ts:109](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L109)

#### Inherited from

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`description`](/docs/sdk/common/interfaces/ISkinConfig#description)

***

### id

> **id**: `string`

Defined in: [common/index.ts:107](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L107)

#### Inherited from

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`id`](/docs/sdk/common/interfaces/ISkinConfig#id)

***

### loader

> **loader**: [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

Defined in: [common/index.ts:110](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L110)

#### Inherited from

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`loader`](/docs/sdk/common/interfaces/ISkinConfig#loader)

***

### name

> **name**: `string`

Defined in: [common/index.ts:108](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L108)

#### Inherited from

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`name`](/docs/sdk/common/interfaces/ISkinConfig#name)

---

# Interface: v2\_IVariantConfig

Source: /docs/sdk/common/interfaces/v2_IVariantConfig

Defined in: [common/index.ts:99](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L99)

## Extends

- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)

## Properties

### componentId

> **componentId**: `string`

Defined in: [common/index.ts:101](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L101)

***

### description

> **description**: `string`

Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`description`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#description)

***

### id

> **id**: `string`

Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`id`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#id)

***

### loader

> **loader**: [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

Defined in: [common/index.ts:100](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L100)

***

### name

> **name**: `string`

Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`name`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#name)

***

### releases?

> `optional` **releases**: [`v2_IReleaseMetadata`](/docs/sdk/common/interfaces/v2_IReleaseMetadata)[]

Defined in: [common/index.ts:103](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L103)

***

### updatedBy?

> `optional` **updatedBy**: `string`

Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedBy`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedby)

***

### updatedOn?

> `optional` **updatedOn**: `string`

Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)

#### Inherited from

[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedOn`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedon)

---

# Type Alias: CleanupHandler()

Source: /docs/sdk/common/type-aliases/CleanupHandler

> **CleanupHandler**: () => `void`

Defined in: [common/index.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L7)

## Returns

`void`

---

# Type Alias: Dictionary\<T\>

Source: /docs/sdk/common/type-aliases/Dictionary

> **Dictionary**\<`T`\>: `object`

Defined in: [common/index.ts:9](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L9)

## Type Parameters

• **T**

## Index Signature

\[`key`: `string`\]: `T`

---

# Type Alias: IDashboard\<T\>

Source: /docs/sdk/common/type-aliases/IDashboard

> **IDashboard**\<`T`\>: `ExtendRecursively`\<`T`, `DashboardObject`\>

Defined in: [common/index.ts:83](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L83)

## Type Parameters

• **T**

---

# Type Alias: IMessageExecutorCleanup

Source: /docs/sdk/common/type-aliases/IMessageExecutorCleanup

> **IMessageExecutorCleanup**: [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler) \| `Promise`\<[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)\> \| `Promise`\<`void`\> \| `void`

Defined in: [common/baseMessageHandler.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L5)

---

# Type Alias: IRefBehaviorType

Source: /docs/sdk/common/type-aliases/IRefBehaviorType

> **IRefBehaviorType**: `"code"` \| `"component"`

Defined in: [common/index.ts:174](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L174)

---

# Type Alias: LoaderFrameworkType

Source: /docs/sdk/common/type-aliases/LoaderFrameworkType

> **LoaderFrameworkType**: keyof *typeof* [`LoaderFrameworks`](/docs/sdk/common/variables/LoaderFrameworks)

Defined in: [common/index.ts:29](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L29)

---

# Type Alias: PropType

Source: /docs/sdk/common/type-aliases/PropType

> **PropType**: `"any"` \| `"string"` \| `"number"` \| `string`

Defined in: [common/index.ts:21](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L21)

---

# Type Alias: RefSelectorType

Source: /docs/sdk/common/type-aliases/RefSelectorType

> **RefSelectorType**: `"id-attribute"` \| `"css-selector"` \| `"xpath"` \| `string`

Defined in: [common/index.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L22)

---

# Type Alias: SkinLoaderType

Source: /docs/sdk/common/type-aliases/SkinLoaderType

> **SkinLoaderType**: keyof *typeof* [`SkinLoaders`](/docs/sdk/common/variables/SkinLoaders)

Defined in: [common/index.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L19)

---

# Variable: ExperienceTypes

Source: /docs/sdk/common/variables/ExperienceTypes

> `const` **ExperienceTypes**: `object`

Defined in: [common/index.ts:425](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L425)

## Type declaration

### AB

> `readonly` **AB**: `"AB"` = `"AB"`

### Promo

> `readonly` **Promo**: `"Promo"` = `"Promo"`

### Segment

> `readonly` **Segment**: `"Segment"` = `"Segment"`

---

# Variable: LoaderFrameworks

Source: /docs/sdk/common/variables/LoaderFrameworks

> `const` **LoaderFrameworks**: `object`

Defined in: [common/index.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L24)

## Type declaration

### angular

> `readonly` **angular**: `"angular"` = `"angular"`

### react

> `readonly` **react**: `"react"` = `"react"`

### vue

> `readonly` **vue**: `"vue"` = `"vue"`

---

# Variable: PropConfigBehaviorTypes

Source: /docs/sdk/common/variables/PropConfigBehaviorTypes

> `const` **PropConfigBehaviorTypes**: `object`

Defined in: [common/index.ts:134](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L134)

## Type declaration

### code

> `readonly` **code**: `"code"` = `"code"`

### message

> `readonly` **message**: `"message"` = `"message"`

---

# Variable: PropMessageModes

Source: /docs/sdk/common/variables/PropMessageModes

> `const` **PropMessageModes**: `object`

Defined in: [common/index.ts:129](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L129)

## Type declaration

### input

> `readonly` **input**: `"input"` = `"input"`

### output

> `readonly` **output**: `"output"` = `"output"`

---

# Variable: SegmentType

Source: /docs/sdk/common/variables/SegmentType

> `const` **SegmentType**: `object`

Defined in: [common/index.ts:338](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L338)

## Type declaration

### FunctionResult

> `readonly` **FunctionResult**: `"FunctionResult"` = `"FunctionResult"`

---

# Variable: ShadowRootModeType

Source: /docs/sdk/common/variables/ShadowRootModeType

> `const` **ShadowRootModeType**: `object`

Defined in: [common/index.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L46)

## Type declaration

### closed

> `readonly` **closed**: `"closed"` = `"closed"`

### localFrame

> `readonly` **localFrame**: `"localFrame"` = `"localFrame"`

### none

> `readonly` **none**: `"none"` = `"none"`

### open

> `readonly` **open**: `"open"` = `"open"`

---

# Variable: SkinLoaders

Source: /docs/sdk/common/variables/SkinLoaders

> `const` **SkinLoaders**: `object`

Defined in: [common/index.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L13)

## Type declaration

### HTMLLoader

> `readonly` **HTMLLoader**: `"HTMLLoader"` = `"HTMLLoader"`

### IframeLoader

> `readonly` **IframeLoader**: `"IframeLoader"` = `"IframeLoader"`

### MinimizedLoader

> `readonly` **MinimizedLoader**: `"MinimizedLoader"` = `"MinimizedLoader"`

### WebComponentLoader

> `readonly` **WebComponentLoader**: `"WebComponentLoader"` = `"WebComponentLoader"`

---

# Variable: SkinSelectorTypes

Source: /docs/sdk/common/variables/SkinSelectorTypes

> `const` **SkinSelectorTypes**: `object`

Defined in: [common/index.ts:360](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L360)

## Type declaration

### Dedicated

> `readonly` **Dedicated**: `"Dedicated"` = `"Dedicated"`

### Default

> `readonly` **Default**: `"Default"` = `"Default"`

This Selector Type is not yet supported but will be added in a future release.
Please check the documentation for updates.

### Segmented

> `readonly` **Segmented**: `"Segmented"` = `"Segmented"`

---

# Class: CloudRepository

Source: /docs/sdk/helpers/classes/CloudRepository

Defined in: [helpers/CloudRepository.ts:98](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L98)

## Constructors

### new CloudRepository()

> **new CloudRepository**(`_baseUrl`): [`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository)

Defined in: [helpers/CloudRepository.ts:128](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L128)

#### Parameters

##### \_baseUrl

`string` = `'https://cloud.myop.dev'`

#### Returns

[`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository)

## Accessors

### Main

#### Get Signature

> **get** `static` **Main**(): [`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository)

Defined in: [helpers/CloudRepository.ts:101](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L101)

##### Returns

[`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository)

## Methods

### fetchAutoFlow()

> **fetchAutoFlow**(`componentId`): `Promise`\<[`IUserFlow`](/docs/sdk/common/interfaces/IUserFlow)\>

Defined in: [helpers/CloudRepository.ts:259](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L259)

#### Parameters

##### componentId

`string`

#### Returns

`Promise`\<[`IUserFlow`](/docs/sdk/common/interfaces/IUserFlow)\>

***

### ~~fetchComponent()~~

> **fetchComponent**(`componentId`, `flowId`?): `Promise`\<`undefined` \| [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>

Defined in: [helpers/CloudRepository.ts:307](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L307)

#### Parameters

##### componentId

`string`

##### flowId?

`string`

#### Returns

`Promise`\<`undefined` \| [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>

#### Deprecated

Use fetchComponentV2 or fetchComponentV1 explicitly
Defaults to v1 behavior for backward compatibility with existing code

***

### fetchComponentV1()

> **fetchComponentV1**(`componentId`, `flowId`?): `Promise`\<`undefined` \| [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>

Defined in: [helpers/CloudRepository.ts:249](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L249)

Fetch a v1 component from a flow

#### Parameters

##### componentId

`string`

##### flowId?

`string`

#### Returns

`Promise`\<`undefined` \| [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>

***

### fetchComponentV2()

> **fetchComponentV2**(`componentId`, `environmentIdentifier`?, `preview`?): `Promise`\<[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>

Defined in: [helpers/CloudRepository.ts:173](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L173)

Fetch a v2 component config
If env/preview not specified and component was preloaded, uses preloaded params

#### Parameters

##### componentId

`string`

##### environmentIdentifier?

`string`

##### preview?

`boolean`

#### Returns

`Promise`\<[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>

***

### fetchFlow()

> **fetchFlow**(`flowId`): `Promise`\<[`IUserFlow`](/docs/sdk/common/interfaces/IUserFlow)\>

Defined in: [helpers/CloudRepository.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L280)

#### Parameters

##### flowId

`string`

#### Returns

`Promise`\<[`IUserFlow`](/docs/sdk/common/interfaces/IUserFlow)\>

***

### getDefaultEnvironment()

> **getDefaultEnvironment**(): `string`

Defined in: [helpers/CloudRepository.ts:141](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L141)

Get the current default environment

#### Returns

`string`

***

### getPreloadedParams()

> **getPreloadedParams**(`componentId`): `undefined` \| \{ `env`: `string`; `preview`: `boolean`; \}

Defined in: [helpers/CloudRepository.ts:165](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L165)

Get the preloaded params for a component (if preloaded)
Returns undefined if not preloaded

#### Parameters

##### componentId

`string`

#### Returns

`undefined` \| \{ `env`: `string`; `preview`: `boolean`; \}

***

### isPreloaded()

> **isPreloaded**(`componentId`, `env`?, `preview`?): `boolean`

Defined in: [helpers/CloudRepository.ts:151](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L151)

Check if a component is already cached/preloaded (v2)
If env and preview are not provided, checks if ANY version is preloaded

#### Parameters

##### componentId

`string`

##### env?

`string`

##### preview?

`boolean`

#### Returns

`boolean`

***

### setEnvironment()

> **setEnvironment**(`env`): `void`

Defined in: [helpers/CloudRepository.ts:134](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L134)

Set the default environment for this CloudRepository instance

#### Parameters

##### env

`string`

#### Returns

`void`

---

# Class: ComponentConfig

Source: /docs/sdk/helpers/classes/ComponentConfig

Defined in: [helpers/configBuilder.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L41)

## Implements

- [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)

## Constructors

### new ComponentConfig()

> **new ComponentConfig**(): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

#### Returns

[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

## Properties

### \_runTimeId

> **\_runTimeId**: `string`

Defined in: [helpers/configBuilder.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L43)

***

### \_runTimeInstanceId

> **\_runTimeInstanceId**: `string`

Defined in: [helpers/configBuilder.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L42)

***

### \_runTimeName

> **\_runTimeName**: `string`

Defined in: [helpers/configBuilder.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L44)

***

### instance

> **instance**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)

Defined in: [helpers/configBuilder.ts:50](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L50)

#### Implementation of

[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig).[`instance`](/docs/sdk/common/interfaces/IComponentConfig#instance)

***

### name

> **name**: `string`

Defined in: [helpers/configBuilder.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L57)

#### Implementation of

[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig).[`name`](/docs/sdk/common/interfaces/IComponentConfig#name)

***

### type

> **type**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

Defined in: [helpers/configBuilder.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L58)

#### Implementation of

[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig).[`type`](/docs/sdk/common/interfaces/IComponentConfig#type)

## Methods

### build()

> **build**(): `any`

Defined in: [helpers/configBuilder.ts:117](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L117)

#### Returns

`any`

***

### withBasicRef()

> **withBasicRef**(`refSelector`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

Defined in: [helpers/configBuilder.ts:101](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L101)

#### Parameters

##### refSelector

`string`

#### Returns

[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

***

### withDefaultSkin()

> **withDefaultSkin**(`defaultSkin`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

Defined in: [helpers/configBuilder.ts:83](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L83)

#### Parameters

##### defaultSkin

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

#### Returns

[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

***

### withInstance()

> **withInstance**(`instance`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

Defined in: [helpers/configBuilder.ts:68](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L68)

#### Parameters

##### instance

[`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)

#### Returns

[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

***

### withName()

> **withName**(`name`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

Defined in: [helpers/configBuilder.ts:78](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L78)

#### Parameters

##### name

`string`

#### Returns

[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

***

### withRef()

> **withRef**(`ref`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

Defined in: [helpers/configBuilder.ts:96](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L96)

#### Parameters

##### ref

[`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)

#### Returns

[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

***

### withType()

> **withType**(`type`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

Defined in: [helpers/configBuilder.ts:73](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L73)

#### Parameters

##### type

[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

#### Returns

[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

***

### create()

> `static` **create**(): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

Defined in: [helpers/configBuilder.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L46)

#### Returns

[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)

---

# Class: SkinConfig

Source: /docs/sdk/helpers/classes/SkinConfig

Defined in: [helpers/configBuilder.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L11)

## Implements

- [`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

## Constructors

### new SkinConfig()

> **new SkinConfig**(): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

#### Returns

[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

## Properties

### \_runTimeId

> **\_runTimeId**: `string`

Defined in: [helpers/configBuilder.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L13)

***

### \_runTimeInstanceId

> **\_runTimeInstanceId**: `string`

Defined in: [helpers/configBuilder.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L12)

***

### \_runTimeName

> **\_runTimeName**: `string`

Defined in: [helpers/configBuilder.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L14)

***

### description

> **description**: `string` = `''`

Defined in: [helpers/configBuilder.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L22)

#### Implementation of

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`description`](/docs/sdk/common/interfaces/ISkinConfig#description)

***

### id

> **id**: `string`

Defined in: [helpers/configBuilder.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L20)

#### Implementation of

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`id`](/docs/sdk/common/interfaces/ISkinConfig#id)

***

### loader

> **loader**: [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

Defined in: [helpers/configBuilder.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L23)

#### Implementation of

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`loader`](/docs/sdk/common/interfaces/ISkinConfig#loader)

***

### name

> **name**: `string`

Defined in: [helpers/configBuilder.ts:21](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L21)

#### Implementation of

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`name`](/docs/sdk/common/interfaces/ISkinConfig#name)

## Methods

### build()

> **build**(): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

Defined in: [helpers/configBuilder.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L36)

#### Returns

[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

***

### withHTMLLoader()

> **withHTMLLoader**(`loader`): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

Defined in: [helpers/configBuilder.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L30)

#### Parameters

##### loader

`Omit`\<[`IHTMLLoaderConfig`](/docs/sdk/common/interfaces/IHTMLLoaderConfig), `"type"`\>

#### Returns

[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

***

### withLoader()

> **withLoader**(`loader`): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

Defined in: [helpers/configBuilder.ts:25](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L25)

#### Parameters

##### loader

[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)

#### Returns

[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

***

### create()

> `static` **create**(): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

Defined in: [helpers/configBuilder.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L16)

#### Returns

[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)

---

# Function: addClass()

Source: /docs/sdk/helpers/functions/addClass

> **addClass**(`component`, `className`, `myopId`): `void`

Defined in: [helpers/classList.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/classList.ts#L20)

## Parameters

### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

### className

`string`

### myopId

`string`

## Returns

`void`

---

# Function: applyStylesheet()

Source: /docs/sdk/helpers/functions/applyStylesheet

> **applyStylesheet**(`component`, `stylesheet`, `css`?): () => `void`

Defined in: [helpers/applyStylesheet.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/applyStylesheet.ts#L13)

## Parameters

### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

### stylesheet

[`StylesheetDefinition`](/docs/sdk/helpers/type-aliases/StylesheetDefinition)

### css?

`string`

## Returns

`Function`

### Returns

`void`

---

# Function: applyStylesheetLink()

Source: /docs/sdk/helpers/functions/applyStylesheetLink

> **applyStylesheetLink**(`component`, `link`): () => `void`

Defined in: [helpers/applyStylesheet.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/applyStylesheet.ts#L57)

## Parameters

### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

### link

`string`

## Returns

`Function`

### Returns

`void`

---

# Function: changeSkinUrlByTokenizer()

Source: /docs/sdk/helpers/functions/changeSkinUrlByTokenizer

> **changeSkinUrlByTokenizer**(`tokenMap`): (`selectedSkin`) => `Promise`\<[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)\>

Defined in: [helpers/iframeSkinUrlTokenizer.ts:31](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/iframeSkinUrlTokenizer.ts#L31)

## Parameters

### tokenMap

[`TokenMap`](/docs/sdk/helpers/type-aliases/TokenMap)

## Returns

`Function`

### Parameters

#### selectedSkin

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

### Returns

`Promise`\<[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)\>

---

# Function: createIframeSkinByTokenizer()

Source: /docs/sdk/helpers/functions/createIframeSkinByTokenizer

> **createIframeSkinByTokenizer**(`selectedSkin`, `tokenMap`): [`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

Defined in: [helpers/iframeSkinUrlTokenizer.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/iframeSkinUrlTokenizer.ts#L16)

## Parameters

### selectedSkin

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

### tokenMap

[`TokenMap`](/docs/sdk/helpers/type-aliases/TokenMap)

## Returns

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

---

# Function: exec()

Source: /docs/sdk/helpers/functions/exec

> **exec**(`getter`): `Promise`\<`any`\>

Defined in: [helpers/exec.ts:1](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/exec.ts#L1)

## Parameters

### getter

`any`

## Returns

`Promise`\<`any`\>

---

# Function: removeClass()

Source: /docs/sdk/helpers/functions/removeClass

> **removeClass**(`component`, `className`, `myopId`): `void`

Defined in: [helpers/classList.ts:29](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/classList.ts#L29)

## Parameters

### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

### className

`string`

### myopId

`string`

## Returns

`void`

---

# helpers

Source: /docs/sdk/helpers

## Classes

- [CloudRepository](/docs/sdk/helpers/classes/CloudRepository)
- [ComponentConfig](/docs/sdk/helpers/classes/ComponentConfig)
- [SkinConfig](/docs/sdk/helpers/classes/SkinConfig)

## Type Aliases

- [StylesheetDefinition](/docs/sdk/helpers/type-aliases/StylesheetDefinition)
- [TokenMap](/docs/sdk/helpers/type-aliases/TokenMap)

## Variables

- [~~v2\_CloudRepository~~](/docs/sdk/helpers/variables/v2_CloudRepository)

## Functions

- [addClass](/docs/sdk/helpers/functions/addClass)
- [applyStylesheet](/docs/sdk/helpers/functions/applyStylesheet)
- [applyStylesheetLink](/docs/sdk/helpers/functions/applyStylesheetLink)
- [changeSkinUrlByTokenizer](/docs/sdk/helpers/functions/changeSkinUrlByTokenizer)
- [createIframeSkinByTokenizer](/docs/sdk/helpers/functions/createIframeSkinByTokenizer)
- [exec](/docs/sdk/helpers/functions/exec)
- [removeClass](/docs/sdk/helpers/functions/removeClass)

---

# Type Alias: StylesheetDefinition

Source: /docs/sdk/helpers/type-aliases/StylesheetDefinition

> **StylesheetDefinition**: `object`

Defined in: [helpers/applyStylesheet.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/applyStylesheet.ts#L11)

## Index Signature

\[`key`: `string`\]: `CSSProperties`

---

# Type Alias: TokenMap

Source: /docs/sdk/helpers/type-aliases/TokenMap

> **TokenMap**: `Record`\<`string`, `string` \| `number`\>

Defined in: [helpers/iframeSkinUrlTokenizer.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/iframeSkinUrlTokenizer.ts#L3)

---

# Variable: ~~v2\_CloudRepository~~

Source: /docs/sdk/helpers/variables/v2_CloudRepository

> `const` **v2\_CloudRepository**: *typeof* [`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository) = `CloudRepository`

Defined in: [helpers/CloudRepository.ts:315](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L315)

## Deprecated

Use CloudRepository instead

---

# Class: `abstract` BaseMyopComponent\<P, R\>

Source: /docs/sdk/host/classes/BaseMyopComponent

Defined in: [host/components/IMyopComponent.ts:126](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L126)

## Extended by

- [`MyopExtractedWebComponent`](/docs/sdk/host/classes/MyopExtractedWebComponent)

## Type Parameters

• **P** = `any`

• **R** *extends* `RefTypes` = `RefTypes`

## Implements

- [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\<`P`\>

## Constructors

### new BaseMyopComponent()

> `protected` **new BaseMyopComponent**\<`P`, `R`\>(`componentDefinition`, `container`, `options`?): [`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent)\<`P`, `R`\>

Defined in: [host/components/IMyopComponent.ts:133](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L133)

#### Parameters

##### componentDefinition

[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

##### container

`HTMLElement`

##### options?

[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

#### Returns

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent)\<`P`, `R`\>

## Properties

### \_markedForDisposed

> **\_markedForDisposed**: `boolean` = `false`

Defined in: [host/components/IMyopComponent.ts:151](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L151)

***

### \_whenInitiated

> **\_whenInitiated**: `Promise`\<`any`\>

Defined in: [host/components/IMyopComponent.ts:255](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L255)

***

### \_whenInitiatedReject()?

> `optional` **\_whenInitiatedReject**: (`value`?) => `any`

Defined in: [host/components/IMyopComponent.ts:253](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L253)

#### Parameters

##### value?

`any`

#### Returns

`any`

***

### \_whenInitiatedResolve()?

> `optional` **\_whenInitiatedResolve**: (`value`?) => `any`

Defined in: [host/components/IMyopComponent.ts:252](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L252)

#### Parameters

##### value?

`any`

#### Returns

`any`

***

### componentDefinition

> **componentDefinition**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

Defined in: [host/components/IMyopComponent.ts:133](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L133)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`componentDefinition`](/docs/sdk/host/interfaces/IMyopComponent#componentdefinition)

***

### container

> **container**: `HTMLElement`

Defined in: [host/components/IMyopComponent.ts:133](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L133)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`container`](/docs/sdk/host/interfaces/IMyopComponent#container)

***

### element?

> `optional` **element**: `HTMLElement`

Defined in: [host/components/IMyopComponent.ts:131](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L131)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`element`](/docs/sdk/host/interfaces/IMyopComponent#element)

***

### id

> **id**: `string` = `''`

Defined in: [host/components/IMyopComponent.ts:127](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L127)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`id`](/docs/sdk/host/interfaces/IMyopComponent#id)

***

### isInitiated

> **isInitiated**: `boolean` = `false`

Defined in: [host/components/IMyopComponent.ts:250](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L250)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`isInitiated`](/docs/sdk/host/interfaces/IMyopComponent#isinitiated)

***

### messageHandlers

> **messageHandlers**: `Record`\<`string`, `messageHandler`\<`any`\>[]\> = `{}`

Defined in: [host/components/IMyopComponent.ts:129](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L129)

***

### props

> **props**: `P`

Defined in: [host/components/IMyopComponent.ts:366](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L366)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`props`](/docs/sdk/host/interfaces/IMyopComponent#props)

***

### refs

> **refs**: `R`

Defined in: [host/components/IMyopComponent.ts:367](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L367)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`refs`](/docs/sdk/host/interfaces/IMyopComponent#refs)

## Accessors

### markedForDisposed

#### Get Signature

> **get** **markedForDisposed**(): `boolean`

Defined in: [host/components/IMyopComponent.ts:153](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L153)

##### Returns

`boolean`

#### Set Signature

> **set** **markedForDisposed**(`value`): `void`

Defined in: [host/components/IMyopComponent.ts:157](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L157)

##### Parameters

###### value

`boolean`

##### Returns

`void`

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`markedForDisposed`](/docs/sdk/host/interfaces/IMyopComponent#markedfordisposed)

## Methods

### bind()

> **bind**\<`T`\>(`messageType`, `handler`): `void`

Defined in: [host/components/IMyopComponent.ts:171](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L171)

#### Type Parameters

• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Parameters

##### messageType

`string`

##### handler

(`message`) => `boolean`

#### Returns

`void`

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`bind`](/docs/sdk/host/interfaces/IMyopComponent#bind)

***

### bindWhen()

> **bindWhen**\<`T`\>(`messageType`, `predicate`, `handler`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/IMyopComponent.ts:182](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L182)

#### Type Parameters

• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Parameters

##### messageType

`string`

##### predicate

(`message`) => `boolean`

##### handler

(`message`) => `void`

#### Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

***

### dispose()

> **dispose**(): `void`

Defined in: [host/components/IMyopComponent.ts:331](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L331)

#### Returns

`void`

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`dispose`](/docs/sdk/host/interfaces/IMyopComponent#dispose)

***

### hide()

> `abstract` **hide**(): `void`

Defined in: [host/components/IMyopComponent.ts:164](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L164)

#### Returns

`void`

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`hide`](/docs/sdk/host/interfaces/IMyopComponent#hide)

***

### initiated()

> **initiated**(): `Promise`\<`any`\>

Defined in: [host/components/IMyopComponent.ts:260](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L260)

#### Returns

`Promise`\<`any`\>

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`initiated`](/docs/sdk/host/interfaces/IMyopComponent#initiated)

***

### inspect()

> `abstract` **inspect**(): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/IMyopComponent.ts:168](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L168)

#### Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`inspect`](/docs/sdk/host/interfaces/IMyopComponent#inspect)

***

### onMessageReceived()

> **onMessageReceived**(`incomeMessage`): `boolean`

Defined in: [host/components/IMyopComponent.ts:212](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L212)

#### Parameters

##### incomeMessage

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`onMessageReceived`](/docs/sdk/host/interfaces/IMyopComponent#onmessagereceived)

***

### send()

> **send**(`message`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/IMyopComponent.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L285)

#### Parameters

##### message

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`send`](/docs/sdk/host/interfaces/IMyopComponent#send)

***

### setInitiated()

> **setInitiated**(): `void`

Defined in: [host/components/IMyopComponent.ts:243](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L243)

#### Returns

`void`

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`setInitiated`](/docs/sdk/host/interfaces/IMyopComponent#setinitiated)

***

### show()

> `abstract` **show**(): `void`

Defined in: [host/components/IMyopComponent.ts:166](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L166)

#### Returns

`void`

#### Implementation of

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`show`](/docs/sdk/host/interfaces/IMyopComponent#show)

---

# Class: `abstract` BaseMyopLoader

Source: /docs/sdk/host/classes/BaseMyopLoader

Defined in: [host/loaders/IMyopLoader.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L10)

## Implements

- [`IMyopLoader`](/docs/sdk/host/interfaces/IMyopLoader)

## Constructors

### new BaseMyopLoader()

> **new BaseMyopLoader**(): [`BaseMyopLoader`](/docs/sdk/host/classes/BaseMyopLoader)

#### Returns

[`BaseMyopLoader`](/docs/sdk/host/classes/BaseMyopLoader)

## Properties

### load()

> `abstract` **load**: (`componentDefinition`, `skin`, `container`, `options`?) => `Promise`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\>

Defined in: [host/loaders/IMyopLoader.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L12)

#### Parameters

##### componentDefinition

[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

##### skin

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

##### container

`HTMLElement`

##### options?

[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

#### Returns

`Promise`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\>

#### Implementation of

[`IMyopLoader`](/docs/sdk/host/interfaces/IMyopLoader).[`load`](/docs/sdk/host/interfaces/IMyopLoader#load)

***

### type

> `abstract` **type**: `"IframeLoader"` \| `"WebComponentLoader"` \| `"HTMLLoader"` \| `"MinimizedLoader"`

Defined in: [host/loaders/IMyopLoader.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L11)

#### Implementation of

[`IMyopLoader`](/docs/sdk/host/interfaces/IMyopLoader).[`type`](/docs/sdk/host/interfaces/IMyopLoader#type)

## Methods

### appendChild()

> **appendChild**(`container`, `element`, `options`?): `undefined` \| `HTMLElement`

Defined in: [host/loaders/IMyopLoader.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L14)

#### Parameters

##### container

`HTMLElement`

##### element

`HTMLElement`

##### options?

[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

#### Returns

`undefined` \| `HTMLElement`

---

# Class: MyopExtractedWebComponent

Source: /docs/sdk/host/classes/MyopExtractedWebComponent

Defined in: [host/components/myopExtractedWebComponent.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L14)

Component wrapper for Myop Web Components that are extracted from HTML
and run directly on the host document (not in an iframe).

These components use the native Web Components API (Custom Elements + Shadow DOM)
and communicate via direct method calls and CustomEvents instead of postMessage.

## Extends

- [`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent)

## Constructors

### new MyopExtractedWebComponent()

> **new MyopExtractedWebComponent**(`componentDefinition`, `skin`, `container`, `customElement`, `tagName`, `options`?): [`MyopExtractedWebComponent`](/docs/sdk/host/classes/MyopExtractedWebComponent)

Defined in: [host/components/myopExtractedWebComponent.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L19)

#### Parameters

##### componentDefinition

[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

##### skin

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

##### container

`HTMLElement`

##### customElement

`HTMLElement`

##### tagName

`string`

##### options?

[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

#### Returns

[`MyopExtractedWebComponent`](/docs/sdk/host/classes/MyopExtractedWebComponent)

#### Overrides

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`constructor`](/docs/sdk/host/classes/BaseMyopComponent#constructors)

## Properties

### \_markedForDisposed

> **\_markedForDisposed**: `boolean` = `false`

Defined in: [host/components/IMyopComponent.ts:151](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L151)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`_markedForDisposed`](/docs/sdk/host/classes/BaseMyopComponent#_markedfordisposed)

***

### \_whenInitiated

> **\_whenInitiated**: `Promise`\<`any`\>

Defined in: [host/components/IMyopComponent.ts:255](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L255)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`_whenInitiated`](/docs/sdk/host/classes/BaseMyopComponent#_wheninitiated)

***

### \_whenInitiatedReject()?

> `optional` **\_whenInitiatedReject**: (`value`?) => `any`

Defined in: [host/components/IMyopComponent.ts:253](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L253)

#### Parameters

##### value?

`any`

#### Returns

`any`

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`_whenInitiatedReject`](/docs/sdk/host/classes/BaseMyopComponent#_wheninitiatedreject)

***

### \_whenInitiatedResolve()?

> `optional` **\_whenInitiatedResolve**: (`value`?) => `any`

Defined in: [host/components/IMyopComponent.ts:252](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L252)

#### Parameters

##### value?

`any`

#### Returns

`any`

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`_whenInitiatedResolve`](/docs/sdk/host/classes/BaseMyopComponent#_wheninitiatedresolve)

***

### cleanupInspect

> **cleanupInspect**: [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/myopExtractedWebComponent.ts:34](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L34)

***

### componentDefinition

> **componentDefinition**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

Defined in: [host/components/IMyopComponent.ts:133](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L133)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`componentDefinition`](/docs/sdk/host/classes/BaseMyopComponent#componentdefinition-1)

***

### container

> **container**: `HTMLElement`

Defined in: [host/components/myopExtractedWebComponent.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L22)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`container`](/docs/sdk/host/classes/BaseMyopComponent#container-1)

***

### element?

> `optional` **element**: `HTMLElement`

Defined in: [host/components/IMyopComponent.ts:131](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L131)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`element`](/docs/sdk/host/classes/BaseMyopComponent#element)

***

### id

> **id**: `string` = `''`

Defined in: [host/components/IMyopComponent.ts:127](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L127)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`id`](/docs/sdk/host/classes/BaseMyopComponent#id)

***

### isInitiated

> **isInitiated**: `boolean` = `false`

Defined in: [host/components/IMyopComponent.ts:250](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L250)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`isInitiated`](/docs/sdk/host/classes/BaseMyopComponent#isinitiated)

***

### messageHandlers

> **messageHandlers**: `Record`\<`string`, `messageHandler`\<`any`\>[]\> = `{}`

Defined in: [host/components/IMyopComponent.ts:129](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L129)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`messageHandlers`](/docs/sdk/host/classes/BaseMyopComponent#messagehandlers)

***

### props

> **props**: `any`

Defined in: [host/components/IMyopComponent.ts:366](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L366)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`props`](/docs/sdk/host/classes/BaseMyopComponent#props)

***

### refs

> **refs**: `RefTypes`

Defined in: [host/components/IMyopComponent.ts:367](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L367)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`refs`](/docs/sdk/host/classes/BaseMyopComponent#refs)

## Accessors

### markedForDisposed

#### Get Signature

> **get** **markedForDisposed**(): `boolean`

Defined in: [host/components/IMyopComponent.ts:153](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L153)

##### Returns

`boolean`

#### Set Signature

> **set** **markedForDisposed**(`value`): `void`

Defined in: [host/components/IMyopComponent.ts:157](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L157)

##### Parameters

###### value

`boolean`

##### Returns

`void`

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`markedForDisposed`](/docs/sdk/host/classes/BaseMyopComponent#markedfordisposed)

## Methods

### bind()

> **bind**\<`T`\>(`messageType`, `handler`): `void`

Defined in: [host/components/IMyopComponent.ts:171](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L171)

#### Type Parameters

• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Parameters

##### messageType

`string`

##### handler

(`message`) => `boolean`

#### Returns

`void`

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`bind`](/docs/sdk/host/classes/BaseMyopComponent#bind)

***

### bindWhen()

> **bindWhen**\<`T`\>(`messageType`, `predicate`, `handler`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/IMyopComponent.ts:182](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L182)

#### Type Parameters

• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Parameters

##### messageType

`string`

##### predicate

(`message`) => `boolean`

##### handler

(`message`) => `void`

#### Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`bindWhen`](/docs/sdk/host/classes/BaseMyopComponent#bindwhen)

***

### dispose()

> **dispose**(): `void`

Defined in: [host/components/myopExtractedWebComponent.ts:138](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L138)

#### Returns

`void`

#### Overrides

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`dispose`](/docs/sdk/host/classes/BaseMyopComponent#dispose)

***

### getData()

> **getData**(): `unknown`

Defined in: [host/components/myopExtractedWebComponent.ts:71](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L71)

Get current data from the component

#### Returns

`unknown`

***

### hide()

> **hide**(): `void`

Defined in: [host/components/myopExtractedWebComponent.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L41)

#### Returns

`void`

#### Overrides

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`hide`](/docs/sdk/host/classes/BaseMyopComponent#hide)

***

### initiated()

> **initiated**(): `Promise`\<`any`\>

Defined in: [host/components/IMyopComponent.ts:260](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L260)

#### Returns

`Promise`\<`any`\>

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`initiated`](/docs/sdk/host/classes/BaseMyopComponent#initiated)

***

### initWithData()

> **initWithData**(`data`): `void`

Defined in: [host/components/myopExtractedWebComponent.ts:62](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L62)

Initialize the component with data by calling myop_init_interface directly

#### Parameters

##### data

`unknown`

#### Returns

`void`

***

### inspect()

> **inspect**(): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/myopExtractedWebComponent.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L36)

#### Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

#### Overrides

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`inspect`](/docs/sdk/host/classes/BaseMyopComponent#inspect)

***

### onMessageReceived()

> **onMessageReceived**(`incomeMessage`): `boolean`

Defined in: [host/components/IMyopComponent.ts:212](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L212)

#### Parameters

##### incomeMessage

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`onMessageReceived`](/docs/sdk/host/classes/BaseMyopComponent#onmessagereceived)

***

### send()

> **send**(`message`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/myopExtractedWebComponent.ts:127](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L127)

For compatibility with message-based components.
Web components don't use postMessage, so this is a no-op for most messages.

#### Parameters

##### message

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

#### Overrides

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`send`](/docs/sdk/host/classes/BaseMyopComponent#send)

***

### setCtaHandler()

> **setCtaHandler**(`handler`): `void`

Defined in: [host/components/myopExtractedWebComponent.ts:82](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L82)

Set CTA handler - unified API with iframe components.
Called via props.myop_cta_handler = handler

#### Parameters

##### handler

(`action`, `payload`) => `void`

#### Returns

`void`

***

### setInitiated()

> **setInitiated**(): `void`

Defined in: [host/components/IMyopComponent.ts:243](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L243)

#### Returns

`void`

#### Inherited from

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`setInitiated`](/docs/sdk/host/classes/BaseMyopComponent#setinitiated)

***

### show()

> **show**(): `void`

Defined in: [host/components/myopExtractedWebComponent.ts:50](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L50)

#### Returns

`void`

#### Overrides

[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`show`](/docs/sdk/host/classes/BaseMyopComponent#show)

---

# Function: actAs()

Source: /docs/sdk/host/functions/actAs

> **actAs**\<`T`\>(`ref`): [`FunctionifyRef`](/docs/sdk/host/type-aliases/FunctionifyRef)\<`T`\>

Defined in: [host/componentCore.ts:545](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L545)

## Type Parameters

• **T**

## Parameters

### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

## Returns

[`FunctionifyRef`](/docs/sdk/host/type-aliases/FunctionifyRef)\<`T`\>

---

# Function: connectProps()

Source: /docs/sdk/host/functions/connectProps

> **connectProps**\<`T`\>(`component`, `propsConfig`, `selectedSkin`): `Omit`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent), `"props"`\> & `object`

Defined in: [host/componentCore.ts:86](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L86)

## Type Parameters

• **T** *extends* [`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)[]

## Parameters

### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

### propsConfig

[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)[]

### selectedSkin

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

## Returns

`Omit`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent), `"props"`\> & `object`

---

# Function: connectRefs()

Source: /docs/sdk/host/functions/connectRefs

> **connectRefs**(`component`, `componentConfig`, `components`, `withoutRefComponents`): `Promise`\<`void`\>

Defined in: [host/componentCore.ts:445](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L445)

## Parameters

### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

### componentConfig

[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)

### components

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)[]

### withoutRefComponents

`boolean` = `false`

## Returns

`Promise`\<`void`\>

---

# Function: createFallbackElement()

Source: /docs/sdk/host/functions/createFallbackElement

> **createFallbackElement**(): `HTMLDivElement`

Defined in: [host/myopLoader.ts:92](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L92)

Creates a fallback DOM element with the Myop branding

## Returns

`HTMLDivElement`

---

# Function: createLoaderElement()

Source: /docs/sdk/host/functions/createLoaderElement

> **createLoaderElement**(`fadeDuration`): `HTMLDivElement`

Defined in: [host/myopLoader.ts:81](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L81)

Creates a loader DOM element with the Myop branding

## Parameters

### fadeDuration

`number` = `200`

## Returns

`HTMLDivElement`

---

# Function: createMyopLogoSvg()

Source: /docs/sdk/host/functions/createMyopLogoSvg

> **createMyopLogoSvg**(): `SVGSVGElement`

Defined in: [host/myopLoader.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L19)

Creates the Myop logo SVG element

## Returns

`SVGSVGElement`

---

# Function: createRefComponent()

Source: /docs/sdk/host/functions/createRefComponent

> **createRefComponent**\<`T`\>(`ref`, `componentConfig`, `components`, `options`?): `Promise`\<`T`\>

Defined in: [host/componentCore.ts:338](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L338)

## Type Parameters

• **T** *extends* [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent) = [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

## Parameters

### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

### componentConfig

[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)

### components

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)[]

### options?

[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

## Returns

`Promise`\<`T`\>

---

# Function: createRefProxy()

Source: /docs/sdk/host/functions/createRefProxy

> **createRefProxy**(`target`, `component`): [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [host/componentCore.ts:263](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L263)

## Parameters

### target

[`Ref`](/docs/sdk/messages/classes/Ref)

### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

## Returns

[`Ref`](/docs/sdk/messages/classes/Ref)

---

# Function: exec()

Source: /docs/sdk/host/functions/exec

> **exec**(`getter`): `Promise`\<`any`\>

Defined in: [host/componentCore.ts:541](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L541)

## Parameters

### getter

`any`

## Returns

`Promise`\<`any`\>

---

# Function: getFallbackHtml()

Source: /docs/sdk/host/functions/getFallbackHtml

> **getFallbackHtml**(): `string`

Defined in: [host/myopLoader.ts:112](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L112)

Returns the complete fallback HTML as a string (for use in templates)

## Returns

`string`

---

# Function: getFallbackStyles()

Source: /docs/sdk/host/functions/getFallbackStyles

> **getFallbackStyles**(): `string`

Defined in: [host/myopLoader.ts:64](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L64)

Returns the inline styles for the fallback container

## Returns

`string`

---

# Function: getLoaderHtml()

Source: /docs/sdk/host/functions/getLoaderHtml

> **getLoaderHtml**(`fadeDuration`): `string`

Defined in: [host/myopLoader.ts:103](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L103)

Returns the complete loader HTML as a string (for use in templates)

## Parameters

### fadeDuration

`number` = `200`

## Returns

`string`

---

# Function: getLoaderStyles()

Source: /docs/sdk/host/functions/getLoaderStyles

> **getLoaderStyles**(`fadeDuration`): `string`

Defined in: [host/myopLoader.ts:45](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L45)

Returns the inline styles for the loader container

## Parameters

### fadeDuration

`number` = `200`

## Returns

`string`

---

# Function: getMyopLogoHtml()

Source: /docs/sdk/host/functions/getMyopLogoHtml

> **getMyopLogoHtml**(): `string`

Defined in: [host/myopLoader.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L36)

Returns the inline HTML string for the Myop logo SVG

## Returns

`string`

---

# Function: setDebugStyle()

Source: /docs/sdk/host/functions/setDebugStyle

> **setDebugStyle**(`id`, `type`, `top`, `container`, `componentElement`, `componentDefinitionConfig`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/componentCore.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L36)

## Parameters

### id

`string`

### type

`string`

### top

`number`

### container

`HTMLElement`

### componentElement

`HTMLElement`

### componentDefinitionConfig

[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

## Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

---

# Class: HostSDK

Source: /docs/sdk/host/hostSDK/classes/HostSDK

Defined in: [host/hostSDK.ts:53](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L53)

The Host SDK is designed for integration within the host application that serves as the container for Myop  components.<br/><br/>
It provides essential functionalities and APIs for registering, managing, and communicating with Myop components.<br/><br/>
This SDK enables seamless embedding of independently developed components into the host application, ensuring smooth interoperability and consistent user experience across various Myop component implementations.

## Constructors

### new HostSDK()

> **new HostSDK**(): [`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK)

#### Returns

[`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK)

## Properties

### components

> **components**: [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)[] = `[]`

Defined in: [host/hostSDK.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L57)

***

### components2init

> **components2init**: [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)[] = `[]`

Defined in: [host/hostSDK.ts:56](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L56)

***

### componentsLoaders

> **componentsLoaders**: [`IMyopLoader`](/docs/sdk/host/interfaces/IMyopLoader)[] = `[]`

Defined in: [host/hostSDK.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L58)

***

### initiated

> **initiated**: `boolean` = `false`

Defined in: [host/hostSDK.ts:60](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L60)

***

### loaderHooks?

> `optional` **loaderHooks**: [`loaderHooks`](/docs/sdk/host/hostSDK/type-aliases/loaderHooks)

Defined in: [host/hostSDK.ts:309](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L309)

***

### type2InstanceCount

> **type2InstanceCount**: `Record`\<`string`, `number`\> = `{}`

Defined in: [host/hostSDK.ts:64](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L64)

***

### version

> **version**: `any`

Defined in: [host/hostSDK.ts:62](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L62)

## Methods

### assignId()

> **assignId**(`componentDefinition`): `string`

Defined in: [host/hostSDK.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L65)

#### Parameters

##### componentDefinition

[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

#### Returns

`string`

***

### init()

> **init**(`customComponentLoaderCreators`?): `void`

Defined in: [host/hostSDK.ts:192](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L192)

#### Parameters

##### customComponentLoaderCreators?

`componentLoaderCreator`[]

#### Returns

`void`

***

### inspect()

> **inspect**(): `void`

Defined in: [host/hostSDK.ts:75](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L75)

#### Returns

`void`

***

### loadComponent()

> **loadComponent**\<`T`\>(`componentConfig`, `container`?, `options`?): `Promise`\<`T`\>

Defined in: [host/hostSDK.ts:311](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L311)

#### Type Parameters

• **T** *extends* [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent) = [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

#### Parameters

##### componentConfig

[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)

##### container?

[`Ref`](/docs/sdk/messages/classes/Ref) | `HTMLElement`

##### options?

[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

#### Returns

`Promise`\<`T`\>

***

### navigate()

> **navigate**\<`T`\>(`component`, `newComponentConfig`, `options`?): `Promise`\<`T`\>

Defined in: [host/hostSDK.ts:443](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L443)

#### Type Parameters

• **T** *extends* [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent) = [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

#### Parameters

##### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

##### newComponentConfig

[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)

##### options?

[`navigationOptions`](/docs/sdk/host/hostSDK/type-aliases/navigationOptions)

#### Returns

`Promise`\<`T`\>

***

### send()

> **send**(`message`): `void`

Defined in: [host/hostSDK.ts:184](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L184)

#### Parameters

##### message

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`void`

***

### Instance()

> `static` **Instance**(): [`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK)

Defined in: [host/hostSDK.ts:54](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L54)

#### Returns

[`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK)

---

# host/hostSDK

Source: /docs/sdk/host/hostSDK

The Host SDK is designed for integration within the host application that serves as the container for Myop  components.<br/><br/>
It provides essential functionalities and APIs for registering, managing, and communicating with Myop components.<br/><br/>
This SDK enables seamless embedding of independently developed components into the host application, ensuring smooth interoperability and consistent user experience across various Myop component implementations.

## Classes

- [HostSDK](/docs/sdk/host/hostSDK/classes/HostSDK)

## Interfaces

- [IEnvironment](/docs/sdk/host/hostSDK/interfaces/IEnvironment)
- [loaderOptions](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
- [relativeLoadConfig](/docs/sdk/host/hostSDK/interfaces/relativeLoadConfig)

## Type Aliases

- [loaderHooks](/docs/sdk/host/hostSDK/type-aliases/loaderHooks)
- [navigationOptions](/docs/sdk/host/hostSDK/type-aliases/navigationOptions)

## Variables

- [hostSDK](/docs/sdk/host/hostSDK/variables/hostSDK)

---

# Interface: IEnvironment

Source: /docs/sdk/host/hostSDK/interfaces/IEnvironment

Defined in: [host/hostSDK.ts:517](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L517)

## Indexable

\[`key`: `string`\]: `any`

---

# Interface: loaderOptions

Source: /docs/sdk/host/hostSDK/interfaces/loaderOptions

Defined in: [host/hostSDK.ts:525](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L525)

## Properties

### \_environment?

> `optional` **\_environment**: [`IEnvironment`](/docs/sdk/host/hostSDK/interfaces/IEnvironment)

Defined in: [host/hostSDK.ts:534](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L534)

***

### \_hasParent?

> `optional` **\_hasParent**: `boolean`

Defined in: [host/hostSDK.ts:535](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L535)

***

### \_inspection?

> `optional` **\_inspection**: `boolean`

Defined in: [host/hostSDK.ts:536](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L536)

***

### connectProps?

> `optional` **connectProps**: `boolean`

Defined in: [host/hostSDK.ts:528](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L528)

***

### data?

> `optional` **data**: `any`

Defined in: [host/hostSDK.ts:537](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L537)

***

### elementAttributes?

> `optional` **elementAttributes**: `ElementAttributes`

Defined in: [host/hostSDK.ts:533](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L533)

***

### hidden?

> `optional` **hidden**: `boolean`

Defined in: [host/hostSDK.ts:527](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L527)

***

### hooks?

> `optional` **hooks**: [`loaderHooks`](/docs/sdk/host/hostSDK/type-aliases/loaderHooks)

Defined in: [host/hostSDK.ts:532](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L532)

***

### id?

> `optional` **id**: `string`

Defined in: [host/hostSDK.ts:526](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L526)

***

### relative?

> `optional` **relative**: [`relativeLoadConfig`](/docs/sdk/host/hostSDK/interfaces/relativeLoadConfig)

Defined in: [host/hostSDK.ts:531](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L531)

***

### skipInit?

> `optional` **skipInit**: `boolean`

Defined in: [host/hostSDK.ts:530](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L530)

***

### timeout?

> `optional` **timeout**: `number`

Defined in: [host/hostSDK.ts:529](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L529)

---

# Interface: relativeLoadConfig

Source: /docs/sdk/host/hostSDK/interfaces/relativeLoadConfig

Defined in: [host/hostSDK.ts:510](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L510)

## Properties

### child

> **child**: `null` \| `ChildNode`

Defined in: [host/hostSDK.ts:513](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L513)

***

### direction

> **direction**: `relativeLoadConfigDirection`

Defined in: [host/hostSDK.ts:514](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L514)

---

# Type Alias: loaderHooks

Source: /docs/sdk/host/hostSDK/type-aliases/loaderHooks

> **loaderHooks**: `object` & \{\} \| \{\}

Defined in: [host/hostSDK.ts:503](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L503)

## Type declaration

### afterSkinSelected()?

> `optional` **afterSkinSelected**: (`selectedSkin`) => `Promise`\<[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)\>

#### Parameters

##### selectedSkin

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

#### Returns

`Promise`\<[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)\>

---

# Type Alias: navigationOptions

Source: /docs/sdk/host/hostSDK/type-aliases/navigationOptions

> **navigationOptions**: `object` & [`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

Defined in: [host/hostSDK.ts:493](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L493)

## Type declaration

### init()?

> `optional` **init**: (`component`) => `Promise`\<`void`\>

#### Parameters

##### component

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

#### Returns

`Promise`\<`void`\>

### skipInit?

> `optional` **skipInit**: `boolean`

### staged?

> `optional` **staged**: `boolean`

---

# Variable: hostSDK

Source: /docs/sdk/host/hostSDK/variables/hostSDK

> `const` **hostSDK**: [`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK) = `window.myop.hostSDK`

Defined in: [host/hostSDK.ts:562](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L562)

---

# host

Source: /docs/sdk/host

## Classes

- [BaseMyopComponent](/docs/sdk/host/classes/BaseMyopComponent)
- [BaseMyopLoader](/docs/sdk/host/classes/BaseMyopLoader)
- [MyopExtractedWebComponent](/docs/sdk/host/classes/MyopExtractedWebComponent)

## Interfaces

- [AutoSizeOptions](/docs/sdk/host/interfaces/AutoSizeOptions)
- [AutoSizeResult](/docs/sdk/host/interfaces/AutoSizeResult)
- [IMyopComponent](/docs/sdk/host/interfaces/IMyopComponent)
- [IMyopLoader](/docs/sdk/host/interfaces/IMyopLoader)
- [MyopLoaderOptions](/docs/sdk/host/interfaces/MyopLoaderOptions)

## Type Aliases

- [FunctionifyRef](/docs/sdk/host/type-aliases/FunctionifyRef)
- [propTypes](/docs/sdk/host/type-aliases/propTypes)

## Variables

- [containerStyleObject](/docs/sdk/host/variables/containerStyleObject)
- [FALLBACK\_GRADIENT](/docs/sdk/host/variables/FALLBACK_GRADIENT)
- [fallbackStyleObject](/docs/sdk/host/variables/fallbackStyleObject)
- [LOADER\_GRADIENT](/docs/sdk/host/variables/LOADER_GRADIENT)
- [loaderStyleObject](/docs/sdk/host/variables/loaderStyleObject)

## Functions

- [actAs](/docs/sdk/host/functions/actAs)
- [connectProps](/docs/sdk/host/functions/connectProps)
- [connectRefs](/docs/sdk/host/functions/connectRefs)
- [createFallbackElement](/docs/sdk/host/functions/createFallbackElement)
- [createLoaderElement](/docs/sdk/host/functions/createLoaderElement)
- [createMyopLogoSvg](/docs/sdk/host/functions/createMyopLogoSvg)
- [createRefComponent](/docs/sdk/host/functions/createRefComponent)
- [createRefProxy](/docs/sdk/host/functions/createRefProxy)
- [exec](/docs/sdk/host/functions/exec)
- [getFallbackHtml](/docs/sdk/host/functions/getFallbackHtml)
- [getFallbackStyles](/docs/sdk/host/functions/getFallbackStyles)
- [getLoaderHtml](/docs/sdk/host/functions/getLoaderHtml)
- [getLoaderStyles](/docs/sdk/host/functions/getLoaderStyles)
- [getMyopLogoHtml](/docs/sdk/host/functions/getMyopLogoHtml)
- [setDebugStyle](/docs/sdk/host/functions/setDebugStyle)

## References

### CleanupHandler

Re-exports [CleanupHandler](/docs/sdk/common/type-aliases/CleanupHandler)

***

### hostSDK

Re-exports [hostSDK](/docs/sdk/host/hostSDK/variables/hostSDK)

***

### loaderOptions

Re-exports [loaderOptions](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

---

# Interface: AutoSizeOptions

Source: /docs/sdk/host/interfaces/AutoSizeOptions

Defined in: [host/components/IMyopComponent.ts:29](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L29)

Options for observeAutoSize method

## Properties

### explicitHeight?

> `optional` **explicitHeight**: `string` \| `number`

Defined in: [host/components/IMyopComponent.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L43)

Explicit height set by host - if defined, don't auto-size height

***

### explicitWidth?

> `optional` **explicitWidth**: `string` \| `number`

Defined in: [host/components/IMyopComponent.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L41)

Explicit width set by host - if defined, don't auto-size width

***

### forceAutoSize?

> `optional` **forceAutoSize**: `boolean`

Defined in: [host/components/IMyopComponent.ts:45](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L45)

Force auto-size even if container has dimensions

***

### loaderMinHeight?

> `optional` **loaderMinHeight**: `number`

Defined in: [host/components/IMyopComponent.ts:47](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L47)

Min height used by loader to detect collapse (default: 50)

***

### maxHeight?

> `optional` **maxHeight**: `string` \| `number`

Defined in: [host/components/IMyopComponent.ts:39](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L39)

Maximum height constraint

***

### maxWidth?

> `optional` **maxWidth**: `string` \| `number`

Defined in: [host/components/IMyopComponent.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L35)

Maximum width constraint

***

### minHeight?

> `optional` **minHeight**: `string` \| `number`

Defined in: [host/components/IMyopComponent.ts:37](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L37)

Minimum height constraint

***

### minWidth?

> `optional` **minWidth**: `string` \| `number`

Defined in: [host/components/IMyopComponent.ts:33](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L33)

Minimum width constraint

***

### onSizeChange()?

> `optional` **onSizeChange**: (`result`) => `void`

Defined in: [host/components/IMyopComponent.ts:31](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L31)

Callback called with size info whenever size changes

#### Parameters

##### result

[`AutoSizeResult`](/docs/sdk/host/interfaces/AutoSizeResult)

#### Returns

`void`

---

# Interface: AutoSizeResult

Source: /docs/sdk/host/interfaces/AutoSizeResult

Defined in: [host/components/IMyopComponent.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L15)

Result returned by observeAutoSize callback

## Properties

### autoSizingHeight

> **autoSizingHeight**: `boolean`

Defined in: [host/components/IMyopComponent.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L23)

Whether height is being auto-sized

***

### autoSizingWidth

> **autoSizingWidth**: `boolean`

Defined in: [host/components/IMyopComponent.ts:21](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L21)

Whether width is being auto-sized

***

### height

> **height**: `number`

Defined in: [host/components/IMyopComponent.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L19)

Current height (from content)

***

### width

> **width**: `number`

Defined in: [host/components/IMyopComponent.ts:17](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L17)

Current width (from content)

---

# Interface: IMyopComponent\<P, R\>

Source: /docs/sdk/host/interfaces/IMyopComponent

Defined in: [host/components/IMyopComponent.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L55)

## Type Parameters

• **P** = `any`

• **R** = `any`

## Properties

### componentDefinition

> **componentDefinition**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

Defined in: [host/components/IMyopComponent.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L65)

***

### container

> **container**: `HTMLElement`

Defined in: [host/components/IMyopComponent.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L67)

***

### dispose()

> **dispose**: () => `void`

Defined in: [host/components/IMyopComponent.ts:83](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L83)

#### Returns

`void`

***

### element?

> `optional` **element**: `HTMLElement`

Defined in: [host/components/IMyopComponent.ts:70](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L70)

***

### id

> **id**: `string`

Defined in: [host/components/IMyopComponent.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L57)

***

### initiated()

> **initiated**: () => `Promise`\<`any`\>

Defined in: [host/components/IMyopComponent.ts:81](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L81)

#### Returns

`Promise`\<`any`\>

***

### isInitiated

> **isInitiated**: `boolean`

Defined in: [host/components/IMyopComponent.ts:59](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L59)

***

### markedForDisposed

> **markedForDisposed**: `boolean`

Defined in: [host/components/IMyopComponent.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L61)

***

### observeAutoSize()?

> `optional` **observeAutoSize**: (`options`?) => [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/IMyopComponent.ts:97](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L97)

Observes the iframe content size and automatically syncs it to the iframe element.
Only available for iframe-based components. Uses direct contentDocument access.

#### Parameters

##### options?

[`AutoSizeOptions`](/docs/sdk/host/interfaces/AutoSizeOptions)

Configuration options including size change callback and min/max constraints

#### Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Cleanup function to stop observing

***

### onMessageReceived()

> **onMessageReceived**: (`msg`) => `boolean`

Defined in: [host/components/IMyopComponent.ts:79](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L79)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

***

### parent?

> `optional` **parent**: [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

Defined in: [host/components/IMyopComponent.ts:99](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L99)

***

### props

> **props**: `P`

Defined in: [host/components/IMyopComponent.ts:101](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L101)

***

### refs

> **refs**: `R`

Defined in: [host/components/IMyopComponent.ts:103](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L103)

***

### send()

> **send**: (`msg`) => [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

Defined in: [host/components/IMyopComponent.ts:72](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L72)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)

***

### setInitiated()

> **setInitiated**: () => `void`

Defined in: [host/components/IMyopComponent.ts:63](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L63)

#### Returns

`void`

## Methods

### bind()

#### Call Signature

> **bind**(`messageType`, `handler`): `void`

Defined in: [host/components/IMyopComponent.ts:74](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L74)

##### Parameters

###### messageType

`MyopMessageKey`

###### handler

() => `boolean`

##### Returns

`void`

#### Call Signature

> **bind**\<`T`\>(`messageType`, `handler`): `void`

Defined in: [host/components/IMyopComponent.ts:76](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L76)

##### Type Parameters

• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

##### Parameters

###### messageType

`MyopMessageKey`

###### handler

(`message`) => `boolean`

##### Returns

`void`

***

### hide()

> **hide**(): `void`

Defined in: [host/components/IMyopComponent.ts:85](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L85)

#### Returns

`void`

***

### inspect()

> **inspect**(): `void`

Defined in: [host/components/IMyopComponent.ts:89](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L89)

#### Returns

`void`

***

### show()

> **show**(): `void`

Defined in: [host/components/IMyopComponent.ts:87](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L87)

#### Returns

`void`

---

# Interface: IMyopLoader

Source: /docs/sdk/host/interfaces/IMyopLoader

Defined in: [host/loaders/IMyopLoader.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L5)

## Properties

### load()

> **load**: (`componentDefinition`, `skin`, `container`, `options`?) => `Promise`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\>

Defined in: [host/loaders/IMyopLoader.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L7)

#### Parameters

##### componentDefinition

[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)

##### skin

[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)

##### container

`HTMLElement`

##### options?

[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

#### Returns

`Promise`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\>

***

### type

> **type**: `"IframeLoader"` \| `"WebComponentLoader"` \| `"HTMLLoader"` \| `"MinimizedLoader"`

Defined in: [host/loaders/IMyopLoader.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L6)

---

# Interface: MyopLoaderOptions

Source: /docs/sdk/host/interfaces/MyopLoaderOptions

Defined in: [host/myopLoader.ts:121](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L121)

Interface for loader options used by host frameworks

## Properties

### fadeDuration?

> `optional` **fadeDuration**: `number`

Defined in: [host/myopLoader.ts:123](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L123)

Fade duration in milliseconds (default: 200)

***

### opacity?

> `optional` **opacity**: `number`

Defined in: [host/myopLoader.ts:125](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L125)

Initial opacity (default: 1)

---

# Type Alias: FunctionifyRef\<T\>

Source: /docs/sdk/host/type-aliases/FunctionifyRef

> **FunctionifyRef**\<`T`\>: `{ [K in keyof T]: T[K] extends (args: infer A) => infer R ? (args: A) => Promise<R> : T[K] }`

Defined in: [host/componentCore.ts:549](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L549)

## Type Parameters

• **T** = `any`

---

# Type Alias: propTypes\<T\>

Source: /docs/sdk/host/type-aliases/propTypes

> **propTypes**\<`T`\>: `{ [Property in keyof T]: T[Property] extends { mode: "input" } ? T[Property]["type"] : Promise<T[Property]["type"]> }`

Defined in: [host/componentCore.ts:534](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L534)

## Type Parameters

• **T** *extends* `any`[]

---

# Variable: FALLBACK\_GRADIENT

Source: /docs/sdk/host/variables/FALLBACK_GRADIENT

> `const` **FALLBACK\_GRADIENT**: `"linear-gradient(135deg, #9CA3AF 0%, #D1D5DB 50%, #E5E7EB 100%)"` = `"linear-gradient(135deg, #9CA3AF 0%, #D1D5DB 50%, #E5E7EB 100%)"`

Defined in: [host/myopLoader.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L13)

---

# Variable: LOADER\_GRADIENT

Source: /docs/sdk/host/variables/LOADER_GRADIENT

> `const` **LOADER\_GRADIENT**: `"linear-gradient(135deg, #FF8651 0%, #FFBEA8 50%, #A397F5 100%)"` = `"linear-gradient(135deg, #FF8651 0%, #FFBEA8 50%, #A397F5 100%)"`

Defined in: [host/myopLoader.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L11)

---

# Variable: containerStyleObject

Source: /docs/sdk/host/variables/containerStyleObject

> `const` **containerStyleObject**: `object`

Defined in: [host/myopLoader.ts:156](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L156)

## Type declaration

### alignItems

> **alignItems**: `string` = `"center"`

### bottom

> **bottom**: `number` = `0`

### display

> **display**: `string` = `"flex"`

### justifyContent

> **justifyContent**: `string` = `"center"`

### left

> **left**: `number` = `0`

### position

> **position**: `"absolute"`

### right

> **right**: `number` = `0`

### top

> **top**: `number` = `0`

### zIndex

> **zIndex**: `number` = `1`

---

# Variable: fallbackStyleObject

Source: /docs/sdk/host/variables/fallbackStyleObject

> `const` **fallbackStyleObject**: `object`

Defined in: [host/myopLoader.ts:144](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L144)

## Type declaration

### alignItems

> **alignItems**: `string` = `"center"`

### background

> **background**: `string` = `FALLBACK_GRADIENT`

### bottom

> **bottom**: `number` = `0`

### display

> **display**: `string` = `"flex"`

### justifyContent

> **justifyContent**: `string` = `"center"`

### left

> **left**: `number` = `0`

### position

> **position**: `"absolute"`

### right

> **right**: `number` = `0`

### top

> **top**: `number` = `0`

---

# Variable: loaderStyleObject

Source: /docs/sdk/host/variables/loaderStyleObject

> `const` **loaderStyleObject**: `object`

Defined in: [host/myopLoader.ts:131](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L131)

CSS-in-JS style objects for frameworks that support them

## Type declaration

### alignItems

> **alignItems**: `string` = `"center"`

### background

> **background**: `string` = `LOADER_GRADIENT`

### bottom

> **bottom**: `number` = `0`

### display

> **display**: `string` = `"flex"`

### justifyContent

> **justifyContent**: `string` = `"center"`

### left

> **left**: `number` = `0`

### position

> **position**: `"absolute"`

### right

> **right**: `number` = `0`

### top

> **top**: `number` = `0`

### zIndex

> **zIndex**: `number` = `1`

---

# sdk

Source: /docs/sdk

<p align="center">
  <a href="https://myop.dev">
    <img src="https://docs.myop.dev/img/logo.svg" alt="Myop Logo" width="200" />
  </a>
</p>

<h1 align="center">Myop SDK</h1>

<p align="center">
  <strong>Dynamic UI component management for modern web applications</strong>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/v/@myop/sdk.svg?style=flat-square" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/dm/@myop/sdk.svg?style=flat-square" alt="npm downloads" /></a>
  <a href="https://myop.dev/discord"><img src="https://img.shields.io/badge/Discord-Join%20Us-7289da?style=flat-square&logo=discord&logoColor=white" alt="Discord" /></a>
</p>

<p align="center">
  <a href="https://docs.myop.dev">Documentation</a> |
  <a href="https://myop.dev">Website</a> |
  <a href="https://myop.dev/discord">Discord</a>
</p>

---

## What is Myop?

Myop is an open-source SDK that enables **real-time UI modifications without deployments**. It bridges your application logic with dynamically swappable user interfaces, allowing developers to:

- Experiment with UI/UX changes instantly
- Refactor component appearance without touching core functionality
- Maintain typed communication between components and host applications
- Load and manage UI components dynamically at runtime

## Installation

```bash
npm install @myop/sdk
```

Or via CDN:

```html
<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
```

## Quick Start

### Using npm/ESM

```typescript
import { getHostModule } from '@myop/sdk';

// Initialize the SDK
const { hostSDK } = await getHostModule();
hostSDK.init();

// Load a component
const component = await hostSDK.loadComponent(componentConfig, containerElement);
await component.initiated();
```

### Using CDN

```html
<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
<script>
  const { hostSDK } = await window.myop.rootSDK.getHostModule();
  hostSDK.init();

  const component = await hostSDK.loadComponent(config, document.getElementById('app'));
  await component.initiated();
</script>
```

## Architecture

The Myop SDK is modular, consisting of several specialized packages:

| Module | Description | Import |
|--------|-------------|--------|
| **Host SDK** | Core module for embedding and managing Myop components | `@myop/sdk` or `@myop/sdk/host` |
| **Iframe SDK** | Secure isolation for components in iframes | `@myop/sdk/iframe` |
| **WebComponent SDK** | Support for self-contained web components | `@myop/sdk/webcomponent` |
| **Messages** | Type-safe communication between host and components | `@myop/sdk/messages` |
| **Helpers** | Utility functions and configuration builders | `@myop/sdk/helpers` |

## Framework Integration

Myop provides official framework packages for seamless integration:

| Package | Install |
|---------|---------|
| React | `npm install @myop/react` |
| Vue.js | `npm install @myop/vue` |
| Angular | `npm install @myop/angular` |

<details>
<summary><strong>React</strong></summary>

```bash
npm install @myop/react
```

```tsx
import { MyopComponent } from '@myop/react';

function App() {
  return (
    <MyopComponent
      componentId="your-component-id"
      environment="production"
      data={{ user: 'John' }}
      onLoad={(component) => console.log('Component loaded', component)}
      onError={(error) => console.error('Error:', error)}
      on={(action, payload) => {
        // Handle CTA actions from the component
        console.log('Action:', action, payload);
      }}
      loader={<div>Loading...</div>}
      fallback={<div>Failed to load</div>}
    />
  );
}
```

**Props:**

| Prop | Type | Description |
|------|------|-------------|
| `componentId` | `string` | Component ID from Myop Cloud |
| `environment` | `string` | Environment identifier (default: `"production"`) |
| `data` | `any` | Data passed to `myop_init_interface` |
| `onLoad` | `(component) => void` | Called when component loads |
| `onError` | `(error) => void` | Called on error |
| `on` | `(action, payload) => void` | Handler for `myop_cta_handler` calls |
| `loader` | `ReactNode` | Custom loading indicator |
| `fallback` | `ReactNode` | Custom error fallback |
| `fadeDuration` | `number` | Loader fade duration in ms |

**Preloading:**

```tsx
import { preload, isPreloaded } from '@myop/react';

// Preload components for faster rendering
await preload(['component-1', 'component-2'], 'production');

// Check if already loaded
if (isPreloaded('component-1')) {
  // Component will render instantly
}
```

**Local Development:**

```tsx
import { enableLocalDev } from '@myop/react';

// Point to local server
enableLocalDev();
```

</details>

<details>
<summary><strong>Vue.js</strong></summary>

```bash
npm install @myop/vue
```

```vue
<template>
  <MyopContainer
    :componentId="componentId"
    :flowId="flowId"
    @ready="onReady"
    v-bind="$attrs"
  >
    <template #loading>
      <div>Loading...</div>
    </template>
  </MyopContainer>
</template>

<script setup lang="ts">
import { MyopContainer } from '@myop/vue';
import type { IMyopComponent } from '@myop/sdk/host';

const componentId = 'your-component-id';
const flowId = 'optional-flow-id';

const onReady = (component: IMyopComponent, innerRef?: any) => {
  console.log('Component loaded', component);
};
</script>
```

**Props:**

| Prop | Type | Description |
|------|------|-------------|
| `componentId` | `string` | Component ID from Myop Cloud |
| `flowId` | `string?` | Optional flow ID |
| `onReady` | `(component, innerRef?) => void` | Called when component loads |

**Slots:**

| Slot | Description |
|------|-------------|
| `loading` | Shown while component loads |

</details>

<details>
<summary><strong>Angular</strong></summary>

```bash
npm install @myop/angular
```

```typescript
import { Component } from '@angular/core';
import { MyopContainerComponent } from '@myop/angular';
import type { IMyopComponent } from '@myop/sdk/host';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyopContainerComponent],
  template: `
    <myop-container
      [componentId]="componentId"
      [flowId]="flowId"
      [inputs]="inputs"
      (componentReady)="onComponentReady($event)"
    >
      <!-- Content shown while loading -->
      <div>Loading...</div>
    </myop-container>
  `
})
export class AppComponent {
  componentId = 'your-component-id';
  flowId?: string;
  inputs = { theme: 'dark' };

  onComponentReady(component: IMyopComponent) {
    console.log('Component loaded', component);
  }
}
```

**Inputs:**

| Input | Type | Description |
|-------|------|-------------|
| `componentId` | `string` | Component ID from Myop Cloud |
| `flowId` | `string?` | Optional flow ID |
| `inputs` | `object` | Data passed to the component |

**Outputs:**

| Output | Type | Description |
|--------|------|-------------|
| `componentReady` | `IMyopComponent` | Emitted when component loads |

</details>

<details>
<summary><strong>Vanilla JavaScript / CDN</strong></summary>

```html
<div id="myop-container"></div>

<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
<script>
  async function init() {
    const { hostSDK } = await window.myop.rootSDK.getHostModule();
    const { CloudRepository } = await window.myop.rootSDK.getMyopHelpers();

    const container = document.getElementById('myop-container');

    // ============ V1: User Flows ============
    // Fetch from auto-generated flow
    const configV1 = await CloudRepository.Main.fetchComponentV1('component-id');
    await hostSDK.loadComponent(configV1, container);

    // Or fetch from a specific flow
    const configFromFlow = await CloudRepository.Main.fetchComponentV1('component-id', 'flow-id');

    // ============ V2: Direct Variant Loading ============
    // Fetch variant directly by component ID and environment
    const variantV2 = await CloudRepository.Main.fetchComponentV2('component-id', 'production');
    await hostSDK.loadComponent(variantV2, container);
  }

  init();
</script>
```

</details>

## API Reference

### CloudRepository

Fetch component configurations from Myop Cloud:

```typescript
import { CloudRepository } from '@myop/sdk/helpers';

// Fetch a component (v1 - from user flows)
const componentConfig = await CloudRepository.Main.fetchComponent('component-id');

// Fetch a component from a specific flow
const componentConfig = await CloudRepository.Main.fetchComponent('component-id', 'flow-id');

// Fetch a v2 component variant
const variantConfig = await CloudRepository.Main.fetchComponentV2('component-id', 'environment');

// Fetch a complete user flow
const flow = await CloudRepository.Main.fetchFlow('flow-id');

// Check if a component is preloaded
const isLoaded = CloudRepository.Main.isPreloaded('component-id');
```

### Host SDK

```typescript
import { getHostModule } from '@myop/sdk';

const { hostSDK } = await getHostModule();

// Load a component into a container
const component = await hostSDK.loadComponent(componentConfig, containerElement);

// Load with options
const component = await hostSDK.loadComponent(componentConfig, container, {
  hidden: false,           // Start hidden
  connectProps: true,      // Auto-connect props (default: true)
  timeout: 5000,           // Initialization timeout
  hooks: {                 // Lifecycle hooks
    afterSkinSelected: async (skin) => skin
  }
});

// Navigate to a different component
const newComponent = await hostSDK.navigate(currentComponent, newConfig, {
  staged: true,  // Load new component before disposing old one
});

// Send messages to component
component.send(message);

// Dispose component
component.dispose();
```

### ComponentConfig Builder

Build component configurations programmatically:

```typescript
import { ComponentConfig, SkinConfig } from '@myop/sdk/helpers';

const skin = SkinConfig.create()
  .withHTMLLoader({
    HTML: '<div>My Component</div>',
    shadowRootMode: 'open'
  })
  .build();

const config = ComponentConfig.create()
  .withName('my-component')
  .withDefaultSkin(skin)
  .withBasicRef('header')
  .withBasicRef('content')
  .build();
```

### Iframe SDK

For components running inside iframes:

```typescript
import { getIframeModule } from '@myop/sdk';

const { IframeSDK } = await getIframeModule();
```

### WebComponent SDK

For self-contained web components:

```typescript
import { getWebcomponentModule } from '@myop/sdk';

const { WebComponentSDK } = await getWebcomponentModule();
```

## Documentation

For comprehensive documentation, guides, and examples, visit **[docs.myop.dev](https://docs.myop.dev)**.

- [Getting Started Guide](https://docs.myop.dev/docs/quickstart)
- [SDK Reference](https://docs.myop.dev/docs/sdk)
- [Auto-Generated Packages](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages)

## Related Resources

- [Read more about Myop](https://myop.dev)
- [Myop Documentation](https://docs.myop.dev)
- [Discord Community](https://myop.dev/discord)

## License

This project is licensed under the [MIT License](LICENSE).

---

<p align="center">
  Made with care by the <a href="https://myop.dev">Myop</a> team
</p>

---

# Class: AddEventListenerMessage\<T\>

Source: /docs/sdk/messages/classes/AddEventListenerMessage

Defined in: [messages/AddEventListenerMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L7)

## Extends

- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)

## Type Parameters

• **T** *extends* keyof `HTMLElementEventMap` = keyof `HTMLElementEventMap`

## Constructors

### new AddEventListenerMessage()

> **new AddEventListenerMessage**\<`T`\>(`ref`, `type`, `handler`): [`AddEventListenerMessage`](/docs/sdk/messages/classes/AddEventListenerMessage)\<`T`\>

Defined in: [messages/AddEventListenerMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L14)

#### Parameters

##### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

##### type

`T`

##### handler

(`message`) => `void`

#### Returns

[`AddEventListenerMessage`](/docs/sdk/messages/classes/AddEventListenerMessage)\<`T`\>

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `true`

Defined in: [messages/AddEventListenerMessage.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L11)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`content`](/docs/sdk/messages/classes/MyopBindMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`destination`](/docs/sdk/messages/classes/MyopBindMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`direction`](/docs/sdk/messages/classes/MyopBindMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/AddEventListenerMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L14)

#### Parameters

##### message

[`EventListenerCallbackMessage`](/docs/sdk/messages/classes/EventListenerCallbackMessage)

#### Returns

`void`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handler`](/docs/sdk/messages/classes/MyopBindMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/MyopBindMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`id`](/docs/sdk/messages/classes/MyopBindMessage#id)

***

### messageType

> **messageType**: `string` = `'AddEventListenerMessage'`

Defined in: [messages/AddEventListenerMessage.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L10)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`myop`](/docs/sdk/messages/classes/MyopBindMessage#myop)

***

### ref

> **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/AddEventListenerMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`ref`](/docs/sdk/messages/classes/MyopBindMessage#ref)

***

### replyMessageKey

> **replyMessageKey**: `MyopMessageKey` = `ReplayMessageKey`

Defined in: [messages/AddEventListenerMessage.ts:9](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L9)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`replyMessageKey`](/docs/sdk/messages/classes/MyopBindMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`route`](/docs/sdk/messages/classes/MyopBindMessage#route)

***

### serializableSkeleton

> **serializableSkeleton**: `SerializableSkeleton`\<`HTMLElementEventMap`\[`T`\]\> = `false`

Defined in: [messages/AddEventListenerMessage.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L12)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`source`](/docs/sdk/messages/classes/MyopBindMessage#source)

***

### type

> **type**: `T`

Defined in: [messages/AddEventListenerMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L14)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindMessage#istypeof)

***

### withSerializableSkeleton()

> **withSerializableSkeleton**(`serializableSkeleton`): [`AddEventListenerMessage`](/docs/sdk/messages/classes/AddEventListenerMessage)\<`T`\>

Defined in: [messages/AddEventListenerMessage.ts:18](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L18)

#### Parameters

##### serializableSkeleton

`SerializableSkeleton`\<`HTMLElementEventMap`\[`T`\]\>

#### Returns

[`AddEventListenerMessage`](/docs/sdk/messages/classes/AddEventListenerMessage)\<`T`\>

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`create`](/docs/sdk/messages/classes/MyopBindMessage#create)

---

# Class: `abstract` BaseMyopMessage\<T\>

Source: /docs/sdk/messages/classes/BaseMyopMessage

Defined in: [messages/BaseMessage.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L13)

## Extended by

- [`MyopElementMessage`](/docs/sdk/messages/classes/MyopElementMessage)
- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)
- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)
- [`ChangeTextMessage`](/docs/sdk/messages/classes/ChangeTextMessage)
- [`SetAttributeMessage`](/docs/sdk/messages/classes/SetAttributeMessage)
- [`SetInnerHtml`](/docs/sdk/messages/classes/SetInnerHtml)
- [`InitMessage`](/docs/sdk/messages/classes/InitMessage)
- [`InitRequest`](/docs/sdk/messages/classes/InitRequest)
- [`EnvelopedMessage`](/docs/sdk/messages/classes/EnvelopedMessage)
- [`ExecuteComponentMethod`](/docs/sdk/messages/classes/ExecuteComponentMethod)
- [`SetMutationObserverMessage`](/docs/sdk/messages/classes/SetMutationObserverMessage)
- [`MutationObserverMessage`](/docs/sdk/messages/classes/MutationObserverMessage)
- [`DisposeMessage`](/docs/sdk/messages/classes/DisposeMessage)
- [`SetResizeObserverMessage`](/docs/sdk/messages/classes/SetResizeObserverMessage)
- [`ResizeObserverMessage`](/docs/sdk/messages/classes/ResizeObserverMessage)

## Type Parameters

• **T** = `any`

## Constructors

### new BaseMyopMessage()

> **new BaseMyopMessage**\<`T`\>(): [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)\<`T`\>

Defined in: [messages/BaseMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L24)

#### Returns

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)\<`T`\>

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

***

### content?

> `optional` **content**: `T`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

***

### messageType

> `abstract` **messageType**: `string` \| `string` & `Record`\<`never`, `never`\>

Defined in: [messages/BaseMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L30)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

---

# Class: BindClickMessage

Source: /docs/sdk/messages/classes/BindClickMessage

Defined in: [messages/BindClickMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BindClickMessage.ts#L6)

## Extends

- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`void`, [`ClickReplayMessage`](/docs/sdk/messages/classes/ClickReplayMessage)\>

## Constructors

### new BindClickMessage()

> **new BindClickMessage**(`ref`, `handler`): [`BindClickMessage`](/docs/sdk/messages/classes/BindClickMessage)

Defined in: [messages/BindClickMessage.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BindClickMessage.ts#L11)

#### Parameters

##### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

##### handler

(`message`) => `void`

#### Returns

[`BindClickMessage`](/docs/sdk/messages/classes/BindClickMessage)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `true`

Defined in: [messages/BindClickMessage.ts:9](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BindClickMessage.ts#L9)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindMessage#cleanable)

***

### content?

> `optional` **content**: `void`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`content`](/docs/sdk/messages/classes/MyopBindMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`destination`](/docs/sdk/messages/classes/MyopBindMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`direction`](/docs/sdk/messages/classes/MyopBindMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

[`ClickReplayMessage`](/docs/sdk/messages/classes/ClickReplayMessage)

#### Returns

`void`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handler`](/docs/sdk/messages/classes/MyopBindMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/MyopBindMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`id`](/docs/sdk/messages/classes/MyopBindMessage#id)

***

### messageType

> **messageType**: `string` = `'BindClickMessage'`

Defined in: [messages/BindClickMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BindClickMessage.ts#L8)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`myop`](/docs/sdk/messages/classes/MyopBindMessage#myop)

***

### ref

> **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BindClickMessage.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BindClickMessage.ts#L11)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`ref`](/docs/sdk/messages/classes/MyopBindMessage#ref)

***

### replyMessageKey

> **replyMessageKey**: `MyopMessageKey` = `ReplayMessageKey`

Defined in: [messages/BindClickMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BindClickMessage.ts#L7)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`replyMessageKey`](/docs/sdk/messages/classes/MyopBindMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`route`](/docs/sdk/messages/classes/MyopBindMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`source`](/docs/sdk/messages/classes/MyopBindMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`create`](/docs/sdk/messages/classes/MyopBindMessage#create)

---

# Class: ChangeTextMessage

Source: /docs/sdk/messages/classes/ChangeTextMessage

Defined in: [messages/ChangeTextMessage.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ChangeTextMessage.ts#L3)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)\<`string`\>

## Constructors

### new ChangeTextMessage()

> **new ChangeTextMessage**(`ref`, `text`): [`ChangeTextMessage`](/docs/sdk/messages/classes/ChangeTextMessage)

Defined in: [messages/ChangeTextMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ChangeTextMessage.ts#L7)

#### Parameters

##### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

##### text

`string`

#### Returns

[`ChangeTextMessage`](/docs/sdk/messages/classes/ChangeTextMessage)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `string`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'ChangeTextMessage'`

Defined in: [messages/ChangeTextMessage.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ChangeTextMessage.ts#L5)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref

> **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/ChangeTextMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ChangeTextMessage.ts#L7)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: CleanupMessage

Source: /docs/sdk/messages/classes/CleanupMessage

Defined in: [messages/CleanupMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L6)

## Extends

- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`void`, [`CleanupReplayMessage`](/docs/sdk/messages/classes/CleanupReplayMessage)\>

## Constructors

### new CleanupMessage()

> **new CleanupMessage**(`cleanupForMessageId`, `handler`): [`CleanupMessage`](/docs/sdk/messages/classes/CleanupMessage)

Defined in: [messages/CleanupMessage.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L10)

#### Parameters

##### cleanupForMessageId

`string`

##### handler

(`message`) => `void`

#### Returns

[`CleanupMessage`](/docs/sdk/messages/classes/CleanupMessage)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindMessage#cleanable)

***

### cleanupForMessageId

> **cleanupForMessageId**: `string`

Defined in: [messages/CleanupMessage.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L10)

***

### content?

> `optional` **content**: `void`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`content`](/docs/sdk/messages/classes/MyopBindMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`destination`](/docs/sdk/messages/classes/MyopBindMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`direction`](/docs/sdk/messages/classes/MyopBindMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

[`CleanupReplayMessage`](/docs/sdk/messages/classes/CleanupReplayMessage)

#### Returns

`void`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handler`](/docs/sdk/messages/classes/MyopBindMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/MyopBindMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`id`](/docs/sdk/messages/classes/MyopBindMessage#id)

***

### messageType

> **messageType**: `string` = `'CleanupMessage'`

Defined in: [messages/CleanupMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L8)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`myop`](/docs/sdk/messages/classes/MyopBindMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`ref`](/docs/sdk/messages/classes/MyopBindMessage#ref)

***

### replyMessageKey

> **replyMessageKey**: `MyopMessageKey` = `ReplayMessageKey`

Defined in: [messages/CleanupMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L7)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`replyMessageKey`](/docs/sdk/messages/classes/MyopBindMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`route`](/docs/sdk/messages/classes/MyopBindMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`source`](/docs/sdk/messages/classes/MyopBindMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`create`](/docs/sdk/messages/classes/MyopBindMessage#create)

---

# Class: CleanupReplayMessage

Source: /docs/sdk/messages/classes/CleanupReplayMessage

Defined in: [messages/CleanupMessage.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L15)

## Extends

- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

## Constructors

### new CleanupReplayMessage()

> **new CleanupReplayMessage**(`customCleanup`): [`CleanupReplayMessage`](/docs/sdk/messages/classes/CleanupReplayMessage)

Defined in: [messages/CleanupMessage.ts:18](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L18)

#### Parameters

##### customCleanup

`boolean`

#### Returns

[`CleanupReplayMessage`](/docs/sdk/messages/classes/CleanupReplayMessage)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindReplayMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindReplayMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`content`](/docs/sdk/messages/classes/MyopBindReplayMessage#content)

***

### customCleanup

> **customCleanup**: `boolean`

Defined in: [messages/CleanupMessage.ts:18](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L18)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`destination`](/docs/sdk/messages/classes/MyopBindReplayMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`direction`](/docs/sdk/messages/classes/MyopBindReplayMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`id`](/docs/sdk/messages/classes/MyopBindReplayMessage#id)

***

### messageType

> **messageType**: `string` = `ReplayMessageKey`

Defined in: [messages/CleanupMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CleanupMessage.ts#L16)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindReplayMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`myop`](/docs/sdk/messages/classes/MyopBindReplayMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`ref`](/docs/sdk/messages/classes/MyopBindReplayMessage#ref)

***

### replayToHandler?

> `optional` **replayToHandler**: `string`

Defined in: [messages/BaseMessage.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L58)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`replayToHandler`](/docs/sdk/messages/classes/MyopBindReplayMessage#replaytohandler-1)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`route`](/docs/sdk/messages/classes/MyopBindReplayMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`source`](/docs/sdk/messages/classes/MyopBindReplayMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindReplayMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`create`](/docs/sdk/messages/classes/MyopBindReplayMessage#create)

---

# Class: ClickReplayMessage

Source: /docs/sdk/messages/classes/ClickReplayMessage

Defined in: [messages/BindClickMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BindClickMessage.ts#L16)

## Extends

- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

## Constructors

### new ClickReplayMessage()

> **new ClickReplayMessage**(`replayToHandler`?): [`ClickReplayMessage`](/docs/sdk/messages/classes/ClickReplayMessage)

Defined in: [messages/BaseMessage.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L58)

#### Parameters

##### replayToHandler?

`string`

#### Returns

[`ClickReplayMessage`](/docs/sdk/messages/classes/ClickReplayMessage)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindReplayMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindReplayMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`content`](/docs/sdk/messages/classes/MyopBindReplayMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`destination`](/docs/sdk/messages/classes/MyopBindReplayMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`direction`](/docs/sdk/messages/classes/MyopBindReplayMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`id`](/docs/sdk/messages/classes/MyopBindReplayMessage#id)

***

### messageType

> **messageType**: `string` = `ReplayMessageKey`

Defined in: [messages/BindClickMessage.ts:17](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BindClickMessage.ts#L17)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindReplayMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`myop`](/docs/sdk/messages/classes/MyopBindReplayMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`ref`](/docs/sdk/messages/classes/MyopBindReplayMessage#ref)

***

### replayToHandler?

> `optional` **replayToHandler**: `string`

Defined in: [messages/BaseMessage.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L58)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`replayToHandler`](/docs/sdk/messages/classes/MyopBindReplayMessage#replaytohandler-1)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`route`](/docs/sdk/messages/classes/MyopBindReplayMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`source`](/docs/sdk/messages/classes/MyopBindReplayMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindReplayMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`create`](/docs/sdk/messages/classes/MyopBindReplayMessage#create)

---

# Class: CreateRefComponentMessage

Source: /docs/sdk/messages/classes/CreateRefComponentMessage

Defined in: [messages/CreateRefComponentMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L8)

## Extends

- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`void`, [`RefComponentCreatedMessage`](/docs/sdk/messages/classes/RefComponentCreatedMessage)\>

## Constructors

### new CreateRefComponentMessage()

> **new CreateRefComponentMessage**(`refConfig`, `nestedComponentConfig`, `options`, `handler`): [`CreateRefComponentMessage`](/docs/sdk/messages/classes/CreateRefComponentMessage)

Defined in: [messages/CreateRefComponentMessage.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L12)

#### Parameters

##### refConfig

[`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)

##### nestedComponentConfig

[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)

##### options

[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

##### handler

(`message`) => `void`

#### Returns

[`CreateRefComponentMessage`](/docs/sdk/messages/classes/CreateRefComponentMessage)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindMessage#cleanable)

***

### content?

> `optional` **content**: `void`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`content`](/docs/sdk/messages/classes/MyopBindMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`destination`](/docs/sdk/messages/classes/MyopBindMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`direction`](/docs/sdk/messages/classes/MyopBindMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

[`RefComponentCreatedMessage`](/docs/sdk/messages/classes/RefComponentCreatedMessage)

#### Returns

`void`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handler`](/docs/sdk/messages/classes/MyopBindMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/MyopBindMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`id`](/docs/sdk/messages/classes/MyopBindMessage#id)

***

### messageType

> **messageType**: `string` = `'CreateRefComponentMessage'`

Defined in: [messages/CreateRefComponentMessage.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L10)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`myop`](/docs/sdk/messages/classes/MyopBindMessage#myop)

***

### nestedComponentConfig

> **nestedComponentConfig**: [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)

Defined in: [messages/CreateRefComponentMessage.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L13)

***

### options

> **options**: [`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)

Defined in: [messages/CreateRefComponentMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L14)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`ref`](/docs/sdk/messages/classes/MyopBindMessage#ref)

***

### refConfig

> **refConfig**: [`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)

Defined in: [messages/CreateRefComponentMessage.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L12)

***

### replyMessageKey

> **replyMessageKey**: `MyopMessageKey` = `ReplayMessageKey`

Defined in: [messages/CreateRefComponentMessage.ts:9](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L9)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`replyMessageKey`](/docs/sdk/messages/classes/MyopBindMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`route`](/docs/sdk/messages/classes/MyopBindMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`source`](/docs/sdk/messages/classes/MyopBindMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`create`](/docs/sdk/messages/classes/MyopBindMessage#create)

---

# Class: CustomRefMessage\<T, I\>

Source: /docs/sdk/messages/classes/CustomRefMessage

Defined in: [messages/CustomRefMessage.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CustomRefMessage.ts#L15)

## Extends

- [`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage)\<`T`, `I` & [`customRefScriptInputs`](/docs/sdk/messages/type-aliases/customRefScriptInputs)\>

## Type Parameters

• **T** = `any`

• **I** *extends* [`scriptInputs`](/docs/sdk/messages/type-aliases/scriptInputs) = [`customRefScriptInputs`](/docs/sdk/messages/type-aliases/customRefScriptInputs)

## Constructors

### new CustomRefMessage()

> **new CustomRefMessage**\<`T`, `I`\>(`script`, `scriptInputs`, `handler`): [`CustomRefMessage`](/docs/sdk/messages/classes/CustomRefMessage)\<`T`, `I`\>

Defined in: [messages/CustomRefMessage.ts:17](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CustomRefMessage.ts#L17)

#### Parameters

##### script

(`vars`) => `T`

##### scriptInputs

`I` & [`customRefScriptInputs`](/docs/sdk/messages/type-aliases/customRefScriptInputs)

##### handler

(`message`) => `void`

#### Returns

[`CustomRefMessage`](/docs/sdk/messages/classes/CustomRefMessage)\<`T`, `I`\>

#### Overrides

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`constructor`](/docs/sdk/messages/classes/ExecuteScriptMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`cleanable`](/docs/sdk/messages/classes/ExecuteScriptMessage#cleanable)

***

### content?

> `optional` **content**: `string`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`content`](/docs/sdk/messages/classes/ExecuteScriptMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`destination`](/docs/sdk/messages/classes/ExecuteScriptMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`direction`](/docs/sdk/messages/classes/ExecuteScriptMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

[`ExecuteScriptReplyMessage`](/docs/sdk/messages/classes/ExecuteScriptReplyMessage)\<`T`\>

#### Returns

`void`

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`handler`](/docs/sdk/messages/classes/ExecuteScriptMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/ExecuteScriptMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`id`](/docs/sdk/messages/classes/ExecuteScriptMessage#id)

***

### messageType

> **messageType**: `string` = `'ExecuteScriptMessage'`

Defined in: [messages/ExecuteScriptMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L40)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`messageType`](/docs/sdk/messages/classes/ExecuteScriptMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`myop`](/docs/sdk/messages/classes/ExecuteScriptMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`ref`](/docs/sdk/messages/classes/ExecuteScriptMessage#ref)

***

### replyMessageKey

> **replyMessageKey**: `MyopMessageKey` = `ReplayMessageKey`

Defined in: [messages/ExecuteScriptMessage.ts:39](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L39)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`replyMessageKey`](/docs/sdk/messages/classes/ExecuteScriptMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`route`](/docs/sdk/messages/classes/ExecuteScriptMessage#route)

***

### script

> **script**: `string` = `''`

Defined in: [messages/ExecuteScriptMessage.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L41)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`script`](/docs/sdk/messages/classes/ExecuteScriptMessage#script-1)

***

### scriptInputs

> **scriptInputs**: `I` & [`customRefScriptInputs`](/docs/sdk/messages/type-aliases/customRefScriptInputs)

Defined in: [messages/CustomRefMessage.ts:18](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CustomRefMessage.ts#L18)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`scriptInputs`](/docs/sdk/messages/classes/ExecuteScriptMessage#scriptinputs-1)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`source`](/docs/sdk/messages/classes/ExecuteScriptMessage#source)

***

### completeStreamKey

> `static` **completeStreamKey**: `string` = `'completeStream'`

Defined in: [messages/ExecuteScriptMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L44)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`completeStreamKey`](/docs/sdk/messages/classes/ExecuteScriptMessage#completestreamkey)

***

### replierKey

> `static` **replierKey**: `string` = `'send'`

Defined in: [messages/ExecuteScriptMessage.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L43)

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`replierKey`](/docs/sdk/messages/classes/ExecuteScriptMessage#replierkey)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`isTypeof`](/docs/sdk/messages/classes/ExecuteScriptMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage).[`create`](/docs/sdk/messages/classes/ExecuteScriptMessage#create)

---

# Class: DetectMyopRefsMessage

Source: /docs/sdk/messages/classes/DetectMyopRefsMessage

Defined in: [messages/DetectMyopRefsMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DetectMyopRefsMessage.ts#L6)

## Extends

- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`any`, [`DetectedMyopRefsMessage`](/docs/sdk/messages/classes/DetectedMyopRefsMessage)\>

## Constructors

### new DetectMyopRefsMessage()

> **new DetectMyopRefsMessage**(`handler`): [`DetectMyopRefsMessage`](/docs/sdk/messages/classes/DetectMyopRefsMessage)

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### handler

(`message`) => `void`

#### Returns

[`DetectMyopRefsMessage`](/docs/sdk/messages/classes/DetectMyopRefsMessage)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`content`](/docs/sdk/messages/classes/MyopBindMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`destination`](/docs/sdk/messages/classes/MyopBindMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`direction`](/docs/sdk/messages/classes/MyopBindMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

[`DetectedMyopRefsMessage`](/docs/sdk/messages/classes/DetectedMyopRefsMessage)

#### Returns

`void`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handler`](/docs/sdk/messages/classes/MyopBindMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/MyopBindMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`id`](/docs/sdk/messages/classes/MyopBindMessage#id)

***

### messageType

> **messageType**: `string` = `'DetectMyopRefsMessage'`

Defined in: [messages/DetectMyopRefsMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DetectMyopRefsMessage.ts#L7)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`myop`](/docs/sdk/messages/classes/MyopBindMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`ref`](/docs/sdk/messages/classes/MyopBindMessage#ref)

***

### replyMessageKey

> **replyMessageKey**: `string` = `ReplayMessageKey`

Defined in: [messages/DetectMyopRefsMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DetectMyopRefsMessage.ts#L8)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`replyMessageKey`](/docs/sdk/messages/classes/MyopBindMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`route`](/docs/sdk/messages/classes/MyopBindMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`source`](/docs/sdk/messages/classes/MyopBindMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`create`](/docs/sdk/messages/classes/MyopBindMessage#create)

---

# Class: DetectedMyopRefsMessage

Source: /docs/sdk/messages/classes/DetectedMyopRefsMessage

Defined in: [messages/DetectMyopRefsMessage.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DetectMyopRefsMessage.ts#L11)

## Extends

- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)\<[`IElementRef`](/docs/sdk/common/interfaces/IElementRef)[]\>

## Constructors

### new DetectedMyopRefsMessage()

> **new DetectedMyopRefsMessage**(`replayToHandler`, `myopElementRefs`): [`DetectedMyopRefsMessage`](/docs/sdk/messages/classes/DetectedMyopRefsMessage)

Defined in: [messages/DetectMyopRefsMessage.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DetectMyopRefsMessage.ts#L15)

#### Parameters

##### replayToHandler

`string`

##### myopElementRefs

[`IElementRef`](/docs/sdk/common/interfaces/IElementRef)[]

#### Returns

[`DetectedMyopRefsMessage`](/docs/sdk/messages/classes/DetectedMyopRefsMessage)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindReplayMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindReplayMessage#cleanable)

***

### content?

> `optional` **content**: [`IElementRef`](/docs/sdk/common/interfaces/IElementRef)[]

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`content`](/docs/sdk/messages/classes/MyopBindReplayMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`destination`](/docs/sdk/messages/classes/MyopBindReplayMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`direction`](/docs/sdk/messages/classes/MyopBindReplayMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`id`](/docs/sdk/messages/classes/MyopBindReplayMessage#id)

***

### messageType

> **messageType**: `string` = `ReplayMessageKey`

Defined in: [messages/DetectMyopRefsMessage.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DetectMyopRefsMessage.ts#L13)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindReplayMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`myop`](/docs/sdk/messages/classes/MyopBindReplayMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`ref`](/docs/sdk/messages/classes/MyopBindReplayMessage#ref)

***

### replayToHandler

> **replayToHandler**: `string`

Defined in: [messages/DetectMyopRefsMessage.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DetectMyopRefsMessage.ts#L15)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`replayToHandler`](/docs/sdk/messages/classes/MyopBindReplayMessage#replaytohandler-1)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`route`](/docs/sdk/messages/classes/MyopBindReplayMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`source`](/docs/sdk/messages/classes/MyopBindReplayMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/DetectMyopRefsMessage.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DetectMyopRefsMessage.ts#L20)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindReplayMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`create`](/docs/sdk/messages/classes/MyopBindReplayMessage#create)

---

# Class: DisposeMessage

Source: /docs/sdk/messages/classes/DisposeMessage

Defined in: [messages/DisposeMessage.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DisposeMessage.ts#L3)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new DisposeMessage()

> **new DisposeMessage**(): [`DisposeMessage`](/docs/sdk/messages/classes/DisposeMessage)

Defined in: [messages/BaseMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L24)

#### Returns

[`DisposeMessage`](/docs/sdk/messages/classes/DisposeMessage)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'DisposeMessage'`

Defined in: [messages/DisposeMessage.ts:4](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/DisposeMessage.ts#L4)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: ElementValueReplayMessage

Source: /docs/sdk/messages/classes/ElementValueReplayMessage

Defined in: [messages/GetElementValueMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L32)

## Extends

- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

## Constructors

### new ElementValueReplayMessage()

> **new ElementValueReplayMessage**(`content`): [`ElementValueReplayMessage`](/docs/sdk/messages/classes/ElementValueReplayMessage)

Defined in: [messages/GetElementValueMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L35)

#### Parameters

##### content

[`InputElementValue`](/docs/sdk/messages/type-aliases/InputElementValue)

#### Returns

[`ElementValueReplayMessage`](/docs/sdk/messages/classes/ElementValueReplayMessage)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindReplayMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindReplayMessage#cleanable)

***

### content

> **content**: [`InputElementValue`](/docs/sdk/messages/type-aliases/InputElementValue)

Defined in: [messages/GetElementValueMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`content`](/docs/sdk/messages/classes/MyopBindReplayMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`destination`](/docs/sdk/messages/classes/MyopBindReplayMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`direction`](/docs/sdk/messages/classes/MyopBindReplayMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`id`](/docs/sdk/messages/classes/MyopBindReplayMessage#id)

***

### messageType

> **messageType**: `string` = `ReplayMessageKey`

Defined in: [messages/GetElementValueMessage.ts:33](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L33)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindReplayMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`myop`](/docs/sdk/messages/classes/MyopBindReplayMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`ref`](/docs/sdk/messages/classes/MyopBindReplayMessage#ref)

***

### replayToHandler?

> `optional` **replayToHandler**: `string`

Defined in: [messages/BaseMessage.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L58)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`replayToHandler`](/docs/sdk/messages/classes/MyopBindReplayMessage#replaytohandler-1)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`route`](/docs/sdk/messages/classes/MyopBindReplayMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`source`](/docs/sdk/messages/classes/MyopBindReplayMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindReplayMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`create`](/docs/sdk/messages/classes/MyopBindReplayMessage#create)

---

# Class: EnvelopedMessage

Source: /docs/sdk/messages/classes/EnvelopedMessage

Defined in: [messages/EnvelopedMessage.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/EnvelopedMessage.ts#L3)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new EnvelopedMessage()

> **new EnvelopedMessage**(`destination`, `message`): [`EnvelopedMessage`](/docs/sdk/messages/classes/EnvelopedMessage)

Defined in: [messages/EnvelopedMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/EnvelopedMessage.ts#L6)

#### Parameters

##### destination

`string`

##### message

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

[`EnvelopedMessage`](/docs/sdk/messages/classes/EnvelopedMessage)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination

> **destination**: `string`

Defined in: [messages/EnvelopedMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/EnvelopedMessage.ts#L6)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### message

> **message**: [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

Defined in: [messages/EnvelopedMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/EnvelopedMessage.ts#L6)

***

### messageType

> **messageType**: `string` = `'EnvelopedMessage'`

Defined in: [messages/EnvelopedMessage.ts:4](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/EnvelopedMessage.ts#L4)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: EventListenerCallbackMessage

Source: /docs/sdk/messages/classes/EventListenerCallbackMessage

Defined in: [messages/AddEventListenerMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L24)

## Extends

- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

## Constructors

### new EventListenerCallbackMessage()

> **new EventListenerCallbackMessage**(`replayToHandler`, `e`): [`EventListenerCallbackMessage`](/docs/sdk/messages/classes/EventListenerCallbackMessage)

Defined in: [messages/AddEventListenerMessage.ts:27](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L27)

#### Parameters

##### replayToHandler

`string`

##### e

#### Returns

[`EventListenerCallbackMessage`](/docs/sdk/messages/classes/EventListenerCallbackMessage)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindReplayMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindReplayMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`content`](/docs/sdk/messages/classes/MyopBindReplayMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`destination`](/docs/sdk/messages/classes/MyopBindReplayMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`direction`](/docs/sdk/messages/classes/MyopBindReplayMessage#direction)

***

### e

> **e**: `object`

Defined in: [messages/AddEventListenerMessage.ts:27](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L27)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`id`](/docs/sdk/messages/classes/MyopBindReplayMessage#id)

***

### messageType

> **messageType**: `string` = `ReplayMessageKey`

Defined in: [messages/AddEventListenerMessage.ts:25](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L25)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindReplayMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`myop`](/docs/sdk/messages/classes/MyopBindReplayMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`ref`](/docs/sdk/messages/classes/MyopBindReplayMessage#ref)

***

### replayToHandler

> **replayToHandler**: `string`

Defined in: [messages/AddEventListenerMessage.ts:27](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/AddEventListenerMessage.ts#L27)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`replayToHandler`](/docs/sdk/messages/classes/MyopBindReplayMessage#replaytohandler-1)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`route`](/docs/sdk/messages/classes/MyopBindReplayMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`source`](/docs/sdk/messages/classes/MyopBindReplayMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindReplayMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`create`](/docs/sdk/messages/classes/MyopBindReplayMessage#create)

---

# Class: ExecuteComponentMethod

Source: /docs/sdk/messages/classes/ExecuteComponentMethod

Defined in: [messages/componentMessages/ExecuteComponentMethod.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/ExecuteComponentMethod.ts#L13)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new ExecuteComponentMethod()

> **new ExecuteComponentMethod**(`method`): [`ExecuteComponentMethod`](/docs/sdk/messages/classes/ExecuteComponentMethod)

Defined in: [messages/componentMessages/ExecuteComponentMethod.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/ExecuteComponentMethod.ts#L16)

#### Parameters

##### method

`"setInitiated"` | `"initiated"` | `"dispose"` | `"hide"` | `"show"` | `"inspect"` | `"props"` | `"refs"`

#### Returns

[`ExecuteComponentMethod`](/docs/sdk/messages/classes/ExecuteComponentMethod)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'ExecuteComponentMethod'`

Defined in: [messages/componentMessages/ExecuteComponentMethod.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/ExecuteComponentMethod.ts#L14)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### method

> **method**: `"setInitiated"` \| `"initiated"` \| `"dispose"` \| `"hide"` \| `"show"` \| `"inspect"` \| `"props"` \| `"refs"`

Defined in: [messages/componentMessages/ExecuteComponentMethod.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/ExecuteComponentMethod.ts#L16)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: ExecuteScriptMessage\<T, I\>

Source: /docs/sdk/messages/classes/ExecuteScriptMessage

Defined in: [messages/ExecuteScriptMessage.ts:37](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L37)

## Extends

- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`string`, [`ExecuteScriptReplyMessage`](/docs/sdk/messages/classes/ExecuteScriptReplyMessage)\<`T`\>\>

## Extended by

- [`CustomRefMessage`](/docs/sdk/messages/classes/CustomRefMessage)

## Type Parameters

• **T** = `any`

• **I** *extends* [`scriptInputs`](/docs/sdk/messages/type-aliases/scriptInputs) = `any`

## Constructors

### new ExecuteScriptMessage()

> **new ExecuteScriptMessage**\<`T`, `I`\>(`script`, `handler`, `scriptInputs`?): [`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage)\<`T`, `I`\>

Defined in: [messages/ExecuteScriptMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L46)

#### Parameters

##### script

(`vars`) => `T`

##### handler

(`message`) => `void`

##### scriptInputs?

`I`

#### Returns

[`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage)\<`T`, `I`\>

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindMessage#cleanable)

***

### content?

> `optional` **content**: `string`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`content`](/docs/sdk/messages/classes/MyopBindMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`destination`](/docs/sdk/messages/classes/MyopBindMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`direction`](/docs/sdk/messages/classes/MyopBindMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

[`ExecuteScriptReplyMessage`](/docs/sdk/messages/classes/ExecuteScriptReplyMessage)\<`T`\>

#### Returns

`void`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handler`](/docs/sdk/messages/classes/MyopBindMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/MyopBindMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`id`](/docs/sdk/messages/classes/MyopBindMessage#id)

***

### messageType

> **messageType**: `string` = `'ExecuteScriptMessage'`

Defined in: [messages/ExecuteScriptMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L40)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`myop`](/docs/sdk/messages/classes/MyopBindMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`ref`](/docs/sdk/messages/classes/MyopBindMessage#ref)

***

### replyMessageKey

> **replyMessageKey**: `MyopMessageKey` = `ReplayMessageKey`

Defined in: [messages/ExecuteScriptMessage.ts:39](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L39)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`replyMessageKey`](/docs/sdk/messages/classes/MyopBindMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`route`](/docs/sdk/messages/classes/MyopBindMessage#route)

***

### script

> **script**: `string` = `''`

Defined in: [messages/ExecuteScriptMessage.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L41)

***

### scriptInputs?

> `optional` **scriptInputs**: `I`

Defined in: [messages/ExecuteScriptMessage.ts:47](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L47)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`source`](/docs/sdk/messages/classes/MyopBindMessage#source)

***

### completeStreamKey

> `static` **completeStreamKey**: `string` = `'completeStream'`

Defined in: [messages/ExecuteScriptMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L44)

***

### replierKey

> `static` **replierKey**: `string` = `'send'`

Defined in: [messages/ExecuteScriptMessage.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L43)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`create`](/docs/sdk/messages/classes/MyopBindMessage#create)

---

# Class: ExecuteScriptReplyMessage\<T\>

Source: /docs/sdk/messages/classes/ExecuteScriptReplyMessage

Defined in: [messages/ExecuteScriptMessage.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L57)

## Extends

- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)\<`T`\>

## Type Parameters

• **T** = `any`

## Constructors

### new ExecuteScriptReplyMessage()

> **new ExecuteScriptReplyMessage**\<`T`\>(`replayToHandler`, `content`): [`ExecuteScriptReplyMessage`](/docs/sdk/messages/classes/ExecuteScriptReplyMessage)\<`T`\>

Defined in: [messages/ExecuteScriptMessage.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L61)

#### Parameters

##### replayToHandler

`string`

##### content

`T`

#### Returns

[`ExecuteScriptReplyMessage`](/docs/sdk/messages/classes/ExecuteScriptReplyMessage)\<`T`\>

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindReplayMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindReplayMessage#cleanable)

***

### content

> **content**: `T`

Defined in: [messages/ExecuteScriptMessage.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L61)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`content`](/docs/sdk/messages/classes/MyopBindReplayMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`destination`](/docs/sdk/messages/classes/MyopBindReplayMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`direction`](/docs/sdk/messages/classes/MyopBindReplayMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`id`](/docs/sdk/messages/classes/MyopBindReplayMessage#id)

***

### messageType

> **messageType**: `string` = `ReplayMessageKey`

Defined in: [messages/ExecuteScriptMessage.ts:59](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L59)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindReplayMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`myop`](/docs/sdk/messages/classes/MyopBindReplayMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`ref`](/docs/sdk/messages/classes/MyopBindReplayMessage#ref)

***

### replayToHandler

> **replayToHandler**: `string`

Defined in: [messages/ExecuteScriptMessage.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L61)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`replayToHandler`](/docs/sdk/messages/classes/MyopBindReplayMessage#replaytohandler-1)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`route`](/docs/sdk/messages/classes/MyopBindReplayMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`source`](/docs/sdk/messages/classes/MyopBindReplayMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindReplayMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`create`](/docs/sdk/messages/classes/MyopBindReplayMessage#create)

---

# Class: GetAttributeMessage

Source: /docs/sdk/messages/classes/GetAttributeMessage

Defined in: [messages/GetAttributeMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L6)

## Extends

- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`void`, [`GetAttributeReplayMessage`](/docs/sdk/messages/classes/GetAttributeReplayMessage)\>

## Constructors

### new GetAttributeMessage()

> **new GetAttributeMessage**(`ref`, `name`, `handler`): [`GetAttributeMessage`](/docs/sdk/messages/classes/GetAttributeMessage)

Defined in: [messages/GetAttributeMessage.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L10)

#### Parameters

##### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

##### name

`string`

##### handler

(`message`) => `void`

#### Returns

[`GetAttributeMessage`](/docs/sdk/messages/classes/GetAttributeMessage)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindMessage#cleanable)

***

### content?

> `optional` **content**: `void`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`content`](/docs/sdk/messages/classes/MyopBindMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`destination`](/docs/sdk/messages/classes/MyopBindMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`direction`](/docs/sdk/messages/classes/MyopBindMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

[`GetAttributeReplayMessage`](/docs/sdk/messages/classes/GetAttributeReplayMessage)

#### Returns

`void`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handler`](/docs/sdk/messages/classes/MyopBindMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/MyopBindMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`id`](/docs/sdk/messages/classes/MyopBindMessage#id)

***

### messageType

> **messageType**: `string` = `'GetAttributeMessage'`

Defined in: [messages/GetAttributeMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L8)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`myop`](/docs/sdk/messages/classes/MyopBindMessage#myop)

***

### name

> **name**: `string`

Defined in: [messages/GetAttributeMessage.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L10)

***

### ref

> **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/GetAttributeMessage.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L10)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`ref`](/docs/sdk/messages/classes/MyopBindMessage#ref)

***

### replyMessageKey

> **replyMessageKey**: `MyopMessageKey` = `ReplayMessageKey`

Defined in: [messages/GetAttributeMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L7)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`replyMessageKey`](/docs/sdk/messages/classes/MyopBindMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`route`](/docs/sdk/messages/classes/MyopBindMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`source`](/docs/sdk/messages/classes/MyopBindMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`create`](/docs/sdk/messages/classes/MyopBindMessage#create)

---

# Class: GetAttributeReplayMessage

Source: /docs/sdk/messages/classes/GetAttributeReplayMessage

Defined in: [messages/GetAttributeMessage.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L15)

## Extends

- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

## Constructors

### new GetAttributeReplayMessage()

> **new GetAttributeReplayMessage**(`content`): [`GetAttributeReplayMessage`](/docs/sdk/messages/classes/GetAttributeReplayMessage)

Defined in: [messages/GetAttributeMessage.ts:18](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L18)

#### Parameters

##### content

`null` | `string`

#### Returns

[`GetAttributeReplayMessage`](/docs/sdk/messages/classes/GetAttributeReplayMessage)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindReplayMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindReplayMessage#cleanable)

***

### content

> **content**: `null` \| `string`

Defined in: [messages/GetAttributeMessage.ts:18](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L18)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`content`](/docs/sdk/messages/classes/MyopBindReplayMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`destination`](/docs/sdk/messages/classes/MyopBindReplayMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`direction`](/docs/sdk/messages/classes/MyopBindReplayMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`id`](/docs/sdk/messages/classes/MyopBindReplayMessage#id)

***

### messageType

> **messageType**: `string` = `ReplayMessageKey`

Defined in: [messages/GetAttributeMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetAttributeMessage.ts#L16)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindReplayMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`myop`](/docs/sdk/messages/classes/MyopBindReplayMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`ref`](/docs/sdk/messages/classes/MyopBindReplayMessage#ref)

***

### replayToHandler?

> `optional` **replayToHandler**: `string`

Defined in: [messages/BaseMessage.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L58)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`replayToHandler`](/docs/sdk/messages/classes/MyopBindReplayMessage#replaytohandler-1)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`route`](/docs/sdk/messages/classes/MyopBindReplayMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`source`](/docs/sdk/messages/classes/MyopBindReplayMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindReplayMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`create`](/docs/sdk/messages/classes/MyopBindReplayMessage#create)

---

# Class: GetElementValueMessage

Source: /docs/sdk/messages/classes/GetElementValueMessage

Defined in: [messages/GetElementValueMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L7)

## Extends

- [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`void`, [`ElementValueReplayMessage`](/docs/sdk/messages/classes/ElementValueReplayMessage)\>

## Constructors

### new GetElementValueMessage()

> **new GetElementValueMessage**(`ref`, `handler`): [`GetElementValueMessage`](/docs/sdk/messages/classes/GetElementValueMessage)

Defined in: [messages/GetElementValueMessage.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L11)

#### Parameters

##### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

##### handler

(`message`) => `void`

#### Returns

[`GetElementValueMessage`](/docs/sdk/messages/classes/GetElementValueMessage)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindMessage#cleanable)

***

### content?

> `optional` **content**: `void`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`content`](/docs/sdk/messages/classes/MyopBindMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`destination`](/docs/sdk/messages/classes/MyopBindMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`direction`](/docs/sdk/messages/classes/MyopBindMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

[`ElementValueReplayMessage`](/docs/sdk/messages/classes/ElementValueReplayMessage)

#### Returns

`void`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handler`](/docs/sdk/messages/classes/MyopBindMessage#handler-1)

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`handlerUniqueId`](/docs/sdk/messages/classes/MyopBindMessage#handleruniqueid)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`id`](/docs/sdk/messages/classes/MyopBindMessage#id)

***

### messageType

> **messageType**: `string` = `'GetElementValueMessage'`

Defined in: [messages/GetElementValueMessage.ts:9](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L9)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`myop`](/docs/sdk/messages/classes/MyopBindMessage#myop)

***

### ref

> **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/GetElementValueMessage.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L11)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`ref`](/docs/sdk/messages/classes/MyopBindMessage#ref)

***

### replyMessageKey

> **replyMessageKey**: `MyopMessageKey` = `ReplayMessageKey`

Defined in: [messages/GetElementValueMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L8)

#### Overrides

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`replyMessageKey`](/docs/sdk/messages/classes/MyopBindMessage#replymessagekey)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`route`](/docs/sdk/messages/classes/MyopBindMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`source`](/docs/sdk/messages/classes/MyopBindMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage).[`create`](/docs/sdk/messages/classes/MyopBindMessage#create)

---

# Class: InitMessage

Source: /docs/sdk/messages/classes/InitMessage

Defined in: [messages/InitMessage.ts:4](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L4)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)\<\{ `id`: `string`; \}\>

## Extended by

- [`InitResponse`](/docs/sdk/messages/classes/InitResponse)

## Constructors

### new InitMessage()

> **new InitMessage**(`id`): [`InitMessage`](/docs/sdk/messages/classes/InitMessage)

Defined in: [messages/InitMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L7)

#### Parameters

##### id

`string`

#### Returns

[`InitMessage`](/docs/sdk/messages/classes/InitMessage)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `object`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### id

> **id**: `string`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'InitMessage'`

Defined in: [messages/InitMessage.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L5)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/InitMessage.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L12)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: InitRequest

Source: /docs/sdk/messages/classes/InitRequest

Defined in: [messages/InitMessage.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L23)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new InitRequest()

> **new InitRequest**(): [`InitRequest`](/docs/sdk/messages/classes/InitRequest)

Defined in: [messages/BaseMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L24)

#### Returns

[`InitRequest`](/docs/sdk/messages/classes/InitRequest)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'InitRequest'`

Defined in: [messages/InitMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L24)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: InitResponse

Source: /docs/sdk/messages/classes/InitResponse

Defined in: [messages/InitMessage.ts:18](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L18)

## Extends

- [`InitMessage`](/docs/sdk/messages/classes/InitMessage)

## Constructors

### new InitResponse()

> **new InitResponse**(`id`): [`InitResponse`](/docs/sdk/messages/classes/InitResponse)

Defined in: [messages/InitMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L7)

#### Parameters

##### id

`string`

#### Returns

[`InitResponse`](/docs/sdk/messages/classes/InitResponse)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`constructor`](/docs/sdk/messages/classes/InitMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`cleanable`](/docs/sdk/messages/classes/InitMessage#cleanable)

***

### content?

> `optional` **content**: `object`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### id

> **id**: `string`

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`content`](/docs/sdk/messages/classes/InitMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`destination`](/docs/sdk/messages/classes/InitMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`direction`](/docs/sdk/messages/classes/InitMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`id`](/docs/sdk/messages/classes/InitMessage#id-1)

***

### messageType

> **messageType**: `string` = `'InitResponse'`

Defined in: [messages/InitMessage.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L19)

#### Overrides

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`messageType`](/docs/sdk/messages/classes/InitMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`myop`](/docs/sdk/messages/classes/InitMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`ref`](/docs/sdk/messages/classes/InitMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`route`](/docs/sdk/messages/classes/InitMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`source`](/docs/sdk/messages/classes/InitMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/InitMessage.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/InitMessage.ts#L12)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`isTypeof`](/docs/sdk/messages/classes/InitMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`InitMessage`](/docs/sdk/messages/classes/InitMessage).[`create`](/docs/sdk/messages/classes/InitMessage#create)

---

# Class: MessageDirection

Source: /docs/sdk/messages/classes/MessageDirection

Defined in: [messages/BaseMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L6)

## Constructors

### new MessageDirection()

> **new MessageDirection**(): [`MessageDirection`](/docs/sdk/messages/classes/MessageDirection)

#### Returns

[`MessageDirection`](/docs/sdk/messages/classes/MessageDirection)

## Properties

### down

> `static` **down**: `"down"`

Defined in: [messages/BaseMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L7)

***

### up

> `static` **up**: `"up"`

Defined in: [messages/BaseMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L8)

---

# Class: MutationObserverMessage

Source: /docs/sdk/messages/classes/MutationObserverMessage

Defined in: [messages/componentMessages/SetMutationObserverMessage.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetMutationObserverMessage.ts#L7)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new MutationObserverMessage()

> **new MutationObserverMessage**(): [`MutationObserverMessage`](/docs/sdk/messages/classes/MutationObserverMessage)

Defined in: [messages/BaseMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L24)

#### Returns

[`MutationObserverMessage`](/docs/sdk/messages/classes/MutationObserverMessage)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'MutationObserverMessage'`

Defined in: [messages/componentMessages/SetMutationObserverMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetMutationObserverMessage.ts#L8)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: `abstract` MyopBindMessage\<T, R\>

Source: /docs/sdk/messages/classes/MyopBindMessage

Defined in: [messages/BaseMessage.ts:63](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L63)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)\<`T`\>

## Extended by

- [`BindClickMessage`](/docs/sdk/messages/classes/BindClickMessage)
- [`ExecuteScriptMessage`](/docs/sdk/messages/classes/ExecuteScriptMessage)
- [`AddEventListenerMessage`](/docs/sdk/messages/classes/AddEventListenerMessage)
- [`GetElementValueMessage`](/docs/sdk/messages/classes/GetElementValueMessage)
- [`CreateRefComponentMessage`](/docs/sdk/messages/classes/CreateRefComponentMessage)
- [`DetectMyopRefsMessage`](/docs/sdk/messages/classes/DetectMyopRefsMessage)
- [`GetAttributeMessage`](/docs/sdk/messages/classes/GetAttributeMessage)
- [`CleanupMessage`](/docs/sdk/messages/classes/CleanupMessage)

## Type Parameters

• **T** = `any`

• **R** *extends* [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage) = `any`

## Constructors

### new MyopBindMessage()

> **new MyopBindMessage**\<`T`, `R`\>(`handler`): [`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`T`, `R`\>

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### handler

(`message`) => `void`

#### Returns

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)\<`T`, `R`\>

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `T`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### handler()

> **handler**: (`message`) => `void`

Defined in: [messages/BaseMessage.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L69)

#### Parameters

##### message

`R`

#### Returns

`void`

***

### handlerUniqueId

> **handlerUniqueId**: `string`

Defined in: [messages/BaseMessage.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L67)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> `abstract` **messageType**: `string` \| `string` & `Record`\<`never`, `never`\>

Defined in: [messages/BaseMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L30)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### replyMessageKey

> `abstract` **replyMessageKey**: `MyopMessageKey`

Defined in: [messages/BaseMessage.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L65)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: `abstract` MyopBindReplayMessage\<T\>

Source: /docs/sdk/messages/classes/MyopBindReplayMessage

Defined in: [messages/BaseMessage.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L57)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)\<`T`\>

## Extended by

- [`ClickReplayMessage`](/docs/sdk/messages/classes/ClickReplayMessage)
- [`ExecuteScriptReplyMessage`](/docs/sdk/messages/classes/ExecuteScriptReplyMessage)
- [`EventListenerCallbackMessage`](/docs/sdk/messages/classes/EventListenerCallbackMessage)
- [`ElementValueReplayMessage`](/docs/sdk/messages/classes/ElementValueReplayMessage)
- [`RefComponentCreatedMessage`](/docs/sdk/messages/classes/RefComponentCreatedMessage)
- [`DetectedMyopRefsMessage`](/docs/sdk/messages/classes/DetectedMyopRefsMessage)
- [`GetAttributeReplayMessage`](/docs/sdk/messages/classes/GetAttributeReplayMessage)
- [`CleanupReplayMessage`](/docs/sdk/messages/classes/CleanupReplayMessage)

## Type Parameters

• **T** = `any`

## Constructors

### new MyopBindReplayMessage()

> **new MyopBindReplayMessage**\<`T`\>(`replayToHandler`?): [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)\<`T`\>

Defined in: [messages/BaseMessage.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L58)

#### Parameters

##### replayToHandler?

`string`

#### Returns

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)\<`T`\>

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `T`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> `abstract` **messageType**: `string` \| `string` & `Record`\<`never`, `never`\>

Defined in: [messages/BaseMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L30)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### replayToHandler?

> `optional` **replayToHandler**: `string`

Defined in: [messages/BaseMessage.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L58)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: `abstract` MyopElementMessage\<T\>

Source: /docs/sdk/messages/classes/MyopElementMessage

Defined in: [messages/BaseMessage.ts:51](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L51)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)\<`T`\>

## Type Parameters

• **T** = `any`

## Constructors

### new MyopElementMessage()

> **new MyopElementMessage**\<`T`\>(`ref`): [`MyopElementMessage`](/docs/sdk/messages/classes/MyopElementMessage)\<`T`\>

Defined in: [messages/BaseMessage.ts:52](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L52)

#### Parameters

##### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

#### Returns

[`MyopElementMessage`](/docs/sdk/messages/classes/MyopElementMessage)\<`T`\>

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `T`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> `abstract` **messageType**: `string` \| `string` & `Record`\<`never`, `never`\>

Defined in: [messages/BaseMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L30)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref

> **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:52](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L52)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: Ref

Source: /docs/sdk/messages/classes/Ref

Defined in: [messages/BaseMessage.ts:74](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L74)

## Constructors

### new Ref()

> **new Ref**(`refConfig`, `component`?): [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:96](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L96)

#### Parameters

##### refConfig

[`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)

##### component?

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

#### Returns

[`Ref`](/docs/sdk/messages/classes/Ref)

## Properties

### \_\_nonProxied?

> `optional` **\_\_nonProxied**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:77](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L77)

***

### component?

> `optional` **component**: [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

Defined in: [messages/BaseMessage.ts:96](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L96)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:75](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L75)

***

### refConfig

> **refConfig**: [`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)

Defined in: [messages/BaseMessage.ts:96](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L96)

## Methods

### create()

> `static` **create**(`selector`, `refConfig`?, `component`?): [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:79](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L79)

#### Parameters

##### selector

`string`

##### refConfig?

[`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)

##### component?

[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)

#### Returns

[`Ref`](/docs/sdk/messages/classes/Ref)

---

# Class: RefComponentCreatedMessage

Source: /docs/sdk/messages/classes/RefComponentCreatedMessage

Defined in: [messages/CreateRefComponentMessage.ts:27](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L27)

## Extends

- [`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

## Constructors

### new RefComponentCreatedMessage()

> **new RefComponentCreatedMessage**(`replayToHandler`, `nestedRefs`, `failed`?): [`RefComponentCreatedMessage`](/docs/sdk/messages/classes/RefComponentCreatedMessage)

Defined in: [messages/CreateRefComponentMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L30)

#### Parameters

##### replayToHandler

`string`

##### nestedRefs

[`NestedRef`](/docs/sdk/messages/type-aliases/NestedRef)[]

##### failed?

`boolean`

#### Returns

[`RefComponentCreatedMessage`](/docs/sdk/messages/classes/RefComponentCreatedMessage)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`constructor`](/docs/sdk/messages/classes/MyopBindReplayMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`cleanable`](/docs/sdk/messages/classes/MyopBindReplayMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`content`](/docs/sdk/messages/classes/MyopBindReplayMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`destination`](/docs/sdk/messages/classes/MyopBindReplayMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`direction`](/docs/sdk/messages/classes/MyopBindReplayMessage#direction)

***

### failed?

> `optional` **failed**: `boolean`

Defined in: [messages/CreateRefComponentMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L30)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`id`](/docs/sdk/messages/classes/MyopBindReplayMessage#id)

***

### messageType

> **messageType**: `string` = `ReplayMessageKey`

Defined in: [messages/CreateRefComponentMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L28)

#### Overrides

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`messageType`](/docs/sdk/messages/classes/MyopBindReplayMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`myop`](/docs/sdk/messages/classes/MyopBindReplayMessage#myop)

***

### nestedRefs

> **nestedRefs**: [`NestedRef`](/docs/sdk/messages/type-aliases/NestedRef)[]

Defined in: [messages/CreateRefComponentMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L30)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`ref`](/docs/sdk/messages/classes/MyopBindReplayMessage#ref)

***

### replayToHandler

> **replayToHandler**: `string`

Defined in: [messages/CreateRefComponentMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L30)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`replayToHandler`](/docs/sdk/messages/classes/MyopBindReplayMessage#replaytohandler-1)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`route`](/docs/sdk/messages/classes/MyopBindReplayMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`source`](/docs/sdk/messages/classes/MyopBindReplayMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`isTypeof`](/docs/sdk/messages/classes/MyopBindReplayMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage).[`create`](/docs/sdk/messages/classes/MyopBindReplayMessage#create)

---

# Class: ResizeObserverMessage

Source: /docs/sdk/messages/classes/ResizeObserverMessage

Defined in: [messages/componentMessages/SetResizeObserverMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetResizeObserverMessage.ts#L8)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new ResizeObserverMessage()

> **new ResizeObserverMessage**(): [`ResizeObserverMessage`](/docs/sdk/messages/classes/ResizeObserverMessage)

Defined in: [messages/BaseMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L24)

#### Returns

[`ResizeObserverMessage`](/docs/sdk/messages/classes/ResizeObserverMessage)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'ResizeObserverMessage'`

Defined in: [messages/componentMessages/SetResizeObserverMessage.ts:9](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetResizeObserverMessage.ts#L9)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: SetAttributeMessage

Source: /docs/sdk/messages/classes/SetAttributeMessage

Defined in: [messages/SetAttributeMessage.ts:4](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetAttributeMessage.ts#L4)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new SetAttributeMessage()

> **new SetAttributeMessage**(`ref`, `name`, `value`): [`SetAttributeMessage`](/docs/sdk/messages/classes/SetAttributeMessage)

Defined in: [messages/SetAttributeMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetAttributeMessage.ts#L8)

#### Parameters

##### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

##### name

`string`

##### value

`string`

#### Returns

[`SetAttributeMessage`](/docs/sdk/messages/classes/SetAttributeMessage)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'SetAttributeMessage'`

Defined in: [messages/SetAttributeMessage.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetAttributeMessage.ts#L6)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### name

> **name**: `string`

Defined in: [messages/SetAttributeMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetAttributeMessage.ts#L8)

***

### ref

> **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/SetAttributeMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetAttributeMessage.ts#L8)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

***

### value

> **value**: `string`

Defined in: [messages/SetAttributeMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetAttributeMessage.ts#L8)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: SetInnerHtml

Source: /docs/sdk/messages/classes/SetInnerHtml

Defined in: [messages/SetInnerHtml.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetInnerHtml.ts#L3)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)\<`string`\>

## Constructors

### new SetInnerHtml()

> **new SetInnerHtml**(`ref`, `innerHtml`): [`SetInnerHtml`](/docs/sdk/messages/classes/SetInnerHtml)

Defined in: [messages/SetInnerHtml.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetInnerHtml.ts#L7)

#### Parameters

##### ref

[`Ref`](/docs/sdk/messages/classes/Ref)

##### innerHtml

`string`

#### Returns

[`SetInnerHtml`](/docs/sdk/messages/classes/SetInnerHtml)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `string`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'SetInnerHtml'`

Defined in: [messages/SetInnerHtml.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetInnerHtml.ts#L5)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref

> **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/SetInnerHtml.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/SetInnerHtml.ts#L7)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: SetMutationObserverMessage

Source: /docs/sdk/messages/classes/SetMutationObserverMessage

Defined in: [messages/componentMessages/SetMutationObserverMessage.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetMutationObserverMessage.ts#L3)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new SetMutationObserverMessage()

> **new SetMutationObserverMessage**(): [`SetMutationObserverMessage`](/docs/sdk/messages/classes/SetMutationObserverMessage)

Defined in: [messages/BaseMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L24)

#### Returns

[`SetMutationObserverMessage`](/docs/sdk/messages/classes/SetMutationObserverMessage)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `false`

Defined in: [messages/BaseMessage.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L44)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'SetMutationObserverMessage'`

Defined in: [messages/componentMessages/SetMutationObserverMessage.ts:4](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetMutationObserverMessage.ts#L4)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Class: SetResizeObserverMessage

Source: /docs/sdk/messages/classes/SetResizeObserverMessage

Defined in: [messages/componentMessages/SetResizeObserverMessage.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetResizeObserverMessage.ts#L3)

## Extends

- [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

## Constructors

### new SetResizeObserverMessage()

> **new SetResizeObserverMessage**(): [`SetResizeObserverMessage`](/docs/sdk/messages/classes/SetResizeObserverMessage)

Defined in: [messages/BaseMessage.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L24)

#### Returns

[`SetResizeObserverMessage`](/docs/sdk/messages/classes/SetResizeObserverMessage)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`constructor`](/docs/sdk/messages/classes/BaseMyopMessage#constructors)

## Properties

### cleanable

> **cleanable**: `boolean` = `true`

Defined in: [messages/componentMessages/SetResizeObserverMessage.ts:4](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetResizeObserverMessage.ts#L4)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`cleanable`](/docs/sdk/messages/classes/BaseMyopMessage#cleanable)

***

### content?

> `optional` **content**: `any`

Defined in: [messages/BaseMessage.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L32)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`content`](/docs/sdk/messages/classes/BaseMyopMessage#content)

***

### destination?

> `optional` **destination**: `string`

Defined in: [messages/BaseMessage.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L36)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`destination`](/docs/sdk/messages/classes/BaseMyopMessage#destination)

***

### direction?

> `optional` **direction**: [`MessageDirectionOption`](/docs/sdk/messages/type-aliases/MessageDirectionOption)

Defined in: [messages/BaseMessage.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L42)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`direction`](/docs/sdk/messages/classes/BaseMyopMessage#direction)

***

### id

> **id**: `string`

Defined in: [messages/BaseMessage.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L14)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`id`](/docs/sdk/messages/classes/BaseMyopMessage#id)

***

### messageType

> **messageType**: `string` = `'SetResizeObserverMessage'`

Defined in: [messages/componentMessages/SetResizeObserverMessage.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/componentMessages/SetResizeObserverMessage.ts#L5)

#### Overrides

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`messageType`](/docs/sdk/messages/classes/BaseMyopMessage#messagetype)

***

### myop

> **myop**: `boolean` = `true`

Defined in: [messages/BaseMessage.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L28)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`myop`](/docs/sdk/messages/classes/BaseMyopMessage#myop)

***

### ref?

> `optional` **ref**: [`Ref`](/docs/sdk/messages/classes/Ref)

Defined in: [messages/BaseMessage.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L40)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`ref`](/docs/sdk/messages/classes/BaseMyopMessage#ref)

***

### route?

> `optional` **route**: `string`[]

Defined in: [messages/BaseMessage.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L38)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`route`](/docs/sdk/messages/classes/BaseMyopMessage#route)

***

### source?

> `optional` **source**: `string`

Defined in: [messages/BaseMessage.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L35)

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`source`](/docs/sdk/messages/classes/BaseMyopMessage#source)

## Methods

### isTypeof()

> **isTypeof**(`msg`): `boolean`

Defined in: [messages/BaseMessage.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L46)

#### Parameters

##### msg

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)

#### Returns

`boolean`

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`isTypeof`](/docs/sdk/messages/classes/BaseMyopMessage#istypeof)

***

### create()

> `static` **create**\<`T`, `U`\>(`this`, ...`args`): `InstanceType`\<`U`\>

Defined in: [messages/BaseMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L16)

#### Type Parameters

• **T**

• **U** *extends* (...`args`) => `T` = `U`

#### Parameters

##### this

`U`

##### args

...`ConstructorParameters`\<`U`\>

#### Returns

`InstanceType`\<`U`\>

#### Inherited from

[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage).[`create`](/docs/sdk/messages/classes/BaseMyopMessage#create)

---

# Function: stripFunction()

Source: /docs/sdk/messages/functions/stripFunction

> **stripFunction**(`content`): `undefined` \| `string`

Defined in: [messages/ExecuteScriptMessage.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L11)

## Parameters

### content

`string`

## Returns

`undefined` \| `string`

---

# messages

Source: /docs/sdk/messages

## Classes

- [AddEventListenerMessage](/docs/sdk/messages/classes/AddEventListenerMessage)
- [BaseMyopMessage](/docs/sdk/messages/classes/BaseMyopMessage)
- [BindClickMessage](/docs/sdk/messages/classes/BindClickMessage)
- [ChangeTextMessage](/docs/sdk/messages/classes/ChangeTextMessage)
- [CleanupMessage](/docs/sdk/messages/classes/CleanupMessage)
- [CleanupReplayMessage](/docs/sdk/messages/classes/CleanupReplayMessage)
- [ClickReplayMessage](/docs/sdk/messages/classes/ClickReplayMessage)
- [CreateRefComponentMessage](/docs/sdk/messages/classes/CreateRefComponentMessage)
- [CustomRefMessage](/docs/sdk/messages/classes/CustomRefMessage)
- [DetectedMyopRefsMessage](/docs/sdk/messages/classes/DetectedMyopRefsMessage)
- [DetectMyopRefsMessage](/docs/sdk/messages/classes/DetectMyopRefsMessage)
- [DisposeMessage](/docs/sdk/messages/classes/DisposeMessage)
- [ElementValueReplayMessage](/docs/sdk/messages/classes/ElementValueReplayMessage)
- [EnvelopedMessage](/docs/sdk/messages/classes/EnvelopedMessage)
- [EventListenerCallbackMessage](/docs/sdk/messages/classes/EventListenerCallbackMessage)
- [ExecuteComponentMethod](/docs/sdk/messages/classes/ExecuteComponentMethod)
- [ExecuteScriptMessage](/docs/sdk/messages/classes/ExecuteScriptMessage)
- [ExecuteScriptReplyMessage](/docs/sdk/messages/classes/ExecuteScriptReplyMessage)
- [GetAttributeMessage](/docs/sdk/messages/classes/GetAttributeMessage)
- [GetAttributeReplayMessage](/docs/sdk/messages/classes/GetAttributeReplayMessage)
- [GetElementValueMessage](/docs/sdk/messages/classes/GetElementValueMessage)
- [InitMessage](/docs/sdk/messages/classes/InitMessage)
- [InitRequest](/docs/sdk/messages/classes/InitRequest)
- [InitResponse](/docs/sdk/messages/classes/InitResponse)
- [MessageDirection](/docs/sdk/messages/classes/MessageDirection)
- [MutationObserverMessage](/docs/sdk/messages/classes/MutationObserverMessage)
- [MyopBindMessage](/docs/sdk/messages/classes/MyopBindMessage)
- [MyopBindReplayMessage](/docs/sdk/messages/classes/MyopBindReplayMessage)
- [MyopElementMessage](/docs/sdk/messages/classes/MyopElementMessage)
- [Ref](/docs/sdk/messages/classes/Ref)
- [RefComponentCreatedMessage](/docs/sdk/messages/classes/RefComponentCreatedMessage)
- [ResizeObserverMessage](/docs/sdk/messages/classes/ResizeObserverMessage)
- [SetAttributeMessage](/docs/sdk/messages/classes/SetAttributeMessage)
- [SetInnerHtml](/docs/sdk/messages/classes/SetInnerHtml)
- [SetMutationObserverMessage](/docs/sdk/messages/classes/SetMutationObserverMessage)
- [SetResizeObserverMessage](/docs/sdk/messages/classes/SetResizeObserverMessage)

## Type Aliases

- [customRefScriptInputs](/docs/sdk/messages/type-aliases/customRefScriptInputs)
- [extendedScriptVars](/docs/sdk/messages/type-aliases/extendedScriptVars)
- [FormDataEntry](/docs/sdk/messages/type-aliases/FormDataEntry)
- [InputElementFormValue](/docs/sdk/messages/type-aliases/InputElementFormValue)
- [InputElementValue](/docs/sdk/messages/type-aliases/InputElementValue)
- [MessageDirectionOption](/docs/sdk/messages/type-aliases/MessageDirectionOption)
- [NestedRef](/docs/sdk/messages/type-aliases/NestedRef)
- [scriptInputs](/docs/sdk/messages/type-aliases/scriptInputs)
- [scriptVars](/docs/sdk/messages/type-aliases/scriptVars)

## Functions

- [stripFunction](/docs/sdk/messages/functions/stripFunction)

---

# Type Alias: FormDataEntry

Source: /docs/sdk/messages/type-aliases/FormDataEntry

> **FormDataEntry**: `object`

Defined in: [messages/GetElementValueMessage.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L16)

## Type declaration

### id?

> `optional` **id**: `string`

### myopId?

> `optional` **myopId**: `string`

### name?

> `optional` **name**: `string`

### required?

> `optional` **required**: `boolean`

### validity?

> `optional` **validity**: `Serializable`\<`ValidityState`\>

### value?

> `optional` **value**: [`InputElementValue`](/docs/sdk/messages/type-aliases/InputElementValue)

---

# Type Alias: InputElementFormValue

Source: /docs/sdk/messages/type-aliases/InputElementFormValue

> **InputElementFormValue**: `object`

Defined in: [messages/GetElementValueMessage.ts:25](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L25)

## Type declaration

### formData?

> `optional` **formData**: `object`

#### Index Signature

\[`key`: `string`\]: [`FormDataEntry`](/docs/sdk/messages/type-aliases/FormDataEntry)

### unmappedData?

> `optional` **unmappedData**: [`FormDataEntry`](/docs/sdk/messages/type-aliases/FormDataEntry)[]

---

# Type Alias: InputElementValue

Source: /docs/sdk/messages/type-aliases/InputElementValue

> **InputElementValue**: `string` \| [`InputElementFormValue`](/docs/sdk/messages/type-aliases/InputElementFormValue) \| `null` \| `undefined`

Defined in: [messages/GetElementValueMessage.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/GetElementValueMessage.ts#L30)

---

# Type Alias: MessageDirectionOption

Source: /docs/sdk/messages/type-aliases/MessageDirectionOption

> **MessageDirectionOption**: `"up"` \| `"down"`

Defined in: [messages/BaseMessage.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/BaseMessage.ts#L11)

---

# Type Alias: NestedRef

Source: /docs/sdk/messages/type-aliases/NestedRef

> **NestedRef**: `object`

Defined in: [messages/CreateRefComponentMessage.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CreateRefComponentMessage.ts#L22)

## Type declaration

### componentDefinitionId

> **componentDefinitionId**: `string`

### refName

> **refName**: `string`

---

# Type Alias: customRefScriptInputs

Source: /docs/sdk/messages/type-aliases/customRefScriptInputs

> **customRefScriptInputs**: `object`

Defined in: [messages/CustomRefMessage.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/CustomRefMessage.ts#L8)

## Type declaration

### \_\_scriptInputs?

> `optional` **\_\_scriptInputs**: `Object`

### \_script?

> `optional` **\_script**: `string`

### elementId

> **elementId**: `string`

### ref?

> `optional` **ref**: `HTMLElement`

---

# Type Alias: extendedScriptVars\<T, I\>

Source: /docs/sdk/messages/type-aliases/extendedScriptVars

> **extendedScriptVars**\<`T`, `I`\>: `{ [K in keyof I]: I[K] }` & [`scriptVars`](/docs/sdk/messages/type-aliases/scriptVars)\<`T`\>

Defined in: [messages/ExecuteScriptMessage.ts:33](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L33)

## Type Parameters

• **T**

• **I**

---

# Type Alias: scriptInputs

Source: /docs/sdk/messages/type-aliases/scriptInputs

> **scriptInputs**: \{\} \| \{\}

Defined in: [messages/ExecuteScriptMessage.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L22)

---

# Type Alias: scriptVars\<T\>

Source: /docs/sdk/messages/type-aliases/scriptVars

> **scriptVars**\<`T`\>: `object`

Defined in: [messages/ExecuteScriptMessage.ts:26](https://github.com/hadarge/myop/blob/main/myop-sdk/src/messages/ExecuteScriptMessage.ts#L26)

## Type Parameters

• **T**

## Type declaration

### makeSerializable

> **makeSerializable**: *typeof* `makeSerializable`

### rootRef

> **rootRef**: [`RootRef`](/docs/sdk/common/classes/RootRef)

### send()

> **send**: (`data`) => `void`

#### Parameters

##### data

`T`

#### Returns

`void`

---

# @myop/sdk

Source: /docs/sdk/modules

## Modules

- [common](/docs/sdk/common)
- [helpers](/docs/sdk/helpers)
- [host](/docs/sdk/host)
- [host/hostSDK](/docs/sdk/host/hostSDK)
- [Iframe](/docs/sdk/Iframe)
- [Iframe/IframeSDK](/docs/sdk/Iframe/IframeSDK)
- [messages](/docs/sdk/messages)
- [webcomponent](/docs/sdk/webcomponent)
- [webcomponent/WebComponentSDK](/docs/sdk/webcomponent/WebComponentSDK)

---

# Class: WebComponentSDK

Source: /docs/sdk/webcomponent/WebComponentSDK/classes/WebComponentSDK

Defined in: [webcomponent/WebComponentSDK.ts:64](https://github.com/hadarge/myop/blob/main/myop-sdk/src/webcomponent/WebComponentSDK.ts#L64)

The Webcomponent SDK is tailored for using Myop components packaged as separate bundles and exposed as web components.<br/>
Developers importing this SDK can leverage APIs and utilities specifically crafted to support the lifecycle management and communication patterns required for web components within the Myop architecture.<br/>
This SDK promotes reusability and encapsulation, enabling developers to build modular, self-contained components that can be seamlessly integrated into the host application's DOM structure.

Once loaded the `Root SDK`, you can load the `IframeSDK`
```js
const {WebComponentSDK} = (await window.myop.rootSDK.getWebcomponentModule());
```
or
```ts
import {getWebcomponentModule} from '@myop/sdk';
const {WebComponentSDK} = (await getWebcomponentModule());
```

## Extends

- [`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK)

## Constructors

### new WebComponentSDK()

> **new WebComponentSDK**(): [`WebComponentSDK`](/docs/sdk/webcomponent/WebComponentSDK/classes/WebComponentSDK)

#### Returns

[`WebComponentSDK`](/docs/sdk/webcomponent/WebComponentSDK/classes/WebComponentSDK)

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`constructor`](/docs/sdk/common/classes/BaseMyopSDK#constructors)

## Properties

### alwaysPassEnvelopesToHost

> **alwaysPassEnvelopesToHost**: `boolean` = `true`

Defined in: [webcomponent/WebComponentSDK.ts:66](https://github.com/hadarge/myop/blob/main/myop-sdk/src/webcomponent/WebComponentSDK.ts#L66)

#### Overrides

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`alwaysPassEnvelopesToHost`](/docs/sdk/common/classes/BaseMyopSDK#alwayspassenvelopestohost)

***

### components

> **components**: `Record`\<`string`, [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\> = `{}`

Defined in: [common/BaseMyopSDK.ts:51](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L51)

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`components`](/docs/sdk/common/classes/BaseMyopSDK#components)

***

### messageCleanupCache

> **messageCleanupCache**: `Promise`\<`void`\> \| `Record`\<`string`, [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler) \| `Promise`\<[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)\>\> = `{}`

Defined in: [common/BaseMyopSDK.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L55)

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`messageCleanupCache`](/docs/sdk/common/classes/BaseMyopSDK#messagecleanupcache)

***

### messageToHandleAfterInit

> **messageToHandleAfterInit**: [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)[] = `[]`

Defined in: [common/BaseMyopSDK.ts:49](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L49)

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`messageToHandleAfterInit`](/docs/sdk/common/classes/BaseMyopSDK#messagetohandleafterinit)

***

### supportedHandlers

> **supportedHandlers**: `BaseWebComponentMessageHandler`[]

Defined in: [webcomponent/WebComponentSDK.ts:110](https://github.com/hadarge/myop/blob/main/myop-sdk/src/webcomponent/WebComponentSDK.ts#L110)

#### Overrides

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`supportedHandlers`](/docs/sdk/common/classes/BaseMyopSDK#supportedhandlers)

## Methods

### connectedCallback()

> **connectedCallback**(`container`, `shadow`): `void`

Defined in: [webcomponent/WebComponentSDK.ts:69](https://github.com/hadarge/myop/blob/main/myop-sdk/src/webcomponent/WebComponentSDK.ts#L69)

#### Parameters

##### container

`HTMLElement`

##### shadow

`ShadowRoot`

#### Returns

`void`

***

### handleIncomeMessages()

> **handleIncomeMessages**(`event`): `void`

Defined in: [common/BaseMyopSDK.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L57)

#### Parameters

##### event

`any`

#### Returns

`void`

#### Inherited from

[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`handleIncomeMessages`](/docs/sdk/common/classes/BaseMyopSDK#handleincomemessages)

***

### init()

> **init**(): `void`

Defined in: [webcomponent/WebComponentSDK.ts:123](https://github.com/hadarge/myop/blob/main/myop-sdk/src/webcomponent/WebComponentSDK.ts#L123)

#### Returns

`void`

#### Overrides

`BaseMyopSDK.init`

***

### messageToHost()

> **messageToHost**(`message`, `replayTo`?): `void`

Defined in: [webcomponent/WebComponentSDK.ts:100](https://github.com/hadarge/myop/blob/main/myop-sdk/src/webcomponent/WebComponentSDK.ts#L100)

#### Parameters

##### message

[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)

##### replayTo?

[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)

#### Returns

`void`

#### Overrides

`BaseMyopSDK.messageToHost`

---

# webcomponent/WebComponentSDK

Source: /docs/sdk/webcomponent/WebComponentSDK

The Webcomponent SDK is tailored for using Myop components packaged as separate bundles and exposed as web components.<br/>
Developers importing this SDK can leverage APIs and utilities specifically crafted to support the lifecycle management and communication patterns required for web components within the Myop architecture.<br/>
This SDK promotes reusability and encapsulation, enabling developers to build modular, self-contained components that can be seamlessly integrated into the host application's DOM structure.

Once loaded the `RootSDK`, you can load the `IframeSDK`
```js
const {WebComponentSDK} = (await window.myop.rootSDK.getWebcomponentModule());
```
or
```ts
import {getWebcomponentModule} from '@myop/sdk';
const {WebComponentSDK} = (await getWebcomponentModule());
```
or
```ts
import {WebComponentSDK} from '@myop/sdk/webcomponent';
```

## Classes

- [WebComponentSDK](/docs/sdk/webcomponent/WebComponentSDK/classes/WebComponentSDK)

---

# webcomponent

Source: /docs/sdk/webcomponent

## References

### WebComponentSDK

Re-exports [WebComponentSDK](/docs/sdk/webcomponent/WebComponentSDK/classes/WebComponentSDK)

---