feat: antd plugin support moment transformer

examples/mfsu-e2e/package.json

@@ -23,7 +23,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "cross-env": "^7.0.3",
-    "cypress": "^12.0.0",
+    "cypress": "^12.6.0",
     "rimraf": "3.0.2",
     "start-server-and-test": "^1.15.2",
     "typescript": "^4.9.4",

examples/plugin-antd-e2e/.gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/dist
+
+/cypress/screenshots
+/cypress/videos

examples/plugin-antd-e2e/.umirc.ts

@@ -0,0 +1,10 @@
+import { join } from 'path';
+
+export default {
+  npmClient: 'pnpm',
+  plugins: [join(__dirname, '../../packages/plugins/src/antd')],
+  antd: {
+    momentPicker: true,
+  },
+  mfsu: false,
+};

examples/plugin-antd-e2e/cypress.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'cypress';
+
+const PORT = process.env.PORT || '8000';
+
+const isWin = process.platform === 'win32';
+
+export default defineConfig({
+  projectId: 'qikpat',
+  e2e: {
+    // @ts-ignore
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: `http://localhost:${PORT}`,
+  },
+  retries: {
+    runMode: 3,
+  },
+  defaultCommandTimeout: isWin ? 60000 : 4000,
+});

examples/plugin-antd-e2e/cypress/e2e/smoke.cy.ts

@@ -0,0 +1,23 @@
+/// <reference types="cypress" />
+
+describe('Basic Test', () => {
+  before(() =>
+    Cypress.automation('remote:debugger:protocol', {
+      command: 'Network.setCacheDisabled',
+      params: { cacheDisabled: true },
+    }),
+  );
+
+  it('display mfsu is working', () => {
+    cy.intercept('GET', '/mf-va_remoteEntry.js').as('EntryLoaded');
+
+    cy.visit('/');
+
+    cy.wait('@EntryLoaded');
+
+    cy.get<HTMLInputElement>('.ant-picker-input input').should(
+      'have.value',
+      '2022-01-01',
+    );
+  });
+});

examples/plugin-antd-e2e/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

examples/plugin-antd-e2e/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

examples/plugin-antd-e2e/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

examples/plugin-antd-e2e/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@example/plugin-antd-e2e",
+  "private": true,
+  "author": "pshu <pishu.spf@antfin.com>",
+  "scripts": {
+    "build": "umi build",
+    "cypress:ci": "pnpm umi-scripts cypress",
+    "dev": "umi dev",
+    "e2e": "cypress run",
+    "e2e:ci": "cross-env HMR=none PORT=8000 start-server-and-test dev http://localhost:8000/__umi/api/status cypress:ci",
+    "set:mfsu:eager:esbuild": "umi config set mfsu {\\\"strategy\\\":\\\"eager\\\",\\\"esbuild\\\":true}",
+    "set:mfsu:eager:webpack": "umi config set mfsu {\\\"strategy\\\":\\\"eager\\\"}",
+    "set:mfsu:normal:esbuild": "umi config set mfsu {\\\"strategy\\\":\\\"normal\\\",\\\"esbuild\\\":true}",
+    "set:mfsu:normal:webpack": "umi config set mfsu {\\\"strategy\\\":\\\"normal\\\"}",
+    "setup": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "antd": "5.x",
+    "lodash.uppercase": "^4.3.0",
+    "moment": "^2.29.4",
+    "umi": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "cross-env": "^7.0.3",
+    "cypress": "^12.6.0",
+    "rimraf": "3.0.2",
+    "start-server-and-test": "^1.15.2",
+    "typescript": "^4.9.4",
+    "wait-on": "^6.0.1"
+  }
+}

examples/plugin-antd-e2e/src/pages/index.tsx

@@ -0,0 +1,23 @@
+import { DatePicker, version } from 'antd';
+import moment from 'moment';
+
+const fileName = 'favicon';
+const imprtedByVariable = import(/* webpackIgnore: true  */ `/${fileName}.png`);
+imprtedByVariable.then(console.log, console.log);
+
+const now = moment('2022-01-01') as any;
+
+export default function HomePage() {
+  return (
+    <div>
+      <h1>{version}</h1>
+      <DatePicker
+        allowClear
+        defaultValue={now}
+        onChange={(val) => {
+          console.log(val);
+        }}
+      />
+    </div>
+  );
+}

