@modern-js/server 1.15.1-beta.0 → 1.16.0-alpha.underfin.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @modern-js/server
 
+## 1.16.0
+
+### Patch Changes
+
+- 2808ff5a2: fix(dev-server): support enable hmr client by webpack target
+
+  fix(dev-server): 支持通过 webpack target 来判断是否启用 hmr client
+
+- Updated dependencies [641592f52]
+- Updated dependencies [3904b30a5]
+- Updated dependencies [1100dd58c]
+- Updated dependencies [e04e6e76a]
+- Updated dependencies [81c66e4a4]
+- Updated dependencies [2c305b6f5]
+  - @modern-js/utils@1.16.0
+  - @modern-js/webpack@1.16.0
+  - @modern-js/server-utils@1.16.0
+  - @modern-js/prod-server@1.16.0
+
 ## 1.15.0
 
 ### Patch Changes

package/dist/js/modern/dev-tools/babel/register.js

@@ -6,71 +6,28 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import path from 'path';
 import { resolveBabelConfig } from '@modern-js/server-utils';
-import { fs, getAlias } from '@modern-js/utils';
-import * as tsNode from 'ts-node';
-import * as tsConfigPaths from 'tsconfig-paths';
 const registerDirs = ['./api', './server', './config/mock', './shared'];
