Refactor/website 2.0

website/package.json

@@ -10,12 +10,20 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@dtinsight/molecule": "^1.3.4",
+		"@dtinsight/molecule": "2.0.0-alpha.8",
 		"@jcubic/lips": "^0.20.3",
-		"monaco-editor": "0.31.0",
+		"@vscode/codicons": "^0.0.41",
+		"classnames": "^2.5.1",
+		"esbuild": "^0.24.2",
+		"idb-keyval": "^6.2.1",
+		"monaco-editor": "0.31.1",
+		"rc-tabs": "^15.5.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"reflect-metadata": "^0.1.13"
+		"reflect-metadata": "^0.1.13",
+		"tsyringe": "^4.8.0",
+		"vscode-oniguruma": "^2.0.1",
+		"vscode-textmate": "^9.2.0"
 	},
 	"devDependencies": {
 		"@types/node": "^20.2.5",
@@ -24,11 +32,16 @@
 		"@typescript-eslint/eslint-plugin": "^5.59.0",
 		"@typescript-eslint/parser": "^5.59.0",
 		"@vitejs/plugin-react": "^4.0.0",
+		"autoprefixer": "^10.4.21",
 		"eslint": "^8.38.0",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-react-refresh": "^0.3.4",
+		"postcss": "^8.5.6",
+		"sass": "^1.93.2",
+		"tailwindcss": "3",
 		"typescript": "^5.0.2",
-		"vite": "^4.3.9"
+		"vite": "^4.3.9",
+		"vite-plugin-mock-dev-server": "^2.0.1"
 	},
 	"engines": {
 		"node": ">=18"

website/plugin.ts

@@ -0,0 +1,95 @@
+import { Plugin as EsbuildPlugin } from 'esbuild';
+import * as fs from 'fs';
+
+/**
+ * 在vite中dev模式下会使用esbuild对node_modules进行预编译，导致找不到映射表中的filepath，
+ * 需要在预编译之前进行替换
+ * @param options 替换语言包
+ * @returns
+ */
+export function esbuildPluginMonacoEditorNls(): EsbuildPlugin {
+	return {
+		name: 'esbuild-plugin-monaco-editor-nls',
+		setup(build) {
+			build.onLoad({ filter: /esm[\\\/]vs[\\\/]nls\.js/ }, async () => {
+				return {
+					contents: getLocalizeCode(),
+					loader: 'js'
+				};
+			});
+
+			build.onLoad({ filter: /monaco-editor[\\\/]esm[\\\/]vs.+\.js/ }, async (args) => {
+				return {
+					contents: transformLocalizeFuncCode(args.path),
+					loader: 'js'
+				};
+			});
+		}
+	};
+}
+
+/**
+ * 替换调用方法接口参数，替换成相应语言包语言
+ * @param filepath 路径
+ * @param CURRENT_LOCALE_DATA 替换规则
+ * @returns
+ */
+function transformLocalizeFuncCode(filepath: string) {
+	let code = fs.readFileSync(filepath, 'utf8');
+	const re = /(?:monaco-editor[\\\/]esm[\\\/])(.+)(?=\.js)/;
+	if (re.exec(filepath)) {
+		let path = RegExp.$1;
+		path = path.replaceAll('\\', '/');
+		code = code.replace(/localize\(/g, `localize('${path}', `);
+	}
+	return code;
+}
+
+function getLocalizeCode() {
+	return `
+// replace monaco-editor/esm/vs/nls.js _format
+function _format(message, args) {
+    let result;
+    if (args.length === 0) {
+        result = message;
+    } else {
+        result = String(message).replace(/\{(\d+)\}/g, function (match, rest) {
+            const index = rest[0];
+            return typeof args[index] !== "undefined" ? args[index] : match;
+        });
+    }
+    return result;
+}
+
+// replace monaco-editor/esm/vs/nls.js localize
+function localize(path, data, defaultMessage) {
+    const key = typeof data === "object" ? data.key : data;
+    const lang = document?.documentElement.getAttribute("lang") || "en";
+    const _data = window.__locale__?.[lang] || {};
+    let message = (_data[path] || {})[key];
+    if (!message) {
+        message = defaultMessage;
+    }
+    const args = [];
+    for (let _i = 3; _i < arguments.length; _i++) {
+        args[_i - 3] = arguments[_i];
+    }
+    return _format(message, args);
+}
+module.exports["localize"] = localize;
+
+function loadMessageBundle(_file) {
+    return localize;
+}
+module.exports["loadMessageBundle"] = loadMessageBundle;
+
+function config(_opt) {
+    return loadMessageBundle;
+}
+module.exports["config"] = config;
+
+function getConfiguredDefaultLocale() {
+    return undefined;
+}
+module.exports["getConfiguredDefaultLocale"] = getConfiguredDefaultLocale;`;
+}