feat: public mdebug 1.0.0

CHANGELOG.md

@@ -0,0 +1,3 @@
+# 2021.8.24
+
++ mdebug发布 v1.0.0

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.md

@@ -0,0 +1,155 @@
+<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;">Mdebug makes mobile web development easier</p>
+<table>
+  <tr>
+    <th><h4 align="center"><h4 align="center">简单易用</h4 align="center"></th>
+    <th><h4 align="center"></h4 align="center"><h4 align="center">功能全面</h4 align="center"></th>
+    <th><h4 align="center"></h4 align="center"><h4 align="center">易扩展</h4 align="center"></th>
+    <th><h4 align="center"></h4 align="center"><h4 align="center">高性能</h4 align="center"></th>
+  </tr>
+  <tr>
+    <td width="20%" align="center"><sub>使用cdn方式,一键接入</sub></td>
+    <td width="20%" align="center"><sub>类Chrome devtools, 支持日志,网络,存储,性能等, 具有更好的网络捕获能力和丰富的日志展现形式</sub></td>
+    <td width="20%" align="center"><sub>暴露内部丰富的事件, 可以和react组件无缝进行集成</td>
+    <td width="20%" align="center"><sub>支持大数据量展示, 不卡顿</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://npmjs.org/package/mdebug" target="_blank"><img src="https://img.shields.io/npm/l/mdebug.svg" alt="Package License" /></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>
+## 一、快速体验
+
+https://tnfe.github.io/mdebug
+
+## 二、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');
+    // 加载最新的mdebug版本
+    scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js';
+    scp.async = true;
+    scp.charset = 'utf-8';
+    // 加载成功并初始化
+    scp.onload = function() {
+        mdebug.init();
+    };
+    // 加载状态切换回调
+    scp.onreadystate = function() {};
+    // 加载失败回调 
+    scp.onerror = function() {};
+    document.getElementsByTagName('head')[0].appendChild(scp);
+})();
+```
+## 四、API
+
+### 1. init
+```javascript
+mdebug.init({
+    containerId: '' // mdebug挂载容器id, 如果传空, 内部会自动生成一个不重复的id,
+    plugins: [], // 传入mdebug插件
+    hideToolbar: [], // 传入需要隐藏的tab id
+});
+```
+### 2. addPlugin
+```javascript
+mdebug.addPlugin({
+    id: '', // tab id
+    name: '', // tab对应的中文title,
+    enName: '', // tab对应的英文title
+    component: () => {}, // tab对应的react组件
+});
+```
+
+### 3. removePlugin
+```javascript
+// 支持移除的panel对应的id
+/*
+System => system;
+Elements => elements;
+Console => console
+Application => application
+NetWork => network
+Performance => performance
+Settings => settings
+*/
+mdebug.removePlugin([]);
+```
+
+### 4. exportLog
+```javascript
+/*
+@returned {
+  type: '' // 日志类型
+  source: [], // 原始日志
+}
+@params type
+// type等于log, 返回所有的console日志
+// type等于net, 返回所有的net日志
+*/
+mdebug.exportLog(type);
+
+```
+
+### 5. on
+```javascript
+mdebug.on(eventName, callback);
+```
+### 6. emit
+```javascript
+mdebug.emit(eventName, data);
+```
+
+## 五、事件列表
+| **事件名称**     | **数据**     | **触发时机**     |
+| ---------- | :-----------:  | :-----------: |
+| ready | object | mdebug加载完毕
+| addTab | object | 增加面板
+| removeTab | array | 移除面板 |
+| changeTab | object | 面板切换|
+
+
+## 六、开发
+
+1. npm i
+2. npm start   // 启动开发
+3. npm run build  //打包
+
+## 七、Articles
+1. [移动端前端开发调试](https://www.cnblogs.com/yzg1/p/5160594.html?utm_source=tuicool&utm_medium=referral)
+2. [Chrome 开发者工具](https://developers.google.com/web/tools/chrome-devtools/)
+
+## 八、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的移动端调试解决方案](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.

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/babelTransform.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const babelJest = require('babel-jest');
+
+module.exports = babelJest.createTransformer({
+  presets: [require.resolve('babel-preset-react-app')],
+
+});

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';
+  },
+};

config/jest/fileTransform.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      return `module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: () => ${assetFilename},
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

config/jest/graphqlTransform.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const loader = require('graphql-tag/loader');
+
+module.exports = {
+  process(src) {
+    return loader.call({ cacheable() {} }, src);
+  },
+};