feat: support miniprogram (#120)

Author: wqcstrong

.github/workflows/build_docker.yml

@@ -11,7 +11,7 @@ name: Create and publish a dev Docker image
 
 on:
   push:
-    branches: ["main"]
+    branches: ["main","feat/miniprogram"]
 
 env:
   REGISTRY: ghcr.io

package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
-    "@huolala-tech/page-spy": "^1.4.11",
+    "@huolala-tech/page-spy": "^1.5.2",
     "@mdx-js/rollup": "^2.3.0",
     "@types/lodash-es": "^4.17.7",
     "@types/mdx": "^2.0.4",
@@ -38,7 +38,7 @@
     "less": "^4.1.2",
     "lint-staged": "^12.3.3",
     "prettier": "^2.5.1",
-    "typescript": "^4.7.4",
+    "typescript": "^5.3.3",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^2.4.0",
     "yorkie": "^2.0.0"

scripts/public-files.sh

@@ -5,7 +5,7 @@ root=$(pwd)
 # SDK
 target_sdk="${root}/public/page-spy"
 mkdir -p "$target_sdk"
-cp "${root}/node_modules/@huolala-tech/page-spy/dist/index.min.js" "${root}/public/page-spy/index.min.js"
+cp "${root}/node_modules/@huolala-tech/page-spy/dist/web/index.min.js" "${root}/public/page-spy/index.min.js"
 
 # source-map
 target_sourcemap="${root}/public/source-map"

src/assets/image/miniprogram.svg

@@ -26,8 +26,18 @@
     "no-frames": "No valid error information found"
   },
   "inject": {
-    "load-script": "Load a <script> in the testing project;",
-    "init-instance": "<0>Next, configure (optional) and initialize; check </0><1>configuration options;</1>",
+    "web": {
+      "title": "WEB",
+      "load-sdk": "Load a <script> in the test project;",
+      "init-sdk": "<0>Then, initialize it and check the</0> <1>configuration options</1>:"
+    },
+    "miniprogram": {
+      "title": "Mini Program",
+      "request-host": "Add the page-spy server domain to the whitelist of the miniprogram http and websocket requests. Note that the miniprogram requires https and wss protocols, except for the development environment.",
+      "install-sdk": "First, install dependencies in the project:",
+      "init-sdk": "<0>For cross platform frameworks like uniApp and Taro，import the SDK in the entry file and initialize it，check the </0> <1>configuration options</1>：",
+      "init-sdk-native": "For native miniprogram, you can not use node_modules directly, you have to copy the SDK file to your project path and import them:"
+    },
     "end": "That's ALL.",
     "start-debug": "Start debugging by clicking the <1>Connections</1> menu at the top!"
   },

src/assets/image/web-h5.svg

@@ -26,8 +26,18 @@
     "no-frames": "有効なエラー情報が見つかりませんでした"
   },
   "inject": {
-    "load-script": "テストプロジェクトに <script> を読み込む；",
-    "init-instance": "<0>次に、構成（オプション）して初期化します； </0><1>構成オプションを確認します。</1>",
+    "web": {
+      "title": "WEB",
+      "load-sdk": "テストプロジェクトで <script> をロードする；",
+      "init-sdk": "<0>次に、初期化し、</0> <1>構成オプション</1> を確認します："
+    },
+    "miniprogram": {
+      "title": "Mini Program",
+      "request-host": "page-spy サービスドメインを小プログラムのhttp、websocketリクエストのホワイトリストに入力します。開発環境以外では、小プログラムはhttpsとwssプロトコルの使用を強制しますので注意してください。",
+      "install-sdk": "まず、プロジェクトに依存関係をインストールします：",
+      "init-sdk": "<0>クロスプラットフォームのミニプログラムフレームワーク（uniApp、Taroなど）については、エントリーファイルでSDKをインポートし、インスタンス化します。</0> <1>構成オプション</1> を確認します：",
+      "init-sdk-native": "もし原生のミニプログラムであれば、node_modulesのパスを直接使用することができないため、パッケージ内のファイルを手動でプロジェクトディレクトリにコピーしてインポートする必要があります。"
+    },
     "end": "以上がすべてです。",
     "start-debug": "<1>接続</1>メニューからトップに移動し、デバッグを開始します！"
   },

