From d1f2269fbe7c56714aba1c2593381f1843bc3d40 Mon Sep 17 00:00:00 2001
From: ZiuChen <ZiuChen@outlook.com>
Date: Tue, 2 Apr 2024 12:17:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20Demo=20=E7=AB=99?=
 =?UTF-8?q?=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/demos/promiseify-post-message/Index.vue | 36 +++++++++++++++
 docs/demos/promiseify-post-message/Inner.vue | 40 +++++++++++++++++
 docs/demos/promiseify-post-message/base.ts   | 43 ++++++++++++++++++
 docs/demos/promiseify-post-message/index.md  | 17 ++++++++
 docs/demos/promiseify-post-message/inner.md  | 14 ++++++
 docs/demos/promiseify-post-message/sdk.ts    | 46 ++++++++++++++++++++
 docs/demos/promiseify-post-message/types.ts  | 11 +++++
 7 files changed, 207 insertions(+)
 create mode 100644 docs/demos/promiseify-post-message/Index.vue
 create mode 100644 docs/demos/promiseify-post-message/Inner.vue
 create mode 100644 docs/demos/promiseify-post-message/base.ts
 create mode 100644 docs/demos/promiseify-post-message/index.md
 create mode 100644 docs/demos/promiseify-post-message/inner.md
 create mode 100644 docs/demos/promiseify-post-message/sdk.ts
 create mode 100644 docs/demos/promiseify-post-message/types.ts

