From cd8242aecdce355d68c4c22ea298b389fafa2576 Mon Sep 17 00:00:00 2001
From: Zhixing Han <zhixing.han.0409@gmail.com>
Date: Wed, 22 Mar 2023 22:04:57 +0800
Subject: [PATCH] first commit

---
 .browserslistrc  |   3 +
 .editorconfig    |  17 +++++
 .eslintrc.js     |  14 ++++
 .gitignore       |   5 ++
 .npmrc           |   1 +
 README.md        | 186 +++++++++++++++++++++++++++++++++++++++++++++++
 babel.config.js  |   6 ++
 jest.config.js   |   6 ++
 package.json     |  45 ++++++++++++
 rollup.config.js |  26 +++++++
 src/constants.ts |   2 +
 src/endpoint.ts  |  51 +++++++++++++
 src/guest.ts     |  51 +++++++++++++
 src/iframe.ts    |  69 ++++++++++++++++++
 src/index.ts     |   2 +
 src/socket.ts    | 167 ++++++++++++++++++++++++++++++++++++++++++
 src/types.ts     |  90 +++++++++++++++++++++++
 src/utils.ts     |  45 ++++++++++++
 tsconfig.json    |   8 ++
 19 files changed, 794 insertions(+)
 create mode 100644 .browserslistrc
 create mode 100644 .editorconfig
 create mode 100644 .eslintrc.js
 create mode 100644 .gitignore
 create mode 100644 .npmrc
 create mode 100644 README.md
 create mode 100644 babel.config.js
 create mode 100644 jest.config.js
 create mode 100644 package.json
 create mode 100644 rollup.config.js
 create mode 100644 src/constants.ts
 create mode 100644 src/endpoint.ts
 create mode 100644 src/guest.ts
 create mode 100644 src/iframe.ts
 create mode 100644 src/index.ts
 create mode 100644 src/socket.ts
 create mode 100644 src/types.ts
 create mode 100644 src/utils.ts
 create mode 100644 tsconfig.json

diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..0223254
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+>0.2%
+not dead
+not op_mini all
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..4432917
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,17 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# General settings for whole project
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_size = 2
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..d5481b1
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+    extends: [
+        'airbnb-base',
+        'airbnb-typescript/base',
+    ],
+    parserOptions: {
+        project: './tsconfig.json',
+    },
+    rules: {
+        'object-curly-newline': ['error', {'multiline': true }],
+        '@typescript-eslint/indent': ['error', 4],
+        '@typescript-eslint/object-curly-spacing': ['error', 'never'],
+    },
+};
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2566ae5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+
+node_modules/
+dist/
+package-lock.json
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..7549542
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmmirror.com
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..34a784f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,186 @@
+# msgio
+
+If you are familiar with `socket.io`, you already know how to use this package.
+
+`socket.io` is based on WebSocket.
+
+`msgio` is based on postMessage.
+
+
+## Install
+
+### npm
+
+```js
+npm install --save msgio
+```
+
+### &lt;script&gt;
+
+```js
+<script src="//<path to msgio>/msgio.min.js"></script>
+<script>
+  console.log(window.msgio); // Iframe, Guest
+  // For detail usage, see below...
+</script>
+```
+
+## Usage
+
+### Iframe
+
+#### In your Main App
+```js
+import {Iframe} from 'msgio';
+
+const iframe = document.getElementById('my-iframe');
+
+const onLoad = e => {
+    const io = new Iframe(e.target);
+
+    io.on('connect', socket => {
+        // listening some events from the guest
+        socket.on('my_custom_event', data => {
+            // data: {x: 1, y: 2}
+            // any code
+        });
+
+        // emit events to the guest
+        socket.emit('greeting', 'hello world!');
+
+        // expose functions to the guest
+        socket.func('my_sync_fn', (a1, a2, ...rest) => {
+            // a1: 1
+            // a2: 2
+            // rest: 3, 4, 5
+            // any code
+            // you can throw as usual!
+        });
+
+        // you can expose aysnc functions too.
+        socket.func('my_async_fn', (a1, a2, ...rest) => {
+            // a1: 'a'
+            // a2: 'b'
+            // rest: 'c', 'd', 'e'
+            return new Promise((resolve, reject) => {
+                // any code
+            });
+        });
+
+        // call some functions the guest provides.
+        socket.call('hi', 'guest', '!')
+            .then(result => {
+                // as you call the 'hi' function with args 'guest' and '!'
+                // the resule may be 'hello host!', who knows!
+                // any code
+            })
+            .catch(error => {
+                // the guest may throw error to you
+            });
+    });
+};
+
+iframe.addEventListener('load', onLoad);
+```
+
+#### In your Iframe
+```js
+import {Guest} from 'msgio';
+
+// You must provide the host's origin. It's all.
+const io = new Guest({host: 'http://localhost:8080'});
+
+// Like in your main app
+io.on('connect', socket => {
+    // the host will use this to set the <iframe>'s width and height.
+    io.resize({width: 400, height: 600});
+
+    // listening some events from the host
+    socket.on('greeting', data => {
+        // data: 'hello world!'
+        // any code
+    });
+
+    // emit events to the guest
+    socket.emit('my_custom_event', {x: 1, y: 2});
+
+    // call functions from the host.
+    socket.call('my_sync_fn', 1, 2, 3, 4, 5)
+        .then(result => {
+            // any code
+        })
+        .catch(error => {
+            // catch the error
+        });
+
+    socket.call('my_async_fn', 'a', 'b', 'c', 'd', 'e')
+        .then(result => {
+            // any code
+        })
+        .catch(error => {
+            // catch the error
+        });
+
+    socket.func('hi', (a1, a2, a3) => {
+        // a1: 'guest'
+        // a2: '!'
+        // a3: undefined
+        // any code
+        // return 'hello host!'
+    });
+});
+```
+
+### Tab
+Not implemented yet!
+
+### Web Worker
+Not implemented yet!
+
+## API
+
+### Iframe API
+
+#### constructor
+
+> constructor(dom: HTMLIFrameElement)
+
+The dom provied must be a iframe node.
+
+#### on
+
+> on: ('connect', callback: (socket: Socket) => void) => void
+
+### Guest API
+
+#### constructor
+
+> constructor(option: {host:string})
+
+Pass the origin string. eg: http://example.com:8080
+
+#### on
+
+> on: ('connect', callback: (socket: Socket) => void) => void
+
+#### resize
+
+> resize: (size: {width: number, height: number}) => void;
+
+### Socket API
+
+#### on
+
+> on: (event: string, callback: (...args: any) => void) => void
+
+#### emit
+
+> emit: (event: string, payload: any) => void
+
+#### func
+
+> func: (fname: string, callback: (...args: any) => any) => void
+
+#### call
+
+> call: (fname: string, ...args: any) => Promise&lt;any&gt;
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..ec51242
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        '@babel/preset-env',
+        '@babel/preset-typescript',
+    ],
+};
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..abc18a7
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,6 @@
+export default {
+    clearMocks: true,
+    collectCoverage: true,
+    coverageDirectory: 'coverage',
+    testEnvironment: 'jsdom',
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b030e3f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "msgio",
+  "version": "0.1.0",
+  "description": "'postMessage' based communication library.",
+  "license": "MIT",
+  "author": "Zhixing Han <zhixing.han.0409@gmail.com>",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npm run clean && npm run build:cjs && npm run build:umd",
+    "build:cjs": "tsc",
+    "build:umd": "npx rollup -c --bundleConfigAsCjs",
+    "clean": "rimraf dist",
+    "test": "jest"
+  },
+  "dependencies": {
+    "nanoevents": "^7.0.1",
+    "nanoid": "^4.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.21.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@tsconfig/recommended": "^1.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "babel-jest": "^29.5.0",
+    "eslint": "^8.36.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "jest": "^29.5.0",
+    "rimraf": "^4.4.0",
+    "rollup": "^3.19.1",
+    "typescript": "^5.0.2"
+  }
+}
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..269381c
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,26 @@
+import resolve from '@rollup/plugin-node-resolve';
+import {babel} from '@rollup/plugin-babel';
+import terser from '@rollup/plugin-terser';
+
+const extensions = ['.ts'];
+
+export default {
+    input: 'src/index.ts',
+    output: {
+        name: 'msgio',
+        file: 'dist/msgio.min.js',
+        format: 'umd',
+        sourcemap: true,
+    },
+    plugins: [
+        resolve({
+            extensions,
+            browser: true,
+        }),
+        babel({
+            extensions,
+            babelHelpers: 'bundled',
+        }),
+        terser(),
+    ],
+};
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..fc7f319
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,2 @@
+/* eslint import/prefer-default-export: 0 */
+export const MIME_TYPE = 'application/msgio+json';
diff --git a/src/endpoint.ts b/src/endpoint.ts
new file mode 100644
index 0000000..8e238d0
--- /dev/null
+++ b/src/endpoint.ts
@@ -0,0 +1,51 @@
+import {createNanoEvents} from 'nanoevents';
+import {EndpointEvent, EndpointEventType, Receiver} from './types';
+import type Socket from './socket';
+import {MIME_TYPE} from './constants';
+
+class Endpoint {
+    emitter = createNanoEvents();
+
+    origin = window.location.origin;
+
+    socketId = 'none';
+
+    receiver: Receiver;
+
+    constructor(receiver: Receiver) {
+        this.receiver = receiver;
+    }
+
+    sendPacket = (type: EndpointEventType, body: any) => {
+        this.receiver.target.postMessage({
+            mime: MIME_TYPE,
+            type,
+            socket: type === 'CONNECT' ? this.socketId : undefined,
+            body,
+        }, this.receiver.origin);
+    };
+
+    isValidEvent = (e: EndpointEvent) => {
+        const {origin, data: {mime, type, socket}} = e;
+
+        if (origin !== this.receiver.origin) {
+            return false;
+        }
+
+        if (mime !== MIME_TYPE) {
+            return false;
+        }
+
+        if (type !== 'CONNECT' && socket !== this.socketId) {
+            return false;
+        }
+
+        return true;
+    };
+
+    on = (event: 'connect', fn: (socket: Socket) => void) => {
+        this.emitter.on(event, fn);
+    };
+}
+
+export default Endpoint;
diff --git a/src/guest.ts b/src/guest.ts
new file mode 100644
index 0000000..d89c1f1
--- /dev/null
+++ b/src/guest.ts
@@ -0,0 +1,51 @@
+import {GuestOption, EndpointEvent, FrameSize} from './types';
+import Endpoint from './endpoint';
+import Socket from './socket';
+import {resolveOrigin, typeOf, bodyOf} from './utils';
+
+class Guest extends Endpoint {
+    option: GuestOption; // only for debug
+
+    constructor(option: GuestOption) {
+        const {host} = option;
+
+        super({
+            target: window.parent,
+            origin: resolveOrigin(host),
+        });
+
+        this.option = option;
+
+        window.addEventListener('message', this.onConnect);
+    }
+
+    onConnect = (e: EndpointEvent) => {
+        if (!this.isValidEvent(e)) {
+            return;
+        }
+
+        if (typeOf(e) !== 'CONNECT') {
+            return;
+        }
+
+        const desiredSocketId = bodyOf(e);
+
+        if (!desiredSocketId) {
+            return;
+        }
+
+        this.socketId = desiredSocketId;
+
+        this.sendPacket('CONNECT', this.socketId);
+
+        this.emitter.emit('connect', new Socket(this));
+
+        window.removeEventListener('message', this.onConnect);
+    };
+
+    resize = (size: FrameSize) => {
+        this.sendPacket('RESIZE', size);
+    };
+}
+
+export default Guest;
diff --git a/src/iframe.ts b/src/iframe.ts
new file mode 100644
index 0000000..9a43455
--- /dev/null
+++ b/src/iframe.ts
@@ -0,0 +1,69 @@
+import {EndpointEvent} from './types';
+import Endpoint from './endpoint';
+import Socket from './socket';
+import {resolveOrigin, generateId, typeOf} from './utils';
+
+class Iframe extends Endpoint {
+    dom: HTMLIFrameElement;
+
+    desiredSocketId = generateId();
+
+    constructor(dom: HTMLIFrameElement) {
+        if (dom.tagName !== 'IFRAME' || !dom.contentWindow) {
+            throw new Error('The DOM Node supplied is not a valid iframe node!<msgio>');
+        }
+
+        super({
+            target: dom.contentWindow,
+            origin: resolveOrigin(dom.src),
+        });
+
+        this.dom = dom;
+
+        window.addEventListener('message', this.onConnect);
+        window.addEventListener('message', this.onResize);
+
+        this.sendPacket('CONNECT', this.desiredSocketId);
+    }
+
+    onConnect = (e: EndpointEvent) => {
+        if (!this.isValidEvent(e)) {
+            return;
+        }
+
+        if (typeOf(e) !== 'CONNECT') {
+            return;
+        }
+
+        const repliedSocketId = e.data.body;
+
+        if (repliedSocketId !== this.desiredSocketId) {
+            return;
+        }
+
+        this.socketId = this.desiredSocketId;
+
+        this.desiredSocketId = 'verified';
+
+        this.emitter.emit('connect', new Socket(this));
+
+        window.removeEventListener('message', this.onConnect);
+    };
+
+    onResize = (e: EndpointEvent) => {
+        if (!this.isValidEvent(e)) {
+            return;
+        }
+
+        if (typeOf(e) !== 'RESIZE') {
+            return;
+        }
+
+        const {width, height} = e.data.body;
+
+        this.dom.width = width;
+        this.dom.height = height;
+    };
+}
+
+export default Iframe;
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..39a2d4d
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,2 @@
+export {default as Iframe} from './iframe';
+export {default as Guest} from './guest';
diff --git a/src/socket.ts b/src/socket.ts
new file mode 100644
index 0000000..2b05d58
--- /dev/null
+++ b/src/socket.ts
@@ -0,0 +1,167 @@
+import {createNanoEvents} from 'nanoevents';
+import {SocketEvent, SocketEventType, SocketCallResponseEventPayload, SocketCallRegistryValue} from './types';
+import type Endpoint from './endpoint';
+import {MIME_TYPE} from './constants';
+import {generateId, typeOf, bodyOf, encodeError, decodeError} from './utils';
+
+class Socket {
+    emitter = createNanoEvents();
+
+    id: string;
+
+    connection: Endpoint;
+
+    functionRegistry: Map<string, (...args: any) => any>;
+
+    callRegistry: Map<string, SocketCallRegistryValue>;
+
+    constructor(connection: Endpoint) {
+        this.connection = connection;
+
+        this.id = this.connection.socketId;
+
+        this.functionRegistry = new Map();
+
+        this.callRegistry = new Map();
+
+        window.addEventListener('message', this.onEvent);
+        window.addEventListener('message', this.onCallRequest);
+        window.addEventListener('message', this.onCallResponse);
+    }
+
+    isValidEvent = (e: SocketEvent) => {
+        const {origin, data: {mime, socket}} = e;
+
+        if (origin !== this.connection.receiver.origin) {
+            return false;
+        }
+
+        if (mime !== MIME_TYPE) {
+            return false;
+        }
+
+        if (socket !== this.id) {
+            return false;
+        }
+
+        return true;
+    };
+
+    sendPacket = (type: SocketEventType, body: any) => {
+        const {target, origin} = this.connection.receiver;
+
+        target.postMessage({
+            mime: MIME_TYPE,
+            type,
+            socket: this.id,
+            body,
+        }, origin);
+    };
+
+    onEvent = (e: SocketEvent) => {
+        if (!this.isValidEvent(e)) {
+            return;
+        }
+
+        if (typeOf(e) !== 'SOCKET_EVENT') {
+            return;
+        }
+
+        const {event, payload} = bodyOf(e);
+
+        this.emitter.emit(event, payload);
+    };
+
+    on = (event: string, fn: (...args: any) => void) => {
+        this.emitter.on(event, fn);
+    };
+
+    emit = (event: string, payload: any) => {
+        this.sendPacket('SOCKET_EVENT', {event, payload});
+    };
+
+    func = (fname: string, fn: (...args: any) => void) => {
+        if (typeof fn !== 'function') {
+            throw new Error('The object supplied to \'function\' must be a function!<msgio>');
+        }
+
+        this.functionRegistry.set(fname, fn);
+    };
+
+    onCallRequest = (e: SocketEvent) => {
+        if (!this.isValidEvent(e)) {
+            return;
+        }
+
+        if (typeOf(e) !== 'SOCKET_CALL_REQUEST') {
+            return;
+        }
+
+        const {callId, fname, args} = bodyOf(e);
+
+        const send = (payload: SocketCallResponseEventPayload) => {
+            this.sendPacket('SOCKET_CALL_RESPONSE', {callId, fname, payload});
+        };
+
+        const sendError = (result: Error) => send({error: true, result: encodeError(result)});
+
+        const sendResult = (result: unknown) => send({error: false, result});
+
+        if (!this.functionRegistry.has(fname)) {
+            sendError(new ReferenceError(`${fname} is not defined!<msgio>`));
+            return;
+        }
+
+        try {
+            // NOTE: need typescirpt's non-null assertion operator ! below
+            // see Line 186 above and https://github.com/microsoft/TypeScript/issues/41045
+            const result = this.functionRegistry.get(fname)!(...args);
+
+            Promise.resolve(result)
+                .then(sendResult)
+                .catch(sendError);
+        } catch (error) {
+            sendError(error as Error);
+        }
+    };
+
+    onCallResponse = (e: SocketEvent) => {
+        if (!this.isValidEvent(e)) {
+            return;
+        }
+
+        if (typeOf(e) !== 'SOCKET_CALL_RESPONSE') {
+            return;
+        }
+
+        const {callId, payload: {error, result}} = bodyOf(e);
+
+        if (!this.callRegistry.has(callId)) {
+            return;
+        }
+
+        // NOTE: need typescirpt's non-null assertion operator ! below
+        // see Line 186 above and https://github.com/microsoft/TypeScript/issues/41045
+        const {resolve, reject} = this.callRegistry.get(callId)!;
+
+        if (error) {
+            reject(decodeError(result));
+        } else {
+            resolve(result);
+        }
+
+        this.callRegistry.delete(callId);
+    };
+
+    call = (fname: string, ...args: any[]) => {
+        const callId = generateId();
+
+        this.sendPacket('SOCKET_CALL_REQUEST', {callId, fname, args});
+
+        return new Promise((resolve, reject) => {
+            this.callRegistry.set(callId, {callId, fname, args, resolve, reject});
+        });
+    };
+}
+
+export default Socket;
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..cdbef42
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,90 @@
+export type FrameSize = {
+    width: number;
+    height: number;
+};
+
+export type GuestOption = {
+    host: string;
+};
+
+type IframeEndpointEventType = 'RESIZE';
+
+export type EndpointEventType = 'CONNECT' | IframeEndpointEventType;
+
+export type SocketEventType = 'SOCKET_EVENT' | 'SOCKET_CALL_REQUEST' | 'SOCKET_CALL_RESPONSE';
+
+export type Receiver = {
+    target: Window;
+    origin: string;
+};
+
+type MsgioEventData = {
+    mime: string;
+    type: string;
+    socket: string;
+    body: unknown;
+};
+
+export type EndpointEvent = MessageEvent & {
+    data: MsgioEventData;
+};
+
+export type SocketError = {
+    name: string;
+    message: string;
+};
+
+type SocketSocketEvent = MessageEvent & {
+    data: MsgioEventData & {
+        body: {
+            event: string;
+            args: unknown;
+        };
+    };
+};
+
+type SocketCallRequestEvent = MessageEvent & {
+    data: MsgioEventData & {
+        body: {
+            callId: string;
+            fname: string;
+            args: unknown;
+        };
+    };
+};
+
+export type SocketCallResponseEvent = MessageEvent & {
+    data: MsgioEventData & {
+        body: {
+            callId: string;
+            fname: string;
+            payload: SocketCallResponseEventPayload;
+            args: unknown;
+        };
+    };
+};
+
+export type SocketEvent = SocketSocketEvent | SocketCallRequestEvent | SocketCallResponseEvent;
+
+export type SocketCallResponseEventPayload = {
+    error: boolean;
+    result: SocketError | unknown;
+};
+
+export type SocketCallRegistryValue = {
+    callId: string;
+    fname: string;
+    args: any[];
+    resolve: (value: unknown) => void;
+    reject: (reason?:any) => void;
+};
+
+export type ErrorNameConstructorMap = {
+    [key: string]: typeof Error |
+        typeof EvalError |
+        typeof RangeError |
+        typeof ReferenceError |
+        typeof SyntaxError |
+        typeof TypeError |
+        typeof URIError;
+};
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..30b97c3
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,45 @@
+import {nanoid} from 'nanoid';
+import {SocketError, ErrorNameConstructorMap} from './types';
+
+export const resolveOrigin = (url: string) => {
+    const a = document.createElement('a');
+
+    a.href = url;
+
+    const protocol = a.protocol.length > 4 ? a.protocol : window.location.protocol;
+
+    const host = (() => {
+        if (a.host.length > 0) {
+            return (a.port === '80' || a.port === '443') ? a.hostname : a.host;
+        }
+        return window.location.host;
+    })();
+
+    return a.origin || `${protocol}//${host}`;
+};
+
+export const generateId = () => `${nanoid()}<msgio>`;
+
+export const typeOf = (e: MessageEvent) => e.data.type;
+
+export const bodyOf = (e: MessageEvent) => e.data.body;
+
+export const encodeError = ({name, message}: Error) => ({name, message});
+
+export const decodeError = ({name, message}: SocketError) => {
+    const ErrorConstructor: ErrorNameConstructorMap = {
+        Error,
+        EvalError,
+        RangeError,
+        ReferenceError,
+        SyntaxError,
+        TypeError,
+        URIError,
+    };
+
+    if (name in ErrorConstructor) {
+        return new ErrorConstructor[name](message);
+    }
+
+    return new Error('Unknown Error type!<msgio>');
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..da42f31
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "extends": "@tsconfig/recommended/tsconfig.json",
+    "include": ["src/**/*"],
+    "compilerOptions": {
+        "outDir": "./dist",
+        "declaration": true
+    }
+}