feat(service): add typescipt and esmodule support for shuvi.config.js (…

…#228)

.github/workflows/nodejs.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
     - uses: actions/checkout@v2

packages/platform-mp/src/lib/platform-mp-base/index.ts

@@ -5,7 +5,7 @@ import {
   IUserRouteConfig,
   BUILD_DEFAULT_DIR
 } from '@shuvi/service';
-import { findFirstExistedFile } from '@shuvi/service/lib/project/file-snippets';
+import { findFirstExistedFile, withExts } from '@shuvi/utils/lib/file';
 import { rankRouteBranches } from '@shuvi/router';
 import { isEmptyObject, readConfig } from '@tarojs/helper';
 import {
@@ -52,10 +52,7 @@ const getAllFiles = (
   return currentFileList;
 };
 
-const moduleFileExtensions = ['js', 'jsx', 'tsx', 'ts'];
-function withExts(file: string, extensions: string[]): string[] {
-  return extensions.map(ext => `${file}.${ext}`);
-}
+const moduleFileExtensions = ['.js', '.jsx', '.tsx', '.ts'];
 
 export default abstract class PlatformMpBase {
   themeFilePath: string = '';

packages/service/package.json

@@ -34,6 +34,7 @@
     "@babel/generator": "^7.14.5",
     "@babel/parser": "^7.14.7",
     "@babel/traverse": "^7.14.7",
+    "@modern-js/node-bundle-require": "^1.1.1",
     "@shuvi/hook": "0.0.1-pre.10",
     "@shuvi/platform-core": "0.0.1-pre.10",
     "@shuvi/shared": "0.0.1-pre.10",

packages/service/src/api/__tests__/api.test.ts

@@ -2,7 +2,7 @@ import { getApi } from '../api';
 import { IApiConfig, IPaths } from '..';
 import path from 'path';
 import rimraf from 'rimraf';
-import { resolvePreset, resolvePlugin } from './utils';
+import { resolvePlugin } from './utils';
 import { readFileSync } from 'fs';
 
 describe('api', () => {

packages/service/src/api/api.ts

@@ -60,7 +60,7 @@ class Api implements IApi {
   private _serverPlugins: IRuntimeOrServerPlugin[] = [];
   private _phase: IPhase;
   private _platform!: IPlatform;
-  cliContext: ICliContext;
+  cliContext!: ICliContext;
   pluginManager: PluginManager;
   serverPlugins: IRuntimeOrServerPlugin[] = [];
 
@@ -88,26 +88,7 @@ class Api implements IApi {
     }
     this.pluginManager = getManager();
     this.pluginManager.clear();
-    this.initConfig();
-    this._platform = getPlatform(this.config.platform.name);
-    this.cliContext = {
-      mode: this._mode,
-      paths: this.paths,
-      config: this.config,
-      phase: this.phase,
-      pluginRunner: this.pluginManager.runner,
-      serverPlugins: this.serverPlugins,
-      // resources
-      resources: this.resources,
-      assetPublicPath: this.assetPublicPath,
-      getAssetPublicUrl: this.getAssetPublicUrl.bind(this),
-      resolveAppFile: this.resolveAppFile.bind(this),
-      resolveUserFile: this.resolveUserFile.bind(this),
-      resolveBuildFile: this.resolveBuildFile.bind(this),
-      resolvePublicFile: this.resolvePublicFile.bind(this),
-      getRoutes: this.getRoutes.bind(this)
-    };
-    this.pluginManager.setContext(this.cliContext);
+
   }
 
   get mode() {
@@ -135,13 +116,14 @@ class Api implements IApi {
     this.pluginManager.usePlugin(...platformPlugins);
   }
 
-  initConfig() {
-    const configFromFile = loadConfig({
+  async initConfig() {
+    const configFromFile = await loadConfig({
       rootDir: this._cwd,
       configFile: this._configFile,
       overrides: this._userConfig
     });
     this._config = deepmerge(createDefaultConfig(), configFromFile);
+
     const {
       ssr,
       router: { history }
@@ -158,6 +140,26 @@ class Api implements IApi {
   }
 
   async init() {
+    await this.initConfig();
+    this._platform = getPlatform(this.config.platform.name);
+    this.cliContext = {
+      mode: this._mode,
+      paths: this.paths,
+      config: this.config,
+      phase: this.phase,
+      pluginRunner: this.pluginManager.runner,
+      serverPlugins: this.serverPlugins,
+      // resources
+      resources: this.resources,
+      assetPublicPath: this.assetPublicPath,
+      getAssetPublicUrl: this.getAssetPublicUrl.bind(this),
+      resolveAppFile: this.resolveAppFile.bind(this),
+      resolveUserFile: this.resolveUserFile.bind(this),
+      resolveBuildFile: this.resolveBuildFile.bind(this),
+      resolvePublicFile: this.resolvePublicFile.bind(this),
+      getRoutes: this.getRoutes.bind(this)
+    };
+    this.pluginManager.setContext(this.cliContext);
     this._projectBuilder = new ProjectBuilder({
       static: this.mode === 'production'
     });

packages/service/src/api/setupApp.ts

@@ -1,6 +1,7 @@
 import path from 'path';
 
 import { getTypeScriptInfo } from '@shuvi/utils/lib/detectTypescript';
+import { withExts } from '@shuvi/utils/lib/file';
 import { verifyTypeScriptSetup } from '@shuvi/toolpack/lib/utils/verifyTypeScriptSetup';
 import { renameFilepathToComponent } from '../lib/routes';
 import { renameFilepathToModule } from '../lib/apiRoutes';
@@ -10,10 +11,6 @@ import { getPublicRuntimeConfig } from '../lib/getPublicRuntimeConfig';
 import resolveRuntimeCoreFile from '../lib/resolveRuntimeCoreFile';
 import { Api } from './api';
 
-function withExts(file: string, extensions: string[]): string[] {
-  return extensions.map(ext => `${file}${ext}`);
-}
-
 export async function setupApp(api: Api) {
   const { paths, config } = api;
   await verifyTypeScriptSetup({

packages/service/src/api/types.ts

@@ -86,7 +86,7 @@ export interface IApiConfig {
   ssr: boolean;
   publicDir: string;
   publicPath: string;
-  env: Record<string, string>;
+  env: Record<string, string | undefined>;
   router: {
     history: IRouterHistoryMode;
   };

packages/service/src/config/__tests__/config.test.ts

@@ -1,6 +1,17 @@
+import webpack from 'webpack'
 import { loadFixture, resolveFixture } from './utils';
 import { loadConfig } from '..';
 
+const dotEnvConfigInlineSnapShot = `
+Object {
+  "conflictEnvShouldBeDevelopmentLocal": "development.local",
+  "envLocalShouldBeTrue": "true",
+  "shouldBe123": "123",
+  "shouldBeBar": "bar",
+  "shouldBeUndefined": undefined,
+}
+`
+
 describe('config', () => {
   test('should work without config file', async () => {
     const config = await loadFixture('empty');
@@ -58,15 +69,38 @@ describe('config', () => {
 
     const config = await loadFixture('dotenv');
 
-    expect(config.env).toMatchInlineSnapshot(`
-      Object {
-        "conflictEnvShouldBeDevelopmentLocal": "development.local",
-        "envLocalShouldBeTrue": "true",
-        "shouldBe123": "123",
-        "shouldBeBar": "bar",
-        "shouldBeUndefined": undefined,
-      }
-    `);
+    expect(config.env).toMatchInlineSnapshot(dotEnvConfigInlineSnapShot);
+  });
+
+  test('should load config in esmodule', async () => {
+    Object.assign(process.env, {
+      NODE_ENV: 'development'
+    });
+
+    const config = await loadFixture('esm');
+
+    expect(config.env).toMatchInlineSnapshot(dotEnvConfigInlineSnapShot);
+    expect((config as any).webpack).toBe(webpack)
+  });
+
+  test('should load config in typescript', async () => {
+    Object.assign(process.env, {
+      NODE_ENV: 'development'
+    });
+
+    const config = await loadFixture('typescript');
+
+    expect(config.env).toMatchInlineSnapshot(dotEnvConfigInlineSnapShot);
+  });
+
+  test('should load config in typescript using defineConfig', async () => {
+    Object.assign(process.env, {
+      NODE_ENV: 'development'
+    });
+
+    const config = await loadFixture('typescript');
+
+    expect(config.env).toMatchInlineSnapshot(dotEnvConfigInlineSnapShot);
   });
 
   test('should throw error when config file failed', async () => {
@@ -77,7 +111,7 @@ describe('config', () => {
     } catch (err: any) {
       expect(
         err.message
-      ).toContain('Cannot find module \'./notFound\'');
+      ).toContain('Could not resolve \"./notFound\"');
     }
   });
 });

packages/service/src/config/__tests__/fixtures/dotenv-esm/.env

@@ -0,0 +1,3 @@
+foo=bar
+test=123
+conflictEnv=env

packages/service/src/config/__tests__/fixtures/dotenv-esm/.env.development.local

@@ -0,0 +1 @@
+conflictEnv=development.local

packages/service/src/config/__tests__/fixtures/dotenv-esm/.env.local

@@ -0,0 +1,2 @@
+envLocal=true
+conflictEnv=local

packages/service/src/config/__tests__/fixtures/dotenv-esm/shuvi.config.js

@@ -0,0 +1,10 @@
+export default {
+  ssr: true,
+  env: {
+    shouldBe123: process.env.test,
+    shouldBeBar: process.env.foo,
+    shouldBeUndefined: process.env.undefined,
+    envLocalShouldBeTrue: process.env.envLocal,
+    conflictEnvShouldBeDevelopmentLocal: process.env.conflictEnv
+  }
+};

packages/service/src/config/__tests__/fixtures/esm/.env

@@ -0,0 +1,3 @@
+foo=bar
+test=123
+conflictEnv=env

packages/service/src/config/__tests__/fixtures/esm/.env.development.local

@@ -0,0 +1 @@
+conflictEnv=development.local

packages/service/src/config/__tests__/fixtures/esm/.env.local

@@ -0,0 +1,2 @@
+envLocal=true
+conflictEnv=local

packages/service/src/config/__tests__/fixtures/esm/otherConfigs.js

@@ -0,0 +1,4 @@
+import webpack from 'webpack'
+export default {
+  webpack
+}

packages/service/src/config/__tests__/fixtures/esm/shuvi.config.js

@@ -0,0 +1,12 @@
+import otherConfigs from './otherConfigs'
+export default {
+  ssr: true,
+  env: {
+    shouldBe123: process.env.test,
+    shouldBeBar: process.env.foo,
+    shouldBeUndefined: process.env.undefined,
+    envLocalShouldBeTrue: process.env.envLocal,
+    conflictEnvShouldBeDevelopmentLocal: process.env.conflictEnv
+  },
+  ...otherConfigs
+};

packages/service/src/config/__tests__/fixtures/typescript-defineConfig/.env

@@ -0,0 +1,3 @@
+foo=bar
+test=123
+conflictEnv=env

packages/service/src/config/__tests__/fixtures/typescript-defineConfig/.env.development.local

@@ -0,0 +1 @@
+conflictEnv=development.local

packages/service/src/config/__tests__/fixtures/typescript-defineConfig/.env.local

@@ -0,0 +1,2 @@
+envLocal=true
+conflictEnv=local

packages/service/src/config/__tests__/fixtures/typescript-defineConfig/otherConfigs.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'shuvi'
+export default defineConfig({
+  ssr: true,
+  env: {
+    shouldBe123: process.env.test,
+    shouldBeBar: process.env.foo,
+    shouldBeUndefined: process.env.undefined,
+    envLocalShouldBeTrue: process.env.envLocal,
+    conflictEnvShouldBeDevelopmentLocal: process.env.conflictEnv
+  }
+})

packages/service/src/config/__tests__/fixtures/typescript-defineConfig/shuvi.config.ts

@@ -0,0 +1 @@
+export { default } from './otherConfigs'

packages/service/src/config/__tests__/fixtures/typescript/.env

@@ -0,0 +1,3 @@
+foo=bar
+test=123
+conflictEnv=env

packages/service/src/config/__tests__/fixtures/typescript/.env.development.local

@@ -0,0 +1 @@
+conflictEnv=development.local

packages/service/src/config/__tests__/fixtures/typescript/.env.local

@@ -0,0 +1,2 @@
+envLocal=true
+conflictEnv=local

packages/service/src/config/__tests__/fixtures/typescript/otherConfigs.ts

@@ -0,0 +1,10 @@
+export default {
+  ssr: true,
+  env: {
+    shouldBe123: process.env.test,
+    shouldBeBar: process.env.foo,
+    shouldBeUndefined: process.env.undefined,
+    envLocalShouldBeTrue: process.env.envLocal,
+    conflictEnvShouldBeDevelopmentLocal: process.env.conflictEnv
+  }
+}

packages/service/src/config/__tests__/fixtures/typescript/shuvi.config.ts

@@ -0,0 +1 @@
+export { default } from './otherConfigs'

packages/service/src/config/__tests__/utils.ts

@@ -11,7 +11,7 @@ export async function loadFixture(
   userConfig: IConfig = {},
   configFile?: string
 ) {
-  return loadConfig({
+  return await loadConfig({
     rootDir: resolveFixture(name),
     overrides: userConfig,
     configFile