open-index/open-npm huggingface dataset:
npm package: @hlf01/vue3-socket.io
Description: Socket.io implementation for Vue.js 3.0
Author: Metin Seylan
Latest version: 1.1.1

<p align="center">
    <a href="https://github.com/hlf20010508/Vue3-Socket.io">
        <img width="250" src="https://github.com/hlf20010508/Vue3-Socket.io/assets/76218469/d912dc31-c130-462e-9740-88420449c82d">
    </a>
</p> 

## Description
- Socket.io implementation for Vue.js 3.0.
- Based on [MetinSeylan/Vue-Socket.io](https://github.com/MetinSeylan/Vue-Socket.io).
- **Only Support Vue3.**

## Installation
```bash
npm install @hlf01/vue3-socket.io
```

## Example
### Register
#### Using Connection String
```js
import { createApp } from 'vue'
import App from '@/App.vue'
import Vue3SocketIO from '@hlf01/vue3-socket.io';

const vue3SocketIO = new Vue3SocketIO({
    debug: true,
    connection: 'https://example.com',
    options: { path: "/my-app/" } //Optional options
});

const app = createApp(App)

app.use(vue3SocketIO)

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

#### Using socket.io-client Instance
```js
import { createApp } from 'vue'
import App from '@/App.vue'
import SocketIO from 'socket.io-client';
import Vue3SocketIO from '@hlf01/vue3-socket.io';

const options = { path: "/my-app/" };
const vue3SocketIO = new Vue3SocketIO({
    debug: true,
    connection: SocketIO('https://example.com', options),
});

const app = createApp(App)

app.use(vue3SocketIO)

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

### Usage
```js
<script setup>
import { onMounted, inject } from "vue";
import { useSocketIO } from "@hlf01/vue3-socket.io";

const socketIO = useSocketIO();
const socket = inject("socket");

onMounted(() => {
    socketIO.subscribe("connect", () => {
        console.log("Socket connected:", socket.id);
    });

    // Custom event name
    socketIO.subscribe("getMessages", (messages) => {
        console.log("Received messages:", messages);
    });
});

// All event listeners will be unsubscribed automatically once the component is unmounted

function unsubscribeEvent(eventName) {
    // Unsubscribe event for current instance
    socketIO.unsubscribe(eventName);
}

function removeEvent(eventName) {
    // Unsubscribe event for all instance
    socketIO.removeEvent(eventName);
}

function sendMessage(message) {
    // Emit event
    socket.emit("sendMessage", message);
}
</script>
```

## Parameters
**Parameters**|**Types**|**Default**|**Required**|**Description**
-----|-----|-----|-----|-----
connection|String/Socket|`null`|Required|Websocket server url or socket.io-client instance.
debug|Boolean|`false`|Optional|Enable logging for debug.
options|Partial<ManagerOptions & SocketOptions>|`null`|Optional|Socket.io options for connection and configuration. See [socket.io-client options documentation](https://socket.io/docs/v4/client-options/) for more information.
npm package: @hlhr202/reobserve
Description: Powerful observable state transition library that utilised Rx.js and Redux design pattern
Author: hlhr202
Latest version: 0.1.11

# ReObserve

_Rx.js based Observable State Management Tool_

This is a preview version of ReObserve, a fully functional reactive programming library that helps manage complex UI streams in js/ts

The documentation is in WIP

## Installation
```
npm install @hlhr202/reobserve rxjs
```

## Basic Usage
```js
const ReObserve = require('@hlhr202/reobserve')
const { merge } = require('rxjs')
const { filter, map } = require('rxjs/operators')

// Define a initial state
const initialCounter = {
    count: 0
}

// Define an action mapper that maps Observable actions to next state
const actionMapper = action$ => merge(
    action$.pipe(
        filter(action => action.type === 'INCREMENT'),
        map(action => ({ count: action.state.count + 1 }))
    ),
    action$.pipe(
        filter(action => action.type === 'DECREMENT'),
        map(action => ({ count: action.state.count - 1 }))
    )
)

// Create a stream that merge all actions
const counter$ = ReObserve.create(initialCounter).mapAction(actionMapper)

// Subscribe next counter value
counter$.subscribe(nextValue => console.log(nextValue))

// Dispatch action in global scope
ReObserve.dispatch({ type: 'INCREMENT' })
ReObserve.dispatch({ type: 'DECREMENT' })
```