diff --git a/docs/demos/promiseify-post-message/Index.vue b/docs/demos/promiseify-post-message/Index.vue
new file mode 100644
index 00000000..366656b3
--- /dev/null
+++ b/docs/demos/promiseify-post-message/Index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="home">
+    <h2>Home</h2>
+    <iframe ref="iframeRef" src="/demos/promiseify-post-message/inner" frameborder="0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { registerBase } from './base'
+
+const iframeRef = ref<HTMLIFrameElement | null>(null)
+
+onMounted(() => {
+  if (iframeRef.value && iframeRef.value.contentWindow) {
+    registerBase(iframeRef.value.contentWindow)
+  }
+})
+</script>
+
+<style scoped>
+/* 隐藏掉窄屏时 fixd 在顶部的 Return to top */
+:global(.VPLocalNav) {
+  display: none;
+}
+
+.home {
+  padding: 25px;
+}
+
+iframe {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ccc;
+}
+</style>
diff --git a/docs/demos/promiseify-post-message/Inner.vue b/docs/demos/promiseify-post-message/Inner.vue
new file mode 100644
index 00000000..a969b6bf
--- /dev/null
+++ b/docs/demos/promiseify-post-message/Inner.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="inner">
+    <h2>Inner</h2>
+    <button @click="getUserToken('123456')">getUserToken: {{ userToken }}</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { registerSdk, postMessage } from './sdk'
+
+registerSdk()
+
+const userToken = ref('')
+
+async function getUserToken(userId: string) {
+  const token = await postMessage({
+    namespace: 'user',
+    action: 'getUserToken',
+    payload: {
+      userId
+    }
+  })
+
+  if (token) {
+    userToken.value = token as string
+  }
+}
+</script>
+
+<style scoped>
+/* 隐藏掉窄屏时 fixd 在顶部的 Return to top */
+:global(.VPLocalNav) {
+  display: none;
+}
+
+.inner {
+  padding: 25px;
+}
+</style>
diff --git a/docs/demos/promiseify-post-message/base.ts b/docs/demos/promiseify-post-message/base.ts
new file mode 100644
index 00000000..169bf0b6
--- /dev/null
+++ b/docs/demos/promiseify-post-message/base.ts
@@ -0,0 +1,43 @@
+import get from 'lodash-es/get'
+import { FuncMap } from './types'
+import { JSBridgeParams } from './sdk'
+
+/**
+ * 注册 SDK 基座
+ */
+export function registerBase(target: Window) {
+  window.addEventListener('message', async (e) => {
+    const params = e.data as JSBridgeParams<any>
+    const namespace = params.namespace
+    const action = params.action
+    const callback = get(callbackMap, [namespace, action])
+    if (callback) {
+      const result = await callback(params.payload)
+      target.postMessage(
+        {
+          params,
+          result
+        },
+        '*'
+      )
+    }
+  })
+}
+
+type Namespace = keyof FuncMap
+type Action = keyof FuncMap[Namespace]
+type Payload = FuncMap[Namespace][Action] extends { payload: infer P } ? P : never
+type Result = FuncMap[Namespace][Action] extends { result: infer R } ? R : never
+
+const callbackMap: Record<
+  Namespace,
+  {
+    [key in Action]: (payload: Payload) => Result
+  }
+> = {
+  user: {
+    getUserToken: ({ userId }) => {
+      return 'token:' + userId
+    }
+  }
+}
diff --git a/docs/demos/promiseify-post-message/index.md b/docs/demos/promiseify-post-message/index.md
new file mode 100644
index 00000000..cf9f6116
--- /dev/null
+++ b/docs/demos/promiseify-post-message/index.md
@@ -0,0 +1,17 @@
+---
+layout: page
+navbar: false
+sidebar: false
+aside: false
+footer: false
+---
+
+# Promiseify PostMessage
+
+将 postMessage 消息通信 Promise 化
+
+<script setup>
+import DemoComponent from './Index.vue'
+</script>
+
+<DemoComponent />
\ No newline at end of file
diff --git a/docs/demos/promiseify-post-message/inner.md b/docs/demos/promiseify-post-message/inner.md
new file mode 100644
index 00000000..95439850
--- /dev/null
+++ b/docs/demos/promiseify-post-message/inner.md
@@ -0,0 +1,14 @@
+---
+layout: page
+navbar: false
+sidebar: false
+aside: false
+footer: false
+outline: false
+---
+
+<script setup>
+import DemoComponent from './Inner.vue'
+</script>
+
+<DemoComponent />
\ No newline at end of file
diff --git a/docs/demos/promiseify-post-message/sdk.ts b/docs/demos/promiseify-post-message/sdk.ts
new file mode 100644
index 00000000..bb2277cb
--- /dev/null
+++ b/docs/demos/promiseify-post-message/sdk.ts
@@ -0,0 +1,46 @@
+import { FuncMap } from './types'
+
+export interface JSBridgeParams<T extends keyof FuncMap> {
+  namespace: T
+  action: keyof FuncMap[T]
+  payload: FuncMap[T][keyof FuncMap[T]] extends { payload: infer P } ? P : never
+}
+
+/**
+ * 注册 SDK 应用
+ */
+export function registerSdk() {
+  window.addEventListener('message', messageHandler)
+}
+
+const postMessageCallbackMap = new Map()
+
+function messageHandler({ data, type }: MessageEvent) {
+  if (type === 'message') {
+    const { params, result } = data
+    const key = [params.namespace, params.action, params.id].join('.')
+    const callback = postMessageCallbackMap.get(key)
+    if (callback) {
+      callback(result)
+      postMessageCallbackMap.delete(key)
+    }
+  }
+}
+
+let uniqueId = 0
+
+export function postMessage<T extends keyof FuncMap>(
+  params: JSBridgeParams<T>
+): Promise<FuncMap[T][keyof FuncMap[T]] extends { result: infer R } ? R : never> {
+  return new Promise((resolve) => {
+    if (window.parent) {
+      const id = uniqueId++
+      const key = [params.namespace, params.action, id].join('.')
+      postMessageCallbackMap.set(key, resolve)
+      const _params = structuredClone(params)
+      // @ts-expect-error - id is private field.
+      _params.id = id
+      window.parent.postMessage(_params, '*')
+    }
+  })
+}
diff --git a/docs/demos/promiseify-post-message/types.ts b/docs/demos/promiseify-post-message/types.ts
new file mode 100644
index 00000000..77c00b2f
--- /dev/null
+++ b/docs/demos/promiseify-post-message/types.ts
@@ -0,0 +1,11 @@
+/**
+ * 基座与 SDK 共享同一份类型定义
+ */
+export interface FuncMap {
+  user: {
+    getUserToken: {
+      payload: { userId: string }
+      result: string
+    }
+  }
+}