Support for react-devtools

docs/guide/basic/devtools.md

@@ -0,0 +1,32 @@
+---
+title: 调试工具
+order: 31
+---
+
+> 2.5.0 开始支持
+
+Remax 支持使用 [React DevTools](https://reactjs.org/blog/2019/08/15/new-react-devtools.html) 进行调试。
+
+安装 React DevTools：
+
+```bash
+$ npm install react-devtools -g
+```
+
+启动：
+
+```bash
+$ react-devtools
+```
+
+在小程序开发者工具中运行 Remax 项目后即可在 React DevTools 中进行调试。
+
+![screenshot](https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*5xt9TZIY3O4AAAAAAAAAAABkARQnAQ)
+
+> 注意
+>
+> 微信和字节跳动小程序需要在 IDE 中打开「不校验合法域名」。
+
+![](https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*gkMAS4TfAO0AAAAAAAAAAABkARQnAQ)
+
+![](https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*0g_ZSJCCZVMAAAAAAAAAAABkARQnAQ)

packages/remax-cli/package.json

@@ -33,6 +33,7 @@
  "@babel/register": "^7.7.0",
  "@babel/types": "^7.7.4",
  "@remax/macro": "2.4.1",
+ "@remax/plugin-devtools": "^2.1.1",
  "@remax/postcss-px2units": "^0.2.0",
  "@remax/postcss-tag": "2.4.1",
  "@remax/shared": "2.4.1",

packages/remax-cli/src/API.ts

@@ -158,8 +158,8 @@ export default class API {
  }
  }
 
