Match-id-b327b25eaf26637343f8b71448ac68905ebe3ded

libs/extension/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = api => {
+  const isTest = api.env('test');
+  console.log('isTest', isTest);
+  return {
+    presets: [
+      '@babel/preset-env',
+      '@babel/preset-typescript',
+      ['@babel/preset-react', {
+        runtime: 'classic',
+        'pragma': 'Horizon.createElement',
+        'pragmaFrag': 'Horizon.Fragment',
+      }]],
+    plugins: ['@babel/plugin-proposal-class-properties'],
+  };
+};

libs/extension/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "extension",
+  "version": "1.0.0",
+  "description": "",
+  "main": "",
+  "scripts": {
+    "build": "webpack --config ./webpack.config.js",
+    "watch": "webpack --config ./webpack.config.js --watch",
+    "build-dev": "webpack --config ./webpack.dev.js",
+    "start": "webpack serve --config ./webpack.dev.js ",
+    "test": "jest"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/preset-env": "7.12.1",
+    "@babel/preset-react": "7.12.1",
+    "@babel/preset-typescript": "^7.16.7",
+    "@types/jest": "^27.4.1",
+    "babel-loader": "8.1.0",
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "jest": "^27.5.1",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
+    "style-loader": "^3.3.1",
+    "ts-jest": "^27.1.4",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
+  }
+}

libs/extension/readme.md

@@ -2,7 +2,6 @@
 devtools_page: devtool主页面
 default_popup: 拓展图标点击时弹窗页面
 content_scripts: 内容脚本，在项目中负责在页面初始化时调用注入全局变量代码和消息传递
-web_accessible_resources: 注入全局变量代码
 
 ## 打开 panel 页面调试面板的方式
 
@@ -53,5 +52,12 @@ sequenceDiagram
 - 每个vNode有唯一的 path 属性，可以作为标识使用
 - 通过解析 path 值可以分析出组件树的结构
 
+## 组件props/state/hook等数据的传输和解析
+将数据格式进行转换后进行传递。对于 props 和 类组件的 state，他们都是对象，可以将对象进行解析然后以 k-v 的形式，树的结构显示。函数组件的 Hooks 是以数组的形式存储在 vNode 的属性中的，每个 hook 的唯一标识符是 hIndex 属性值，在对象展示的时候不能展示该属性值，需要根据 hook 类型展示一个 state/ref/effect 等值。hook 中存储的值也可能不是对象，只是一个简单的字符串，他们的解析和 props/state 的解析同样存在差异。
+
+
 ## 滚动动态渲染 Tree
 考虑到组件树可能很大，所以并不适合一次性全部渲染出来，可以通过滚动渲染的方式减少页面 dom 的数量。我们可以把树看成有不同缩进长度的列表，动态渲染滚动列表的实现可以参考谷歌的这篇文章：https://developers.google.com/web/updates/2016/07/infinite-scroller 这样，我们需要的组件树数据可以由树结构转变为数组，可以减少动态渲染时对树结构进行解析时的计算工作。
+
+## 测试框架
+jest测试框架不提供浏览器插件的相关 api，我们在封装好相关 api 后需要模拟这些 api 的行为从而展开测试工作。

libs/extension/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": false,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "preserve",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "Node",
+    "baseUrl": "./",
+    "paths": {
+      "*": ["types/*"]
+    }
+  },
+  "includes": [
+    "./src/index.d.ts", "./src/*/*.ts", "./src/*/*.tsx"
+  ]
+}

libs/extension/webpack.config.js

@@ -0,0 +1,51 @@
+const path = require('path');
+
+const config = {
+  entry: {
+    background: './src/background/index.ts',
+    main: './src/main/index.ts',
+    injector: './src/injector/index.ts',
+    contentScript: './src/contentScript/index.ts',
+    panel: './src/panel/index.tsx',
+    popup: './src/popup/index.ts',
+  },
+  output: {
+    path: path.resolve(__dirname, './build'),
+    filename: '[name].js',
+  },
+  mode: 'development',
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+          }
+        ]
+      },
+      {
+        test: /\.less/i,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+
+            }
+          },
+          'less-loader'],
+      }]
+  },
+  resolve: {
+    extensions: ['.js', '.ts', '.tsx'],
+  },
+  externals: {
+    'horizon': 'Horizon',
+  },
+};
+
+module.exports = config;

libs/extension/webpack.dev.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
 
 // 用于 panel 页面开发
@@ -8,6 +7,7 @@ module.exports = {
   mode: 'development',
   entry: {
     panel: path.join(__dirname, './src/panel/index.tsx'),
+    mockPage: path.join(__dirname, './src/devtools/mockPage/index.tsx'),
   },
   output: {
     path: path.join(__dirname, 'dist'),
@@ -15,7 +15,7 @@ module.exports = {
   },
   devtool: 'source-map',
   resolve: {
-    extensions: ['.ts', '.tsx', '.js']
+    extensions: ['.ts', '.tsx', '.js'],
   },
   module: {
     rules: [
@@ -25,16 +25,6 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-env',
-                '@babel/preset-typescript',
-                ['@babel/preset-react', {
-                  runtime: 'classic',
-                  'pragma': 'Horizon.createElement',
-                  'pragmaFrag': 'Horizon.Fragment',
-                }]],
-              plugins: ['@babel/plugin-proposal-class-properties'],
-            }
           }
         ]
       },
@@ -64,10 +54,6 @@ module.exports = {
     magicHtml: true,
   },
   plugins: [
-    new HtmlWebpackPlugin({
-      filename: 'panel.html',
-      template: './src/panel/panel.html'
-    }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"development"',
       isDev: 'true',