examples/plugin-antd-e2e/src/utils/decorator.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export class Test extends React.Component {
+  constructor() {}
+
+  @withTimestamp
+  render() {
+    return <div>test</div>;
+  }
+}
+
+function withTimestamp(target, name, descriptor) {
+  const original = descriptor.value;
+  if (typeof original === 'function') {
+    descriptor.value = function (...args) {
+      try {
+        console.log(`start: ${Date.now()}`);
+        const result = original.apply(this, args);
+        console.log(`end: ${Date.now()}`);
+        return result;
+      } catch (e) {
+        console.log(`Error: ${e}`);
+        throw e;
+      }
+    };
+  }
+  return descriptor;
+}

examples/plugin-antd-e2e/src/utils/format.ts

@@ -0,0 +1,3 @@
+export function format(a: string): string {
+  return a;
+}

examples/plugin-antd-e2e/src/utils/format.ts.txt

@@ -0,0 +1,5 @@
+import uppercase from 'lodash.uppercase';
+
+export function format(a: string): string {
+  return uppercase(a);
+}

examples/plugin-antd-e2e/src/utils/request.ts/index.ts

@@ -0,0 +1,9 @@
+import { useState } from 'react';
+
+export function useCount(beg: number) {
+  const [count, setCount] = useState<number>(beg);
+  return {
+    count,
+    setCount,
+  };
+}

examples/plugin-antd-e2e/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}

examples/plugin-antd-e2e/typings.d.ts

@@ -0,0 +1 @@
+import 'umi/typings';

packages/plugins/package.json

@@ -26,6 +26,7 @@
     "@ahooksjs/use-request": "^2.0.0",
     "@ant-design/antd-theme-variable": "^1.0.0",
     "@ant-design/icons": "^4.7.0",
+    "@ant-design/moment-webpack-plugin": "^0.0.3",
     "@ant-design/pro-components": "^2.0.1",
     "@tanstack/react-query": "^4.24.10",
     "@tanstack/react-query-devtools": "^4.24.10",

packages/plugins/src/antd.ts

@@ -1,3 +1,5 @@
+// @ts-ignore
+import AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';
 import assert from 'assert';
 import { dirname, join } from 'path';
 import { IApi, RUNTIME_TYPE_FILE_NAME } from 'umi';
@@ -24,6 +26,7 @@ export default (api: IApi) => {
   // App components exist only from 5.1.0 onwards
   const appComponentAvailable = semver.gte(antdVersion, '5.1.0');
   const appConfigAvailable = semver.gte(antdVersion, '5.3.0');
+  const day2MomentAvailable = semver.gte(antdVersion, '5.0.0');
 
   api.describe({
     config: {
@@ -45,6 +48,8 @@ export default (api: IApi) => {
             appConfig: zod
               .record(zod.any())
               .describe('Only antd@5.1.0 is supported'),
+            // DatePicker & Calendar use moment version
+            momentPicker: zod.boolean().describe('Only antd@5.x is supported'),
           })
           .deepPartial();
       },
@@ -89,11 +94,6 @@ export default (api: IApi) => {
     // antd import
     memo.alias.antd = pkgPath;
 
-    // moment > dayjs
-    if (antd.dayjs) {
-      memo.alias.moment = dirname(require.resolve('dayjs/package.json'));
-    }
-
     // antd 5 里面没有变量了，less 跑不起来。注入一份变量至少能跑起来
     if (antdVersion.startsWith('5')) {
       const theme = require('@ant-design/antd-theme-variable');
@@ -160,6 +160,20 @@ export default (api: IApi) => {
     return memo;
   });
 
+  // Webpack
+  api.chainWebpack((memo) => {
+    if (api.config.antd.momentPicker) {
+      if (day2MomentAvailable) {
+        memo.plugin('antd-moment-webpack-plugin').use(AntdMomentWebpackPlugin);
+      } else {
+        api.logger.warn(
+          `MomentPicker is only available in version 5.0.0 and above, but you are using version ${antdVersion}`,
+        );
+      }
+    }
+    return memo;
+  });
+
   // babel-plugin-import
   api.addExtraBabelPlugins(() => {
     // only enable style for non-antd@5