code

Author: ruojianll

.gitignore

@@ -0,0 +1,3 @@
+dist
+.DS_Store
+node_modules

.npmignore

@@ -0,0 +1,3 @@
+/docs
+/test
+/.github

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 facing-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package-lock.json

@@ -0,0 +1,21 @@
+{
+  "name": "post-messager",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "scripts": {
+    "test": "./node_modules/.bin/ts-node ./test/test.ts",
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "./node_modules/.bin/tsc",
+    "build:esm": "./node_modules/.bin/tsc -outDir dist/esm -module ES6",
+    "watch":"./node_modules/.bin/tsc --watch -outDir dist/esm -module ES6"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@types/node": "^20.10.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
+  }
+}

package.json

@@ -0,0 +1,109 @@
+interface RawMessage<T> {
+    type: "Message"
+    data: T
+}
+interface RawDown {
+    type: "Done"
+    doneId: string
+}
+type Raw<T> = (RawMessage<T> | RawDown) & {
+    __byPM: true
+    timestamp: number
+    id: string
+}
+
+function generateId() {
+    return `${Date.now()}-${Math.random()}`
+}
+
+export default class PostMessager<T> {
+    #listenerHandler: ((event: MessageEvent) => void) | null = null
+    #targetOrigin = '*'
+    #target: Window
+    #doneMap: Map<string, {
+        res: Function
+        rej: Function
+    }> = new Map
+    #doneTimeout: number
+    get doneMapSize(){
+        return this.#doneMap.size
+    }
+    constructor(opt: {
+        targetOrigin?: string
+        target: Window
+        doneTimeout?: number
+        handler: (data: T, done: Function) => void
+        rawHandler?: (data: Raw<T>, done: Function) => void
+    }) {
+        this.#target = opt.target
+        this.#targetOrigin = opt?.targetOrigin ?? '*'
+        this.#doneTimeout = opt.doneTimeout ?? 5000
+        this.#listenerHandler = (event) => {
+
+            if (event.origin !== this.#targetOrigin && this.#targetOrigin !== '*') {
+                return
+            }
+            if (event.data.__byPM !== true) {
+                return
+            }
+
+            const rawData = event.data as Raw<T>
+            // const rawData = JSON.parse(event.data) as Raw<T>
+            if (rawData.type === 'Message') {
+                const doneCb = () => {
+                    this.#post({
+                        type: 'Done',
+                        doneId: rawData.id,
+                    })
+                }
+                opt.rawHandler?.(rawData, doneCb)
+                opt.handler(rawData.data, doneCb)
+            }
+            if (rawData.type === 'Done') {
+                this.#doneMap.get(rawData.doneId)?.res()
+            }
+        }
+        window.addEventListener('message', this.#listenerHandler)
+    }
+    #post(raw: RawMessage<T> | RawDown, id = generateId(), timestamp = Date.now()) {
+        const message: Raw<T> = {
+            ...raw,
+            id,
+            timestamp,
+            __byPM: true
+        }
+        this.#target.postMessage(message, this.#targetOrigin)
+    }
+    post(data: T, promise?: false): void
+    post(data: T, promise: true): Promise<void>
+    post(data: T, promise?: boolean): Promise<void> | void {
+        const id = generateId()
+        const timestamp = Date.now()
+        const p = promise ? new Promise<void>((res, rej) => {
+            const timeout = setTimeout(() => {
+                this.#doneMap.get(id)?.rej()
+            }, this.#doneTimeout);
+            this.#doneMap.set(id, {
+                res: () => {
+                    clearTimeout(timeout)
+                    this.#doneMap.delete(id)
+                    res()
+                },
+                rej: () => {
+                    this.#doneMap.delete(id)
+                    rej(`message timeout id: ${id}`)
+                }
+            })
+        }) : undefined
+        this.#post({
+            type: 'Message',
+            data: data
+        }, id, timestamp)
+        return p
+    }
+    release() {
+        if (this.#listenerHandler) {
+            window.removeEventListener('message', this.#listenerHandler)
+        }
+    }
+}

src/index.ts

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist",
+        "baseUrl": ".",
+        "rootDir": "./src",
+        "moduleResolution": "node",
+        "module": "CommonJS",
+        "target": "ES6",
+        "strict": true,
+        "sourceMap": true,
+        "lib": [
+            "esnext",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "emitDeclarationOnly": false,
+        "composite": false,
+        "declaration": true,
+        "declarationMap": true,
+        "noUnusedLocals": false
+    },
+    "include": [
+        "./src/index.ts",
+    ],
+}