From 229a575ab5e880ebdc0d9351293815a15a03f11e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 19 Feb 2022 23:26:15 +0800
Subject: [PATCH] refactor(web): reduce plugin entry filesize

---
 .../com.msgbyte.bbcode/src/bbcode/index.tsx   |  5 +++-
 web/plugins/com.msgbyte.bbcode/src/index.tsx  | 10 +++++--
 web/plugins/com.msgbyte.miaolang/src/index.ts | 30 +++++--------------
 web/plugins/com.msgbyte.miaolang/src/reg.ts   | 20 +++++++++++++
 web/plugins/com.msgbyte.webview/src/index.tsx |  5 ++--
 .../com.msgbyte.webview/src/translate.ts      |  4 +++
 6 files changed, 45 insertions(+), 29 deletions(-)
 create mode 100644 web/plugins/com.msgbyte.miaolang/src/reg.ts

diff --git a/web/plugins/com.msgbyte.bbcode/src/bbcode/index.tsx b/web/plugins/com.msgbyte.bbcode/src/bbcode/index.tsx
index c62b4e8f..b46a526d 100644
--- a/web/plugins/com.msgbyte.bbcode/src/bbcode/index.tsx
+++ b/web/plugins/com.msgbyte.bbcode/src/bbcode/index.tsx
@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import bbcodeParser from './parser';
 import urlRegex from 'url-regex';
+import '../tags/__all__';
 
 /**
  * 客户端预处理文本
@@ -23,9 +24,11 @@ export function preProcessText(plainText: string): string {
 interface BBCodeProps {
   plainText: string;
 }
-export const BBCode: React.FC<BBCodeProps> = React.memo(({ plainText }) => {
+const BBCode: React.FC<BBCodeProps> = React.memo(({ plainText }) => {
   const bbcodeComponent = bbcodeParser.render(preProcessText(plainText));
 
   return <Fragment>{bbcodeComponent}</Fragment>;
 });
 BBCode.displayName = 'BBCode';
+
+export default BBCode;
diff --git a/web/plugins/com.msgbyte.bbcode/src/index.tsx b/web/plugins/com.msgbyte.bbcode/src/index.tsx
index 9ddecaf7..2d1a6dbc 100644
--- a/web/plugins/com.msgbyte.bbcode/src/index.tsx
+++ b/web/plugins/com.msgbyte.bbcode/src/index.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
-import { regMessageRender, regMessageTextDecorators } from '@capital/common';
-import { BBCode } from './bbcode';
-import './tags/__all__';
+import {
+  Loadable,
+  regMessageRender,
+  regMessageTextDecorators,
+} from '@capital/common';
+
+const BBCode = Loadable(() => import('./bbcode'));
 
 regMessageRender((message) => {
   return <BBCode plainText={message} />;
diff --git a/web/plugins/com.msgbyte.miaolang/src/index.ts b/web/plugins/com.msgbyte.miaolang/src/index.ts
index a2886042..9196f413 100644
--- a/web/plugins/com.msgbyte.miaolang/src/index.ts
+++ b/web/plugins/com.msgbyte.miaolang/src/index.ts
@@ -1,29 +1,15 @@
-import { decode, encode, isMiao } from './miaotrans';
-import {
-  regMessageInterpreter,
-  regChatInputAction,
-  openModal,
-} from '@capital/common';
+import { regChatInputAction, openModal, Loadable } from '@capital/common';
 import { createElement } from 'react';
-import { SendMiaoModal } from './SendMiaoModal';
 import { Translate } from './translate';
 
-const miao = encode('喵语翻译已加载');
-const human = decode(miao);
+const SendMiaoModal = Loadable(() =>
+  import('./SendMiaoModal').then((module) => ({
+    default: module.SendMiaoModal,
+  }))
+);
 
-console.log(`${miao}\n${human}`);
-
-regMessageInterpreter({
-  name: Translate.miaoTrans,
-  explainMessage(message: string) {
-    // 喵语 -> 人话
-    if (!isMiao(message)) {
-      return null;
-    }
-
-    return decode(message);
-  },
-});
+// Just for reduce entry file size
+import('./reg');
 
 regChatInputAction({
   label: Translate.title,
diff --git a/web/plugins/com.msgbyte.miaolang/src/reg.ts b/web/plugins/com.msgbyte.miaolang/src/reg.ts
new file mode 100644
index 00000000..e3d7ab5e
--- /dev/null
+++ b/web/plugins/com.msgbyte.miaolang/src/reg.ts
@@ -0,0 +1,20 @@
+import { decode, encode, isMiao } from './miaotrans';
+import { regMessageInterpreter } from '@capital/common';
+import { Translate } from './translate';
+
+const miao = encode('喵语翻译已加载');
+const human = decode(miao);
+
+console.log(`${miao}\n${human}`);
+
+regMessageInterpreter({
+  name: Translate.miaoTrans,
+  explainMessage(message: string) {
+    // 喵语 -> 人话
+    if (!isMiao(message)) {
+      return null;
+    }
+
+    return decode(message);
+  },
+});
diff --git a/web/plugins/com.msgbyte.webview/src/index.tsx b/web/plugins/com.msgbyte.webview/src/index.tsx
index 0776c20b..fcf82be8 100644
--- a/web/plugins/com.msgbyte.webview/src/index.tsx
+++ b/web/plugins/com.msgbyte.webview/src/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { regGroupPanel } from '@capital/common';
 import { Translate } from './translate';
-import _get from 'lodash/get';
 
 const PLUGIN_NAME = 'com.msgbyte.webview';
 
@@ -12,7 +11,7 @@ const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
     return <div>{Translate.notfound}</div>;
   }
 
-  const url = _get(panelInfo, 'meta.url');
+  const url = panelInfo?.meta?.url;
 
   return (
     <iframe key={String(url)} className="w-full h-full bg-white" src={url} />
@@ -23,6 +22,6 @@ regGroupPanel({
   name: `${PLUGIN_NAME}/grouppanel`,
   label: Translate.webpanel,
   provider: PLUGIN_NAME,
-  extraFormMeta: [{ type: 'text', name: 'url', label: '网址' }],
+  extraFormMeta: [{ type: 'text', name: 'url', label: Translate.website }],
   render: GroupWebPanelRender,
 });
diff --git a/web/plugins/com.msgbyte.webview/src/translate.ts b/web/plugins/com.msgbyte.webview/src/translate.ts
index 31549c40..8572d0ab 100644
--- a/web/plugins/com.msgbyte.webview/src/translate.ts
+++ b/web/plugins/com.msgbyte.webview/src/translate.ts
@@ -6,4 +6,8 @@ export const Translate = {
     'zh-CN': '加载失败, 面板信息不存在',
     'en-US': 'Loading failed, panel info does not exist',
   }),
+  website: localTrans({
+    'zh-CN': '网址',
+    'en-US': 'Website',
+  }),
 };