- public registerPlugins(plugins: Plugin[]) {
- plugins?.forEach(plugin => {
+ public registerPlugins(plugins: Plugin[] = []) {
+ plugins.forEach(plugin => {
  if (plugin) {
  this.registerHostComponents(plugin.hostComponents);
  this.plugins.push(plugin);

packages/remax-cli/src/build/babel/app.ts

@@ -1,13 +1,21 @@
 import * as t from '@babel/types';
 import { slash } from '@remax/shared';
-import { NodePath } from '@babel/traverse';
+import { NodePath, Node } from '@babel/traverse';
 import { addNamed } from '@babel/helper-module-imports';
 
 function appConfigExpression(path: NodePath<t.ExportDefaultDeclaration>, id: t.Identifier) {
  const createId = addNamed(path, 'createAppConfig', '@remax/runtime');
- path.insertAfter(
- t.exportDefaultDeclaration(t.callExpression(t.identifier('App'), [t.callExpression(createId, [id])]))
- );
+ const insert: Node[] = [
+ t.exportDefaultDeclaration(t.callExpression(t.identifier('App'), [t.callExpression(createId, [id])])),
+ ];
+ if (process.env.NODE_ENV === 'development') {
+ insert.unshift(
+ t.expressionStatement(
+ t.assignmentExpression('=', t.memberExpression(id, t.identifier('displayName')), t.stringLiteral('App'))
+ )
+ );
+ }
+ path.insertAfter(insert);
 }
 
 export default (entry: string) => {

packages/remax-cli/src/build/babel/page.ts

@@ -1,16 +1,30 @@
 import * as t from '@babel/types';
-import { NodePath } from '@babel/traverse';
+import { NodePath, Node } from '@babel/traverse';
 import { addNamed } from '@babel/helper-module-imports';
 import { Options } from '@remax/types';
 import { slash } from '@remax/shared';
 import { getPages } from '../../getEntries';
 import API from '../../API';
 
-function pageConfigExpression(path: NodePath<t.ExportDefaultDeclaration>, id: t.Identifier, name: t.StringLiteral) {
+function pageConfigExpression(path: NodePath<t.ExportDefaultDeclaration>, id: t.Identifier, name: string) {
  const createId = addNamed(path, 'createPageConfig', '@remax/runtime');
- path.insertAfter(
- t.exportDefaultDeclaration(t.callExpression(t.identifier('Page'), [t.callExpression(createId, [id, name])]))
- );
+ const insert: Node[] = [
+ t.exportDefaultDeclaration(
+ t.callExpression(t.identifier('Page'), [t.callExpression(createId, [id, t.stringLiteral(name)])])
+ ),
+ ];
+ if (process.env.NODE_ENV === 'development') {
+ insert.unshift(
+ t.expressionStatement(
+ t.assignmentExpression(
+ '=',
+ t.memberExpression(id, t.identifier('displayName')),
+ t.stringLiteral(`Page[${name}]`)
+ )
+ )
+ );
+ }
+ path.insertAfter(insert);
 }
 
 export default function page(options: Options, api: API) {
@@ -32,14 +46,14 @@ export default function page(options: Options, api: API) {
  const pageId = path.scope.generateUidIdentifier('page');
  const declaration = path.node.declaration;
  path.replaceWith(t.variableDeclaration('const', [t.variableDeclarator(pageId, declaration)]));
- pageConfigExpression(path, pageId, t.stringLiteral(name));
+ pageConfigExpression(path, pageId, name);
  path.stop();
  } else if (t.isFunctionDeclaration(path.node.declaration) || t.isClassDeclaration(path.node.declaration)) {
  const declaration = path.node.declaration;
  const pageId = path.scope.generateUidIdentifierBasedOnNode(path.node);
  declaration.id = pageId;
  path.replaceWith(declaration);
- pageConfigExpression(path, pageId, t.stringLiteral(name));
+ pageConfigExpression(path, pageId, name);
  path.stop();
  }
  },

packages/remax-cli/src/build/index.ts

@@ -1,14 +1,22 @@
 import { Options } from '@remax/types';
+import devtools from '@remax/plugin-devtools';
 import output from './utils/output';
 import remaxVersion from '../remaxVersion';
 import { Platform } from '@remax/types';
 import getConfig from '../getConfig';
 import * as webpack from 'webpack';
 import API from '../API';
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
 export function run(options: Options): webpack.Compiler {
  const api = new API();
- api.registerPlugins(options.plugins);
+
+ const plugins = [...options.plugins];
+ if (process.env.NODE_ENV === 'development') {
+ plugins.push(devtools());
+ }
+ api.registerPlugins(plugins);
 
  if (options.turboPages && options.turboPages.length > 0 && options.target !== Platform.ali) {
  throw new Error('turboPages 目前仅支持 ali 平台开启');

packages/remax-cli/src/build/utils/env.ts

@@ -7,8 +7,6 @@ type Env = Record<string, string | undefined>;
 export default function getEnvironment(options: Options, target: string) {
  const envFilePath = path.join(options.cwd, '.env');
 
- process.env.NODE_ENV = process.env.NODE_ENV || 'development';
-
  const NODE_ENV = process.env.NODE_ENV;
 
  // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use

packages/remax-one/src/createHostComponent.ts

@@ -9,6 +9,7 @@ import {
  InputEvent,
  FormEvent,
 } from './types';
+import { formatDisplayName } from '@remax/shared';
 
 export function createTarget(target: any, detail: any): EventTarget {
  return {
@@ -170,5 +171,9 @@ export default function createHostComponent<P = any>(
  return React.createElement(name, { ...inputProps, ref });
  };
 
+ if (process.env.NODE_ENV === 'development') {
+ Component.displayName = formatDisplayName(name);
+ }
+
  return React.forwardRef<any, React.PropsWithChildren<P>>(Component);
 }

packages/remax-plugin-devtools/.npmignore

@@ -0,0 +1,6 @@
+node_modules/
+src/
+__tests__
+yarn-error.log
+.DS_Store
+tsconfig.json

packages/remax-plugin-devtools/README.md

@@ -0,0 +1,11 @@
+# `remax-plugin-devtools`
+
+> TODO: description
+
+## Usage
+
+```
+const remaxPluginDevtools = require('remax-plugin-devtools');
+
+// TODO: DEMONSTRATE API
+```

packages/remax-plugin-devtools/index.d.ts

@@ -0,0 +1,3 @@
+declare function devtools(): any;
+
+export default devtools;

packages/remax-plugin-devtools/index.js

@@ -0,0 +1,37 @@
+const { default: InjectPlugin, ENTRY_ORDER } = require('webpack-inject-plugin');
+
+module.exports = () => ({
+ name: 'remax-plugin-devtools',
+ configWebpack({ config, webpack }) {
+ let globalName;
+ switch (process.env.REMAX_PLATFORM) {
+ case 'ali':
+ globalName = 'my';
+ break;
+ case 'toutiao':
+ globalName = 'tt';
+ break;
+ case 'wechat':
+ globalName = 'wx';
+ break;
+ default:
+ break;
+ }
+ config.plugin('plugin-devtools-define-plugin').use(webpack.DefinePlugin, [
+ {
+ __REACT_DEVTOOLS_GLOBAL_HOOK__: `${globalName}.__REACT_DEVTOOLS_GLOBAL_HOOK__`,
+ },
+ ]);
+
+ config.plugin('plugin-devtools-webpack-inject-plugin').use(InjectPlugin, [
+ () => `import '${require.resolve('@remax/react-devtools-core')}';`,
+ {
+ entryName: 'app',
+ entryOrder: ENTRY_ORDER.First,
+ },
+ ]);
+ },
+ registerRuntimePlugin() {
+ return require.resolve('./lib/runtime')
+ }
+});

packages/remax-plugin-devtools/package.json

@@ -0,0 +1,35 @@
+{
+ "name": "@remax/plugin-devtools",
+ "version": "2.1.1",
+ "description": "Inject React Devtools to Remax",
+ "keywords": [
+ "react"
+ ],
+ "author": "Meck Zhu <[email protected]>",
+ "homepage": "https://reamxjs.org",
+ "license": "MIT",
+ "main": "index.js",
+ "files": [
+ "lib"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/remaxjs/remax.git"
+ },
+ "scripts": {
+ "clean": "rimraf lib tsconfig.tsbuildinfo",
+ "test": "echo done",
+ "prebuild": "npm run clean",
+ "build": "tsc"
+ },
+ "bugs": {
+ "url": "https://github.com/remaxjs/remax/issues"
+ },
+ "dependencies": {
+ "@remax/react-devtools-core": "^4.7.0",
+ "webpack-inject-plugin": "^1.5.4"
+ }
+}

packages/remax-plugin-devtools/src/WebSocket.toutiao.ts

@@ -0,0 +1,61 @@
+import global from './global';
+
+enum ReadyState {
+ CONNECTING,
+ OPEN,
+ CLOSING,
+ CLOSED,
+}
+
+export default class WebSocket {
+ readyState: ReadyState;
+ CONNECTING = ReadyState.CONNECTING;
+ OPEN = ReadyState.OPEN;
+ CLOSING = ReadyState.CLOSING;
+ CLOSED = ReadyState.CLOSED;
+ onopen?: any;
+ onerror?: any;
+ onclose?: any;
+ onmessage?: any;
+ ws: any;
+
+ constructor(url: string) {
+ this.readyState = ReadyState.CONNECTING;
+
+ this.ws = global.connectSocket({
+ url,
+ });
+
+ this.ws.onOpen(() => {
+ this.readyState = ReadyState.OPEN;
+ if (typeof this.onopen === 'function') {
+ this.onopen();
+ }
+ });
+
+ this.ws.onError((res: any) => {
+ if (typeof this.onerror === 'function') {
+ this.onerror(res);
+ }
+ });
+
+ this.ws.onClose(() => {
+ this.readyState = ReadyState.CLOSED;
+ if (typeof this.onclose === 'function') {
+ this.onclose();
+ }
+ });
+
+ this.ws.onMessage((res: any) => {
+ if (typeof this.onmessage === 'function') {
+ this.onmessage(res);
+ }
+ });
+ }
+
+ send(payload: any) {
+ this.ws.send({
+ data: payload,
+ });
+ }
+}