src/assets/locales/en.json

@@ -26,8 +26,18 @@
     "no-frames": "유효한 오류 정보를 찾을 수 없습니다"
   },
   "inject": {
-    "load-script": "테스트 프로젝트에 <script>를 로드합니다.",
-    "init-instance": "<0>다음으로, 구성 (옵션) 및 초기화; 확인 </0><1>구성 옵션;</1>",
+    "web": {
+      "title": "WEB",
+      "load-sdk": "테스트 프로젝트에 <script>를 로드하십시오;",
+      "init-sdk": "<0>그런 다음 초기화하고</0> <1>구성 옵션</1>을 확인하십시오:"
+    },
+    "miniprogram": {
+      "title": "Mini Program",
+      "request-host": "\"page-spy\" 서비스 도메인을 미니 프로그램의 HTTP 및 WebSocket 요청 화이트리스트에 추가하십시오. 개발 환경을 제외하고는 미니 프로그램에서는 HTTPS 및 WSS 프로토콜을 의무적으로 사용해야 합니다.",
+      "install-sdk": "먼저 프로젝트에 종속성을 설치하십시오:",
+      "init-sdk": "<0>크로스 플랫폼 미니 프로그램 프레임워크인 uniApp 및 Taro와 같은 경우, 엔트리 파일에서 SDK를 가져와 인스턴스화합니다.</0> <1>구성 옵션</1>을 확인하십시오:",
+      "init-sdk-native": "원래의 미니 프로그램이라면 node_modules의 경로를 직접 사용할 수 없으므로, 패키지 내 파일을 수동으로 프로젝트 디렉토리에 복사하고 가져와야 합니다."
+    },
     "end": "모두 여기까지입니다.",
     "start-debug": "<1>연결</1> 메뉴에서 상단으로 이동하여 디버그를 시작하세요!"
   },

src/assets/locales/ja.json

@@ -26,8 +26,18 @@
     "no-frames": "未找到有效的错误信息"
   },
   "inject": {
-    "load-script": "在测试项目中加载一个 <script>；",
-    "init-instance": "<0>紧接着，配置（可选的）并初始化；查看 </0><1>配置项；</1>",
+    "web": {
+      "title": "WEB",
+      "load-sdk": "在测试项目中加载一个 <script>；",
+      "init-sdk": "<0>紧接着初始化，查看</0> <1>配置项</1>："
+    },
+    "miniprogram": {
+      "title": "小程序",
+      "request-host": "将 page-spy 服务域名填入小程序的 http、websocket 请求白名单中。注意除了开发环境，小程序强制要求使用 https 和 wss 协议。",
+      "install-sdk": "首先在项目中安装依赖：",
+      "init-sdk": "<0>对于跨端小程序框架（uniApp, Taro 等），在入口文件中引入 SDK 并实例化，查看</0> <1>配置项</1>：",
+      "init-sdk-native": "如果是原生小程序，由于无法直接使用 node_modules 路径，需要手动将包中的文件复制到项目目录中引入："
+    },
     "end": "以上就是全部。",
     "start-debug": "从顶部的 <1>房间列表</1> 菜单进入并开始调试！"
   },

src/assets/locales/ko.json

@@ -5,20 +5,22 @@ import { Space } from 'antd';
 import { CheckOutlined } from '@ant-design/icons';
 import sh from '@/utils/shiki-highlighter';
 import { useAsyncEffect } from 'ahooks';
+import type { Lang } from 'shiki';
 
 interface Props {
   code: string;
+  lang?: Lang;
   showCopy?: boolean;
 }
 
