refactor: 优化内部组件的 displayName

e2e/mini/src/app.css

@@ -1,3 +0,0 @@
-page {
- background: #282c34;
-}

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-runtime/src/PageInstanceContext.ts

@@ -2,4 +2,6 @@ import * as React from 'react';
 
 const PageInstanceContext = React.createContext<any>(null);
 
+PageInstanceContext.displayName = 'PageContext';
+
 export default PageInstanceContext;