feat: add mdebug

CHANGELOG.md

@@ -0,0 +1,23 @@
+# 2021.8.24
+
++ mdebug发布 v1.0.0
+
+# 2021.8.25
+
++ mdebug发布 v1.0.1
++ 增加英文readme
+
+# 2021.8.28
+
++ mdebug发布 v1.0.2
++ 增加部分单元测试，删除部分无用代码
+
+# 2021.8.31
+
++ mdebug发布 v1.0.3
++ 更新readme
+
+# 2021.9.02
+
++ mdebug发布 v1.0.4
++ 增加Js&&Css最新特性检测

CONTRIBUTING.md

@@ -0,0 +1,64 @@
+# 为mdebug做出贡献
+
+欢迎您 [提出问题](https://github.com/tnfe/mdebug/issues) 或 [merge requests](https://github.com/tnfe/mdebug/merge_requests)， 建议您在为 mdebug 做出贡献前先阅读以下 mdebug 贡献指南。
+
+## issues
+
+我们通过 [issues](https://github.com/tnfe/mdebug/issues) 来收集问题和功能相关的需求。
+
+### 首先查看已知的问题
+
+在您准备提出问题以前，请先查看现有的 [issues](https://github.com/tnfe/mdebug/issues) 是否已有其他人提出过相似的功能或问题，以确保您提出的问题是有效的。
+
+### 提交问题
+
+问题的表述应当尽可能的详细，可以包含相关的代码块。
+
+## Merge Requests
+
+我们十分期待您通过 [Merge Requests](https://github.com/tnfe/mdebug/merge_requests) 让 mdebug 变的更加完善。
+
+### 分支管理
+
+mdebug 主仓库只包含 master 分支，其将作为稳定的开发分支，经过测试后会打 Tag 进行发布。
+
+### Commit Message
+
+我们希望您能使用`npm run commit`来提交代码，保持项目的一致性。
+这样可以方便生成每个版本的 Changelog，很容易地追溯历史。
+
+### MR/PR 流程
+
+TNFE 团队会查看所有的 MR/PR，我们会运行一些代码检查和测试，一经测试通过，我们会接受这次 MR/PR，但不会立即发布外网，会有一些延迟。
+
+当您准备 MR 时，请确保已经完成以下几个步骤:
+
+1. 将主仓库代码 Fork 到自己名下。
+2. 基于 `master` 分支创建您的开发分支。
+3. 如果您更改了 API(s) 请更新代码及文档。
+4. 检查您的代码语法及格式。
+5. 提一个 MR/PR 到主仓库的 `master` 分支上。
+
+### 本地开发
+
+首先安装相关依赖
+
+```bash
+npm i
+```
+
+运行代码
+
+```bash
+npm run start
+```
+
+使用 [npm link](https://docs.npmjs.com/cli/link.html) 进行测试
+
+```bash
+npm link
+```
+
+## 许可证
+
+通过为 mdebug 做出贡献，代表您同意将其版权归为 mdebug 所有，开源协议为 [MIT LICENSE](https://opensource.org/licenses/MIT)

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 html5@mobile
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.en.md

@@ -0,0 +1,162 @@
+English | [简体中文](./README.md)
+<h1 align="center">
+<img src="https://user-images.githubusercontent.com/6822604/130725631-dde49c00-24fe-44c6-a3fd-a5c709ce6e57.png" width="40%"/>
+</h1>
+
+<p align="center" style="margin: 30px 0 0px;">A Lightweight, Easy To Extend Web Debugging Tool Build With React</p>
+<table>
+  <tr>
+    <th><h4 align="center"><h4 align="center">Easy to use</h4 align="center"></th>
+    <th><h4 align="center"></h4 align="center"><h4 align="center">Full-featured</h4 align="center"></th>
+    <th><h4 align="center"></h4 align="center"><h4 align="center">Easy to expand</h4 align="center"></th>
+    <th><h4 align="center"></h4 align="center"><h4 align="center">high performance</h4 align="center"></th>
+  </tr>
+  <tr>
+    <td width="20%" align="center"><sub>Use the cdn method, one-click access</sub></td>
+    <td width="20%" align="center"><sub>Similar to Chrome devtools, supports log, network, storage, performance, etc., has better network capture capabilities and rich log display</sub></td>
+    <td width="20%" align="center"><sub>Expose rich internal events, which can be seamlessly integrated with react components</td>
+    <td width="20%" align="center"><sub>Support large amount of data display, no lag</td>
+  </tr>
+</table>
+
+<div align="center">
+<a href="https://npmjs.org/package/mdebug" target="_blank"><img src="https://img.shields.io/npm/v/mdebug.svg" alt="NPM Version" /></a>
+<a href="https://github.com/tnfe/mdebug/pulls" target="_blank"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs"/></a>
+<a href="https://nodejs.org" target="_blank"><img src="https://img.shields.io/badge/node-%3E%3D%208.0.0-brightgreen.svg" alt="Node Version" /></a>
+</div>
+
+## Demos
+
+https://tnfe.github.io/mdebug
+
+![image](https://user-images.githubusercontent.com/6822604/131059931-7efb7494-82fe-4a27-bd79-ed2bd9ce2c11.png)
+
+<img src="https://user-images.githubusercontent.com/6822604/131216593-59803c8f-1819-4907-b02a-e4bad0c1666b.png" width="40%"/>
+
+## Examples
+
++ Vanilla
+
+[![Edit crimson-sun-py8x7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/crimson-sun-py8x7?fontsize=14&hidenavigation=1&theme=dark)
+
+
+## Installation
+
+#### Install using npm 
+``` 
+npm install mdebug --save
+
+```
+## Useage
+
+### 1. ES6
+```javascript
+  import mdebug from 'mdebug';
+  mdebug.init();
+```
+
+### 2.CDN
+```javascript
+(function() {
+    var scp = document.createElement('script');
+    // Load the latest mdebug version
+    scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js';
+    scp.async = true;
+    scp.charset = 'utf-8';
+    // Successfully loaded and initialized
+    scp.onload = function() {
+        mdebug.init();
+    };
+    // Load state switch callback
+    scp.onreadystate = function() {};
+    // Load failed callback 
+    scp.onerror = function() {};
+    document.getElementsByTagName('head')[0].appendChild(scp);
+})();
+```
+## API
+
+### 1. init
+```javascript
+mdebug.init({
+    containerId: '' // mdebug mounts the container id, if it is empty, a unique id will be automatically generated internally,
+    plugins: [], // Incoming mdebug plugin
+    hideToolbar: [], // Pass in the tab id that needs to be hidden
+});
+```
+### 2. addPlugin
+```javascript
+mdebug.addPlugin({
+    id: '', // tab id
+    name: '', // Chinese title corresponding to tab,
+    enName: '', // English title corresponding to tab
+    component: () => {}, // React component corresponding to tab
+});
+```
+
+### 3. removePlugin
+```javascript
+// Support the id of the panel to be removed
+/*
+System => system;
+Elements => elements;
+Console => console
+Application => application
+NetWork => network
+Performance => performance
+Settings => settings
+*/
+mdebug.removePlugin([]);
+```
+
+### 4. exportLog
+```javascript
+/*
+@returned {
+  type: '' // Log type
+  source: [], // Original log
+}
+@params type
+// type is equal to log, return all console logs
+// type is equal to net, return all net logs
+*/
+mdebug.exportLog(type);
+
+```
+
+### 5. on
+```javascript
+mdebug.on(eventName, callback);
+```
+### 6. emit
+```javascript
+mdebug.emit(eventName, data);
+```
+
+## Event list
+| **Event name**     | **params**     | **Trigger timing**     |
+| ---------- | :-----------:  | :-----------: |
+| ready | object | mdebug loaded
+| addTab | object | Add panel
+| removeTab | array | Remove panel |
+| changeTab | object | Panel switch|
+
+
+## development
+
+1. npm i
+2. npm start
+3. npm run build 
+## Projects
+1. [eruda](https://github.com/liriliri/eruda)
+2. [vConsole](https://github.com/Tencent/vConsole)
+3. [react-json-tree](https://github.com/alexkuz/react-json-tree)
+4. [React-based mobile debugging solution](https://github.com/abell123456/mdebug)
+5. [a useful debugger for mobile](https://github.com/ghking1/mdebug)
+6. [autoDevTools](https://github.com/chokcoco/autoDevTools)
+7. [react-inspector](https://github.com/xyc/react-inspector)
+8. [web-console](https://github.com/whinc/web-console)
+9. [ChromeDevTools](https://github.com/ChromeDevTools/devtools-frontend)
+
+## License
+The MIT License (MIT). Please see [License File](./LICENSE) for more information.

README.md

@@ -0,0 +1,10 @@
+# React DevTools Tutorial
+
+See the tutorial at [react-devtools-tutorial.now.sh](https://react-devtools-tutorial.now.sh/).
+
+### Development
+
+```shell
+yarn install
+yarn start
+```

config/env.js

@@ -0,0 +1,93 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};