-export const CodeBlock = ({ code, showCopy = true }: Props) => {
+export const CodeBlock = ({ code, lang = 'html', showCopy = true }: Props) => {
   const [codeContent, setCodeContent] = useState('');
   useAsyncEffect(async () => {
     const highlighter = await sh.get({
-      lang: 'html',
+      lang,
     });
     const content = highlighter.codeToHtml(code, {
-      lang: 'html',
+      lang,
     });
     setCodeContent(content);
   }, [code]);

src/assets/locales/zh.json

@@ -0,0 +1,124 @@
+import { ReactComponent as WebSvg } from '@/assets/image/web-h5.svg';
+import { ReactComponent as MiniprogramSvg } from '@/assets/image/miniprogram.svg';
+import { ReactNode, useMemo, type ComponentType } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import type { Lang } from 'shiki';
+import { CodeBlock } from '@/components/CodeBlock';
+
+export type PlatformName = 'web' | 'miniprogram';
+
+export const PLATFORMS: { name: PlatformName; icon: ComponentType }[] = [
+  {
+    name: 'web',
+    icon: WebSvg,
+  },
+  {
+    name: 'miniprogram',
+    icon: MiniprogramSvg,
+  },
+];
+
+interface Props {
+  platform: PlatformName;
+  onCloseModal: () => void;
+}
+
+export const IntegrationWithPlatform = ({ platform, onCloseModal }: Props) => {
+  const { t } = useTranslation();
+  const deployPath = (location.host + location.pathname).replace(/\/+$/, '');
+  const steps = useMemo(() => {
+    const stepsWithPlatform = {
+      web: [
+        {
+          title: t('inject.web.load-sdk'),
+          code: `<script crossorigin="anonymous" src="${location.protocol}//${deployPath}/page-spy/index.min.js"></script>`,
+        },
+        {
+          title: (
+            <Trans i18nKey="inject.web.init-sdk">
+              <span>slot-0</span>
+              <a
+                href="https://github.com/HuolalaTech/page-spy?tab=readme-ov-file#web"
+                target="_blank"
+              >
+                slot-1
+              </a>
+            </Trans>
+          ),
+          code: `<script>
+  window.$pageSpy = new PageSpy();
+</script>`,
+        },
+      ],
+      miniprogram: [
+        {
+          title: t('inject.miniprogram.install-sdk'),
+          code: `yarn add @huolala-tech/page-spy@latest`,
+          lang: 'bash',
+        },
+        {
+          title: t('inject.miniprogram.request-host'),
+          code: `https://${window.location.host}\nwss://${window.location.host}`,
+        },
+        {
+          title: (
+            <Trans i18nKey="inject.miniprogram.init-sdk">
+              <span>slot-0</span>
+              <a
+                href="https://github.com/HuolalaTech/page-spy?tab=readme-ov-file#mini-program"
+                target="_blank"
+              >
+                slot-1
+              </a>
+            </Trans>
+          ),
+          code: `// @huolala-tech/page-spy v1.5.x or upper version. \nimport PageSpy from '@huolala-tech/page-spy/miniprogram';\n\nnew PageSpy({
+  api: '${deployPath}',
+})`,
+          lang: 'js',
+        },
+        {
+          title: t('inject.miniprogram.init-sdk-native'),
+          code: `import PageSpy from './your/path/page-spy.js';\n\nnew PageSpy({
+  api: '${deployPath}',
+})`,
+          lang: 'js',
+        },
+      ],
+    };
+    return [
+      ...stepsWithPlatform[platform],
+      {
+        title: (
+          <span>
+            {t('inject.end')}{' '}
+            <Trans i18nKey="inject.start-debug">
+              Start debugging by clicking the
+              <Link to="/room-list" onClickCapture={onCloseModal}>
+                Connections
+              </Link>{' '}
+              menu at the top!
+            </Trans>
+          </span>
+        ),
+        code: '',
+      },
+    ] as { title: ReactNode; code: string; lang?: Lang }[];
+  }, [onCloseModal, platform, t]);
+
+  return (
+    <div className="platform-integratio">
+      {steps.map(({ title, code, lang = 'html' }, index) => {
+        return (
+          <div className="inject-steps" key={index}>
+            <p className="inject-steps__title">
+              {index + 1}. {title}
+            </p>
+            <CodeBlock code={code} lang={lang} />
+          </div>
+        );
+      })}
+    </div>
+  );
+};