升级到 umi3 (#2)

* feat: support umi3 * fix: basic demo - adaptation umi3 config * fix: basic antd - adaptation umi3 config * fix: return config in chainWebpack * fix: demo themes-files - adaptation umi3 config
wxul · Apr 8, 2021 · 0a527e9 · 0a527e9
1 parent 27f0b58
commit 0a527e9
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 66 deletions.
diff --git a/examples/antd/.umirc.ts b/examples/antd/.umirc.ts
@@ -15,9 +15,8 @@ export default {
     '@box-shadow-base': 'var(--box-shadow)',
     '@icon-color': 'var(--font-main-color)',
   },
-  plugins: [
-    [
-      'umi-plugin-theme-switch',
+  plugins: ['umi-plugin-theme-switch'],
+  'theme-switch':
       {
         themes: [
           {
@@ -40,12 +39,4 @@ export default {
           },
         ],
       },
-    ],
-    [
-      'umi-plugin-react',
-      {
-        antd: true,
-      },
-    ],
-  ],
 } as IConfig;
diff --git a/examples/antd/package.json b/examples/antd/package.json
@@ -4,8 +4,8 @@
     "antd": "^3.26.6",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "umi": "^2.9.0",
-    "umi-plugin-react": "^1.14.12",
+    "umi": "^3.4.8",
+    "@umijs/preset-react": "latest",
     "umi-plugin-theme-switch": "latest"
   },
   "devDependencies": {

diff --git a/examples/basic/.umirc.ts b/examples/basic/.umirc.ts
@@ -1,28 +1,25 @@
-import { IConfig } from 'umi-types';
+import { join } from 'path';
+import { IConfig } from 'umi';
 
 export default {
-  routes: [{ path: '/', component: './index' }],
-  plugins: [
-    [
-      'umi-plugin-theme-switch',
+  // plugins: [join(__dirname, '../../', 'lib/index.js')],
+  plugins: ['umi-plugin-theme-switch'],
+  'theme-switch': {
+    themes: [
       {
-        themes: [
-          {
-            name: 'light',
-            variables: {
-              '--bg-global-color': '#ccc',
-              '--font-main-color': '#333',
-            },
-          },
-          {
-            name: 'dark',
-            variables: {
-              '--bg-global-color': '#333',
-              '--font-main-color': '#ccc',
-            },
-          },
-        ],
+        name: 'light',
+        variables: {
+          '--bg-global-color': '#ccc',
+          '--font-main-color': '#333',
+        },
+      },
+      {
+        name: 'dark',
+        variables: {
+          '--bg-global-color': '#333',
+          '--font-main-color': '#ccc',
+        },
       },
     ],
-  ],
+  }
 } as IConfig;
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -3,7 +3,7 @@
   "dependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "umi": "^2.9.0",
+    "umi": "^3.4.8",
     "umi-plugin-theme-switch": "latest"
   },
   "devDependencies": {

diff --git a/examples/theme-files/.umirc.ts b/examples/theme-files/.umirc.ts
@@ -2,15 +2,11 @@ import { IConfig } from 'umi-types';
 
 export default {
   routes: [{ path: '/', component: './index' }],
-  plugins: [
-    [
-      'umi-plugin-theme-switch',
-      {
-        themes: 'themes', // relative path
-        // same as absolute path:
-        // themes: path.join(__dirname, 'themes'),
-        defaultTheme: 'light',
-      },
-    ],
-  ],
+  plugins: ['umi-plugin-theme-switch'],
+  'theme-switch':{
+    themes: 'themes', // relative path
+    // same as absolute path:
+    // themes: path.join(__dirname, 'themes'),
+    defaultTheme: 'light',
+  }
 } as IConfig;
diff --git a/examples/theme-files/package.json b/examples/theme-files/package.json
@@ -3,8 +3,7 @@
   "dependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "umi": "^2.9.0",
-    "umi-plugin-theme-switch": "latest"
+    "umi": "^3.4.8"
   },
   "devDependencies": {
     "@types/react": "^16.0.0",

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "globby": "^10.0.1",
     "np": "^5.0.3",
     "prettier": "^1.19.1",
-    "umi": "^2.9.0",
+    "umi": "^3.4.8",
     "umi-types": ">= 0.4.0-beta.4"
   },
   "files": [

diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
 // ref:
 // - https://umijs.org/plugin/develop.html
-import { IApi } from 'umi-types';
+import { IApi } from 'umi';
 import { isAbsolute, join } from 'path';
 import assert from 'assert';
 import globby from 'globby';
@@ -101,13 +101,28 @@ const defaultConfig: Partial<UmiPluginThemeSwitchOptions> = {
   attribute: 'umi-theme',
 };
 
-export default function(api: IApi, options: UmiPluginThemeSwitchOptions) {
-  let opts = Object.assign({}, defaultConfig, options);
+export default function(api: IApi) {
+  api.describe({
+    key: 'theme-switch',
+    config: {
+      default: defaultConfig,
+      schema(joi) {
+        return joi.object({
+          themes: joi.array(),
+          scope: joi.string(),
+          autoDetectDarkMode: joi.boolean(),
+          remember:joi.boolean(),
+          attribute: joi.string(),
+        });
+      },
+    },
+  })
+  let opts = Object.assign({}, defaultConfig, api.userConfig['theme-switch']);
 
   const { cwd } = api;
   const { themes, defaultTheme, attribute, scope, remember, autoDetectDarkMode } = opts;
 
-  assert(themes, '[umi-plugin-theme-switch]: option "themes" is reuired');
+  assert(themes, '[umi-plugin-theme-switch]: option "themes" is required');
 
   let _themes = typeof themes === 'string' ? parseFilepathThemes(themes, cwd) : themes;
 
@@ -116,32 +131,33 @@ export default function(api: IApi, options: UmiPluginThemeSwitchOptions) {
     _defaultTheme = _themes[0].name;
   }
 
-  api.onOptionChange(newOpts => {
-    opts = Object.assign({}, defaultConfig, newOpts);
-    api.restart();
-  });
+  // api.modifyConfig(newOpts => {
+  //   opts = Object.assign({}, defaultConfig, newOpts);
+  //   api.restartServer();
+  // });
 
-  api.addHTMLStyle({
+  api.addHTMLStyles(() => ({
     type: 'text/css',
     content: generateAllStyles(_themes, scope, attribute, _defaultTheme),
-  });
+  }));
 
-  api.chainWebpackConfig(config => {
-    config.plugin('theme-config').use(require('webpack/lib/DefinePlugin'), [
+  api.chainWebpack((config, { webpack }) => {
+    config.plugin('theme-config').use(webpack.DefinePlugin, [
       {
         UMI_THEME_ATTRIBUTE: JSON.stringify(attribute),
         UMI_THEME_SCOPE: JSON.stringify(scope),
       },
     ]);
+    return config
   });
   // 记住上一次选中的主题
   let detecteLastTheme = '';
   if (remember) {
     // 检测上一次缓存的主题 并当成默认主题设置 避免默认主题覆盖上一次选中的主题
     detecteLastTheme = `__defaultTheme = window.localStorage.getItem('umi_theme') || __defaultTheme`;
-  }  
+  }
   // 默认主题
-  api.addEntryCodeAhead(`
+  api.addEntryCodeAhead(() => `
     ;(function(){
       window['_default_theme'] = ${JSON.stringify(_defaultTheme)};
       var __defaultTheme = ${JSON.stringify(_defaultTheme)};
@@ -154,7 +170,7 @@ export default function(api: IApi, options: UmiPluginThemeSwitchOptions) {
 
   // 记住上次选择过的主题
   if (remember) {
-    api.addEntryCodeAhead(`
+    api.addEntryCodeAhead(() => `
       ;(function(){
         const theme = typeof localStorage !== 'undefined' ? window.localStorage.getItem('umi_theme') : '';
         if(!theme) return;
@@ -167,7 +183,7 @@ export default function(api: IApi, options: UmiPluginThemeSwitchOptions) {
 
   // 自动检测暗色主题，如果remember也为true，则只在页面没有设置过theme的情况下才检测
   if (autoDetectDarkMode && autoDetectDarkMode.enable) {
-    api.addEntryCodeAhead(`
+    api.addEntryCodeAhead(() => `
       ;(function(){
         const isBrowserDarkMode = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
         if(!isBrowserDarkMode) return;