# Mini-App Bridge SDK

A bridge SDK for handling communications between mini apps and native platforms.

## Installation

### Using npm

```bash
npm install @ctg-team/miniapp-bridge
```

### Using CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@ctg-team/miniapp-bridge/dist/index.umd.min.js"></script>
```

## Basic Usage

1. **Import and Initialize:**

Using npm

```javascript
import { init } from '@ctg-team/miniapp-bridge';
const bridge = init('YOUR_API_KEY');
```

Using CDN

```html
<script>
  const bridge = window.miniappbridge.init('YOUR_API_KEY');
</script>
```

Replace `'YOUR_API_KEY'` with your actual API key obtained from your provider.

1. **Call Native Handlers:**

```javascript
bridge.callHandler('nativeHandlerName', {
    key: 'value'
})
.then(response => {
    console.log('Response:', response);
})
.catch(error => {
    console.error('Error:', error);
});
```

1. **Listen for Events:**


```javascript
bridge.registerHandler('eventName', (payload) => {
    console.log('Received payload:', payload);
});
```

## Vue.js Integration

The SDK can be easily integrated with both Vue 2 and Vue 3 applications.

### Vue 3 Usage

```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { VueMiniAppBridge } from '@ctg-team/miniapp-bridge';

const app = createApp(App);

app.use(VueMiniAppBridge, {
    API_KEY: 'your-api-key',
    debugMode: false
});

app.mount('#app');
```

### Vue 2 Usage

```javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
import { VueMiniAppBridge } from '@ctg-team/miniapp-bridge';

Vue.use(VueMiniAppBridge, {
    API_KEY: 'your-api-key',
    debugMode: true
});

new Vue({
    render: h => h(App),
}).$mount('#app');
```

### Using with Options API

```javascript
export default {
    mounted() {
        this.$bridge.callHandler('nativeHandlerName', { key: 'value' })
        .then(response => {
            console.log('Action successful:', response);
        })
        .catch(error => {
            console.error('Action failed:', error);
        });

        this.$bridge.registerHandler('actionSuccess', (result) => {
            console.log('Action successful:', result);
        });
    }
};
```

## Security Notes

- Debug mode with mocks should only be used in development/testing