-export const enableRegister = (projectRoot, config // eslint-disable-next-line consistent-return
-) => {
+export const enableRegister = (projectRoot, config) => {
   const TS_CONFIG_FILENAME = `tsconfig.json`;
   const tsconfigPath = path.resolve(projectRoot, TS_CONFIG_FILENAME);
-  const isTsProject = fs.existsSync(tsconfigPath);
-
-  if (isTsProject) {
-    const {
-      alias
-    } = config.source;
-    const aliasOption = getAlias(alias || {}, {
-      appDirectory: projectRoot,
-      tsconfigPath
-    });
-    const {
-      paths = {},
-      absoluteBaseUrl = './'
-    } = aliasOption;
-    const tsPaths = Object.keys(paths).reduce((o, key) => {
-      let tsPath = paths[key]; // 要不要把对 modern 的判断去掉
-
-      if (typeof tsPath === 'string' && path.isAbsolute(tsPath)) {
-        tsPath = path.relative(absoluteBaseUrl, tsPath);
+  const babelConfig = resolveBabelConfig(projectRoot, config, {
+    tsconfigPath,
+    syntax: 'es6+',
+    type: 'commonjs'
+  });
+  return require('@babel/register')(_objectSpread(_objectSpread({}, babelConfig), {}, {
+    only: [function (filePath) {
+      // TODO: wait params
+      // FIXME: 删除hardcode，根据 AppContext 中的 metaName 设置路径
+      if (filePath.includes(`node_modules${path.sep}.modern-js`)) {
+        return true;
       }
 
-      if (typeof tsPath === 'string') {
-        tsPath = [tsPath];
-      }
-
-      return _objectSpread(_objectSpread({}, o), {}, {
-        [`${key}`]: tsPath
-      });
-    }, {});
-    tsConfigPaths.register({
-      baseUrl: absoluteBaseUrl || './',
-      paths: tsPaths
-    });
-    tsNode.register({
-      project: tsconfigPath,
-      transpileOnly: true
-    });
-  } else {
-    const babelConfig = resolveBabelConfig(projectRoot, config, {
-      tsconfigPath,
-      syntax: 'es6+',
-      type: 'commonjs'
-    });
-    return require('@babel/register')(_objectSpread(_objectSpread({}, babelConfig), {}, {
-      only: [function (filePath) {
-        // TODO: wait params
-        // FIXME: 删除hardcode，根据 AppContext 中的 metaName 设置路径
-        if (filePath.includes(`node_modules${path.sep}.modern-js`)) {
-          return true;
-        }
-
-        return registerDirs.some(registerDir => filePath.startsWith(path.join(projectRoot, registerDir)));
-      }],
-      extensions: ['.js', '.ts'],
-      babelrc: false,
-      configFile: false,
-      root: projectRoot
-    }));
-  }
+      return registerDirs.some(registerDir => filePath.startsWith(path.join(projectRoot, registerDir)));
+    }],
+    extensions: ['.js', '.ts'],
+    babelrc: false,
+    configFile: false,
+    root: projectRoot
+  }));
 };

package/dist/js/modern/dev-tools/dev-server-plugin.js

@@ -1,9 +1,5 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { webpack } from '@modern-js/webpack';
-const {
-  EntryPlugin
-} = webpack;
 export default class DevServerPlugin {
   constructor(options) {
     _defineProperty(this, "options", void 0);
@@ -20,7 +16,7 @@ export default class DevServerPlugin {
     const port = client.port ? `&port=${client.port}` : '';
     const clientEntry = `${require.resolve("../hmr-client")}?${host}${path}${port}`; // use a hook to add entries if available
 
-    new EntryPlugin(compiler.context, clientEntry, {
+    new compiler.webpack.EntryPlugin(compiler.context, clientEntry, {
       name: undefined
     }).apply(compiler);
   }
@@ -32,11 +28,14 @@ export default class DevServerPlugin {
 
 
     const compilerOptions = compiler.options;
+    const {
+      HotModuleReplacementPlugin
+    } = compiler.webpack;
     compilerOptions.plugins = compilerOptions.plugins || [];
 
-    if (!compilerOptions.plugins.find(p => p.constructor === webpack.HotModuleReplacementPlugin)) {
+    if (!compilerOptions.plugins.find(p => p.constructor === HotModuleReplacementPlugin)) {
       // apply the HMR plugin, if it didn't exist before.
-      const plugin = new webpack.HotModuleReplacementPlugin();
+      const plugin = new HotModuleReplacementPlugin();
       plugin.apply(compiler);
     }
   }

package/dist/js/modern/hmr-client/index.js

@@ -8,6 +8,7 @@ import stripAnsi from '@modern-js/utils/strip-ansi';
 import { formatWebpackMessages } from '@modern-js/utils/format';
 import { createSocketUrl } from "./createSocketUrl"; // declare any to fix the type of `module.hot`
 
+// TODO hadRuntimeError should be fixed.
 // We need to keep track of if there has been a runtime error.
 // Essentially, we cannot guarantee application state was not corrupted by the
 // runtime error. To prevent confusing behavior, we forcibly reload the entire
@@ -171,11 +172,9 @@ function tryApplyUpdates() {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.
-    const hasReactRefresh = process.env.FAST_REFRESH;
-    const wantsForcedReload = err || !updatedModules || hadRuntimeError; // React refresh can handle hot-reloading over errors.
+    const wantsForcedReload = err || !updatedModules || hadRuntimeError;
 
-    if (!hasReactRefresh && wantsForcedReload) {
+    if (wantsForcedReload) {
       window.location.reload();
       return;
     }

package/dist/js/modern/server/dev-server.js

@@ -8,7 +8,7 @@ import { createServer } from 'http';
 import path from 'path';
 import { createServer as createHttpsServer } from 'https';
 import { API_DIR, SERVER_DIR, SHARED_DIR } from '@modern-js/utils';
-import webpackDevMiddleware from '@modern-js/webpack/webpack-dev-middleware';
+import webpackDevMiddleware from '@modern-js/utils/webpack-dev-middleware';
 import { createProxyHandler, ModernServer, AGGRED_DIR } from '@modern-js/prod-server';
 import { getDefaultDevOptions } from "../constants";
 import { createMockHandler } from "../dev-tools/mock";
@@ -241,14 +241,30 @@ export class ModernDevServer extends ModernServer {
     return this.setupDevMiddleware(compiler);
   }
 
+  isClientCompiler(compiler) {
+    const {
+      target
+    } = compiler.options; // if target not contains `node`, it's a client compiler
+
+    if (target) {
+      if (Array.isArray(target)) {
+        return !target.includes('node');
+      }
+
+      return target !== 'node';
+    }
+
+    return compiler.name === 'client';
+  }
+
   setupDevServerPlugin(compiler) {
     const {
       dev: devConf
-    } = this;
+    } = this; // apply dev server to client compiler, add hmr client to entry.
 
     if (compiler.compilers) {
       compiler.compilers.forEach(target => {
-        if (target.name === 'client') {
+        if (this.isClientCompiler(target)) {
           new DevServerPlugin(devConf).apply(target);
         }
       });

package/dist/js/modern/types.js

@@ -1 +0,0 @@
-export {};

package/dist/js/node/dev-tools/babel/register.js

@@ -9,16 +9,6 @@ var _path = _interopRequireDefault(require("path"));
 
 var _serverUtils = require("@modern-js/server-utils");
 
-var _utils = require("@modern-js/utils");
-
-var tsNode = _interopRequireWildcard(require("ts-node"));
-
-var tsConfigPaths = _interopRequireWildcard(require("tsconfig-paths"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -29,71 +19,31 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 const registerDirs = ['./api', './server', './config/mock', './shared'];
 
-const enableRegister = (projectRoot, config // eslint-disable-next-line consistent-return
-) => {
+const enableRegister = (projectRoot, config) => {
   const TS_CONFIG_FILENAME = `tsconfig.json`;
 
   const tsconfigPath = _path.default.resolve(projectRoot, TS_CONFIG_FILENAME);
 
-  const isTsProject = _utils.fs.existsSync(tsconfigPath);
-
-  if (isTsProject) {
-    const {
-      alias
-    } = config.source;
-    const aliasOption = (0, _utils.getAlias)(alias || {}, {
-      appDirectory: projectRoot,
-      tsconfigPath
-    });
-    const {
-      paths = {},
-      absoluteBaseUrl = './'
-    } = aliasOption;
-    const tsPaths = Object.keys(paths).reduce((o, key) => {
-      let tsPath = paths[key]; // 要不要把对 modern 的判断去掉
-
-      if (typeof tsPath === 'string' && _path.default.isAbsolute(tsPath)) {
-        tsPath = _path.default.relative(absoluteBaseUrl, tsPath);
+  const babelConfig = (0, _serverUtils.resolveBabelConfig)(projectRoot, config, {
+    tsconfigPath,
+    syntax: 'es6+',
+    type: 'commonjs'
+  });
+  return require('@babel/register')(_objectSpread(_objectSpread({}, babelConfig), {}, {
+    only: [function (filePath) {
+      // TODO: wait params
+      // FIXME: 删除hardcode，根据 AppContext 中的 metaName 设置路径
+      if (filePath.includes(`node_modules${_path.default.sep}.modern-js`)) {
+        return true;
       }
 
-      if (typeof tsPath === 'string') {
-        tsPath = [tsPath];
-      }
-
-      return _objectSpread(_objectSpread({}, o), {}, {
-        [`${key}`]: tsPath
-      });
-    }, {});
-    tsConfigPaths.register({
-      baseUrl: absoluteBaseUrl || './',
-      paths: tsPaths
-    });
-    tsNode.register({
-      project: tsconfigPath,
-      transpileOnly: true
-    });
-  } else {
-    const babelConfig = (0, _serverUtils.resolveBabelConfig)(projectRoot, config, {
-      tsconfigPath,
-      syntax: 'es6+',
-      type: 'commonjs'
-    });
-    return require('@babel/register')(_objectSpread(_objectSpread({}, babelConfig), {}, {
-      only: [function (filePath) {
-        // TODO: wait params
-        // FIXME: 删除hardcode，根据 AppContext 中的 metaName 设置路径
-        if (filePath.includes(`node_modules${_path.default.sep}.modern-js`)) {
-          return true;
-        }
-
-        return registerDirs.some(registerDir => filePath.startsWith(_path.default.join(projectRoot, registerDir)));
-      }],
-      extensions: ['.js', '.ts'],
-      babelrc: false,
-      configFile: false,
-      root: projectRoot
-    }));
-  }
+      return registerDirs.some(registerDir => filePath.startsWith(_path.default.join(projectRoot, registerDir)));
+    }],
+    extensions: ['.js', '.ts'],
+    babelrc: false,
+    configFile: false,
+    root: projectRoot
+  }));
 };
 
 exports.enableRegister = enableRegister;

package/dist/js/node/dev-tools/dev-server-plugin.js

@@ -5,14 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _webpack = require("@modern-js/webpack");
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const {
-  EntryPlugin
-} = _webpack.webpack;
-
 class DevServerPlugin {
   constructor(options) {
     _defineProperty(this, "options", void 0);
@@ -29,7 +23,7 @@ class DevServerPlugin {
     const port = client.port ? `&port=${client.port}` : '';
     const clientEntry = `${require.resolve("../hmr-client")}?${host}${path}${port}`; // use a hook to add entries if available
 
-    new EntryPlugin(compiler.context, clientEntry, {
+    new compiler.webpack.EntryPlugin(compiler.context, clientEntry, {
       name: undefined
     }).apply(compiler);
   }
@@ -41,11 +35,14 @@ class DevServerPlugin {
 
 
     const compilerOptions = compiler.options;
+    const {
+      HotModuleReplacementPlugin
+    } = compiler.webpack;
     compilerOptions.plugins = compilerOptions.plugins || [];
 
-    if (!compilerOptions.plugins.find(p => p.constructor === _webpack.webpack.HotModuleReplacementPlugin)) {
+    if (!compilerOptions.plugins.find(p => p.constructor === HotModuleReplacementPlugin)) {
       // apply the HMR plugin, if it didn't exist before.
-      const plugin = new _webpack.webpack.HotModuleReplacementPlugin();
+      const plugin = new HotModuleReplacementPlugin();
       plugin.apply(compiler);
     }
   }

package/dist/js/node/hmr-client/index.js

@@ -14,6 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * Tips: this package will be bundled and running in the browser, do not import from the entry of @modern-js/utils.
  */
+// TODO hadRuntimeError should be fixed.
 // We need to keep track of if there has been a runtime error.
 // Essentially, we cannot guarantee application state was not corrupted by the
 // runtime error. To prevent confusing behavior, we forcibly reload the entire
@@ -177,11 +178,9 @@ function tryApplyUpdates() {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.
-    const hasReactRefresh = process.env.FAST_REFRESH;
-    const wantsForcedReload = err || !updatedModules || hadRuntimeError; // React refresh can handle hot-reloading over errors.
+    const wantsForcedReload = err || !updatedModules || hadRuntimeError;
 
-    if (!hasReactRefresh && wantsForcedReload) {
+    if (wantsForcedReload) {
       window.location.reload();
       return;
     }

package/dist/js/node/server/dev-server.js

@@ -13,7 +13,7 @@ var _https = require("https");
 
 var _utils = require("@modern-js/utils");
 
-var _webpackDevMiddleware = _interopRequireDefault(require("@modern-js/webpack/webpack-dev-middleware"));
+var _webpackDevMiddleware = _interopRequireDefault(require("@modern-js/utils/webpack-dev-middleware"));
 
 var _prodServer = require("@modern-js/prod-server");
 
@@ -268,14 +268,30 @@ class ModernDevServer extends _prodServer.ModernServer {
     return this.setupDevMiddleware(compiler);
   }
 
+  isClientCompiler(compiler) {
+    const {
+      target
+    } = compiler.options; // if target not contains `node`, it's a client compiler
+
+    if (target) {
+      if (Array.isArray(target)) {
+        return !target.includes('node');
+      }
+
+      return target !== 'node';
+    }
+
+    return compiler.name === 'client';
+  }
+
   setupDevServerPlugin(compiler) {
     const {
       dev: devConf
-    } = this;
+    } = this; // apply dev server to client compiler, add hmr client to entry.
 
     if (compiler.compilers) {
       compiler.compilers.forEach(target => {
-        if (target.name === 'client') {
+        if (this.isClientCompiler(target)) {
           new _devServerPlugin.default(devConf).apply(target);
         }
       });

package/dist/js/node/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/types/dev-tools/dev-server-plugin.d.ts

@@ -1,5 +1,5 @@
-import { webpack } from '@modern-js/webpack';
-import { DevServerOptions } from '../types';
+import type webpack from 'webpack';
+import type { DevServerOptions } from '../types';
 export default class DevServerPlugin {
   private readonly options;
   constructor(options: DevServerOptions);

package/dist/types/dev-tools/socket-server.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="node" />
 import { Server } from 'http';
 import ws from 'ws';
-import type { webpack } from '@modern-js/webpack';
-import { DevServerOptions } from '../types';
+import type webpack from 'webpack';
+import type { DevServerOptions } from '../types';
 export default class SocketServer {
   private wsServer;
   private readonly sockets;

package/dist/types/server/dev-server.d.ts

@@ -27,6 +27,7 @@ export declare class ModernDevServer extends ModernServer {
     event: WatchEvent;
   }): void;
   private setupCompiler;
+  private isClientCompiler;
   private setupDevServerPlugin;
   private setupHooks;
   private setupDevMiddleware;

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
-import { ModernServerOptions } from '@modern-js/prod-server';
-import type { webpack } from '@modern-js/webpack';
+import type webpack from 'webpack';
+import type { ModernServerOptions } from '@modern-js/prod-server';
 export declare type DevServerOptions = {
   client: {
     path?: string;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.15.1-beta.0",
+  "version": "1.16.0-alpha.underfin.001",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -30,20 +30,18 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@babel/register": "^7.17.7",
-    "@modern-js/prod-server": "1.15.0",
-    "@modern-js/server-utils": "1.15.0",
-    "@modern-js/utils": "1.15.0",
-    "@modern-js/webpack": "1.15.0",
+    "@modern-js/prod-server": "1.16.0",
+    "@modern-js/server-utils": "1.16.0",
+    "@modern-js/utils": "1.16.0-alpha.underfin.001",
     "devcert": "^1.2.2",
     "minimatch": "^3.0.4",
     "path-to-regexp": "^6.2.0",
-    "tsconfig-paths": "3.14.1",
     "ws": "^8.2.0"
   },
   "devDependencies": {
-    "@modern-js/core": "1.15.0",
-    "@modern-js/server-core": "1.15.0",
-    "@modern-js/types": "1.15.0",
+    "@modern-js/core": "1.16.0",
+    "@modern-js/server-core": "1.16.0",
+    "@modern-js/types": "1.16.0",
     "@scripts/build": "1.15.0",
     "@scripts/jest-config": "1.15.0",
     "@types/jest": "^27",
@@ -51,13 +49,9 @@
     "@types/node": "^14",
     "@types/ws": "^7.4.7",
     "jest": "^27",
-    "ts-node": "^10.1.0",
     "typescript": "^4",
-    "webpack": "^5.71.0",
-    "websocket": "^1"
-  },
-  "peerDependencies": {
-    "ts-node": "^10.1.0"
+    "websocket": "^1",
+    "webpack": "^5.71.0"
   },
   "sideEffects": false,
   "modernConfig": {
@@ -67,8 +61,7 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public",
-    "types": "./dist/types/index.d.ts"
+    "access": "public"
   },
   "wireit": {
     "build": {