npm package: @myop-dev/sdk
Description: Myop main SDK package.
Latest version: 0.1.36

# Myop SDKs
# Enhance Your UI Management with Real-Time Flexibility

## **Next-Level UI/UX Management with Myop SDKs**
Myop offers an open-source set of SDKs designed to connect your application
logic with dynamically chosen user interfaces.
It simplifies experimenting with UI/UX changes without deployments or direct
involvement from your host application.
It allows developers to refactor the look and feel of any component without
disrupting its core functionalities like data fetching, state or event handling
while maintaining typed communication between components and the host application,
just like any local component you have today.

## **Table of Contents**
1. [Root SDK](#root-sdk)
2. [Host SDK](#host-sdk)
3. [Iframe SDK](#iframe-sdk)
4. [WebComponent SDK](#webcomponent-sdk)
5. [Framework Integrations](#framework-integrations)
    - [React](#react)
    - [Angular](#angular)
    - [Vue.js](#vuejs)
6. [Key Features of Myop SDKs](#key-features-of-myop-sdks)
7. [Why Choose Myop SDKs?](#why-choose-myop-sdks)
8. [Get Started with Myop SDKs Today!](#get-started-with-myop-sdks-today)
9. [Related Resources](#related-resources)

---

## **Root SDK - The Core of Your Application Integration**
The **Root SDK** is the starting point for using Myop’s powerful UI components. It enables you to dynamically load, control, and interact with Myop components inside your web application, offering full control over UI modifications with minimal setup.

### **Installation - How to Integrate the Root SDK**
You can load the Root SDK into your application in one of two ways:

1. **Via CDN (Script Tag):**
```html
<script src="https://statics.myop.dev/sdk/next/myop_sdk.js"></script>
<script>
    // Initialize the SDK
    const { hostSDK } = await window.myop.rootSDK.getHostModule();
    const { MyopMessages } = await window.myop.rootSDK.getMyopMessages();
</script>
```
2 **Via NPM (Import into TypeScript/JavaScript Application):**


```ts
import { getHostModule } from '@myop/sdk';

const { hostSDK } = await getHostModule();
```

Initialization and Component Loading
Once the SDK is loaded, you can initialize the hostSDK and start interacting with components.

```js
// Initialize hostSDK instance
hostSDK.init();

// Load Myop components into your app dynamically
let myopComponent1 = await hostSDK.loadComponent(config.components['myExternalComponent1'], appDiv);
await myopComponent1.initiated();

// Send messages or modify UI components
const appTitleSelector = new MyopMessages.MyopElementSelector('myAppTitle');
myopComponent1.send(new MyopMessages.ChangeTextMessage(appTitleSelector, `Myop - WebComponents`));
```
Host SDK - Integrate Myop Components into Your App
The Host SDK is designed for applications that act as containers for Myop components. It provides core functionalities for embedding and managing Myop components within your web app, enabling smooth communication and integration.

With the Host SDK, you can:

Dynamically register, load, and control Myop components.
Ensure seamless integration and maintain consistent UX across multiple components.
Communicate with the embedded Myop components using event-driven APIs.
### 📕 Host SDK Documentation
Explore the full documentation for the Host SDK to unlock the full potential of Myop's component-based UI management.

Iframe SDK - Isolation with Seamless Communication
The Iframe SDK is perfect for integrating Myop components into isolated environments such as iframes. It provides tools and utilities for secure communication between the host app and the Myop components running inside iframes.

Using the Iframe SDK, developers can:

Achieve secure isolation for Myop components while retaining communication with the host application.
Benefit from the overall structure and management capabilities of the host app, without sacrificing security or performance.
Easily load and manage iframe-based components within your web app.
How to Load the Iframe SDK
You can load the Iframe SDK after loading the Root SDK in two simple steps:

Via Script Tag:
```js
const { IframeSDK } = await window.myop.rootSDK.getIframeModule();
```

Via NPM (Import into TypeScript/JavaScript Application):

```ts
import { getIframeModule } from '@myop/sdk';
const { IframeSDK } = await getIframeModule();
```

### 📕 Iframe SDK Documentation
For a deep dive into the Iframe SDK’s capabilities and usage, refer to the detailed documentation.

WebComponent SDK - Embedding Reusable Web Components
The WebComponent SDK is built to support the use of Myop components packaged as self-contained web components. It simplifies lifecycle management, event handling, and communication, ensuring smooth integration with the host application.

With this SDK, developers can:

Create modular, reusable web components that can be used across various applications.
Benefit from lifecycle management tools to handle component states, initialization, and teardown.
Enable communication between the host application and the web components for dynamic, real-time changes.
How to Load the WebComponent SDK
Once the Root SDK is loaded, you can seamlessly load the WebComponent SDK:

Via Script Tag:
```js
const { WebComponentSDK } = await window.myop.rootSDK.getWebcomponentModule();
```

Via NPM (Import into TypeScript/JavaScript Application):

```ts
import { getWebcomponentModule } from '@myop/sdk';
const { WebComponentSDK } = await getWebcomponentModule();
```

### 📕 WebComponent SDK Documentation
Learn more about the WebComponent SDK and how it can enhance your application development in the full documentation.

Framework Integrations
Myop SDKs can be seamlessly integrated with popular frontend frameworks like React, Angular, and Vue.js. This section provides detailed instructions for integrating Myop SDKs with these frameworks to help you get started faster.

React Integration
To use Myop with React, follow these steps:

Install the Myop SDK via npm:

```bash
npm install @myop/sdk
```
Create a React Component that Loads Myop Components:

```jsx
import React, { useEffect, useRef } from 'react';
import { getHostModule } from '@myop/sdk';

const MyopComponent = () => {
    const containerRef = useRef(null);

    useEffect(() => {
        const loadMyopComponent = async () => {
            const { hostSDK } = await getHostModule();
            const myopComponent = await hostSDK.loadComponent(config.components['myExternalComponent1'], containerRef.current);
            await myopComponent.initiated();
        };

        loadMyopComponent();
    }, []);

    return <div ref={containerRef}></div>;
};

export default MyopComponent;
```

Use the React Component:

```jsx
import React from 'react';
import MyopComponent from './MyopComponent';

const App = () => {
    return (
        <div>
            <h1>Myop + React</h1>
            <MyopComponent />
        </div>
    );
};

export default App;
```

Angular Integration
For Angular applications, you can integrate Myop SDKs by following these steps:

Install Myop SDK via npm:

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

Import and Use Myop SDK in Angular Component:

```ts
import { Component, OnInit, ElementRef } from '@angular/core';
import { getHostModule } from '@myop/sdk';

@Component({
    selector: 'app-myop',
    template: `<div #container></div>`,
})
export class MyopComponent implements OnInit {
    constructor(private el: ElementRef) {}

    async ngOnInit() {
        const { hostSDK } = await getHostModule();
        const myopComponent = await hostSDK.loadComponent(config.components['myExternalComponent1'], this.el.nativeElement);
        await myopComponent.initiated();
    }
}
```
Add the Component in the Template:

```html
<app-myop></app-myop>
```

Vue.js Integration
Vue.js developers can integrate Myop SDKs with ease by following these steps:
Install the Myop SDK:

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

Create a Vue Component that Loads Myop Components:

```vue
<template>
    <div ref="container"></div>
</template>

<script>
import { getHostModule } from '@myop/sdk';

export default {
    name: 'MyopComponent',
    mounted() {
        const loadMyopComponent = async () => {
            const { hostSDK } = await getHostModule();
            const myopComponent = await hostSDK.loadComponent(config.components['myExternalComponent1'], this.$refs.container);
            await myopComponent.initiated();
        };

        loadMyopComponent();
    },
};
</script>
```

Use the Vue Component:

```vue
<template>
    <MyopComponent />
</template>
```

### Key Features of Myop SDKs
- Real-time UI Modifications
  - Modify your application's UI dynamically without requiring redeployment or backend changes.
- Seamless Integration
  - Easily integrate Myop components into any web application, whether in an iframe or as standalone web components.
- Component Flexibility
  - Load and use Myop components based on your app’s requirements and communication needs.
- Independent Lifecycle Management
  - Manage the lifecycle of each component independently, ensuring optimal performance and reusability.
### Why Choose Myop SDKs?
Myop offers a powerful, flexible approach to managing your web application’s UI/UX, making it easier to:

- Scale your application with minimal friction.
- Empower front-end developers to manage UI changes independently.
- Build modular and reusable components that can be dynamically loaded based on real-time conditions.
- With comprehensive documentation and support for various use cases, Myop SDKs provide a future-proof solution for modern web development.

### Get Started with Myop SDKs Today!
Take your web app to the next level with Myop SDKs. Whether you’re looking to integrate dynamic UI components, manage separate iframe-based applications, or work with modular web components, Myop has you covered.

For more information, examples, and detailed documentation, check out the links to each SDK section above.

Related Resources:
- [Read more about Myop](https://myop.dev)
- [Myop Documentation](https://docs.myop.dev)
- [Join Myop on GitHub](https://github.com/myopjs)
- [Discord Community & Support Forum](https://discord.com/invite/wTwZn3fq)