@modern-js/module-tools 1.0.0-alpha.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# @modern-js/module-tools
+
+## 1.0.0-alpha.3
+### Patch Changes
+
+- feat: initial
+- Updated dependencies [undefined]
+  - @modern-js/plugin-changeset@1.0.0-alpha.3
+  - @modern-js/babel-preset-module@1.0.0-alpha.3
+  - @modern-js/core@1.0.0-alpha.3
+  - @modern-js/css-config@1.0.0-alpha.3
+  - @modern-js/i18n-cli-language-detector@1.0.0-alpha.3
+  - @modern-js/plugin-analyze@1.0.0-alpha.3
+  - @modern-js/plugin-fast-refresh@1.0.0-alpha.3
+  - @modern-js/plugin-i18n@1.0.0-alpha.3
+  - @modern-js/new-action@1.0.0-alpha.3
+  - @modern-js/babel-compiler@1.0.0-alpha.3
+  - @modern-js/style-compiler@1.0.0-alpha.3
+  - @modern-js/module-tools-hooks@1.0.0-alpha.3
+  - @modern-js/plugin@1.0.0-alpha.3
+  - @modern-js/utils@1.0.0-alpha.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Modern.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+
+<p align="center">
+  <a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
+</p>
+
+<p align="center">现代 Web 工程体系</p>
+
+## 背景
+- [迈入现代 Web 开发](https://zhuanlan.zhihu.com/p/386607009)
+- [现代 Web 开发者问卷调查报告](https://zhuanlan.zhihu.com/p/403206195)
+
+## 计划
+
+Modern.js 的 1.0.0.rc 版已经发到 npm，目前在做测试改进，README 文档之后统一提供（现阶段加入测试和开发，可以发 [issue](https://github.com/modern-js-dev/modern.js/issues) 留微信联系），完整的文档站计划在10月14日上线
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/bin/modern.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('@modern-js/core/bin');

package/dist/js/modern/cli/build.js

@@ -0,0 +1,9 @@
+import { Import } from '@modern-js/utils';
+const local = Import.lazy('../locale/index', require);
+const commands = Import.lazy('../commands', require);
+export const buildCli = program => {
+  // TODO: 初始化环境变量
+  program.command('build').usage('[options]').description(local.i18n.t(local.localeKeys.command.build.describe)).option('-w, --watch', local.i18n.t(local.localeKeys.command.build.watch)).option('--tsconfig [tsconfig]', local.i18n.t(local.localeKeys.command.build.tsconfig), './tsconfig.json').option('--style-only', local.i18n.t(local.localeKeys.command.build.style_only)).option('--platform [platform]', local.i18n.t(local.localeKeys.command.build.platform)).option('--no-tsc', local.i18n.t(local.localeKeys.command.build.no_tsc)).option('--no-clear', local.i18n.t(local.localeKeys.command.build.no_clear)).action(async subCommand => {
+    await commands.build(subCommand);
+  });
+};

package/dist/js/modern/cli/dev.js

@@ -0,0 +1,8 @@
+import { Import } from '@modern-js/utils';
+const local = Import.lazy('../locale', require);
+const commands = Import.lazy('../commands', require);
+export const devCli = program => {
+  program.command('dev').usage('[options]').description(local.i18n.t(local.localeKeys.command.dev.describe)).option('--tsconfig [tsconfig]', local.i18n.t(local.localeKeys.command.build.tsconfig), './tsconfig.json').action(async params => {
+    await commands.dev(params);
+  });
+};

package/dist/js/modern/cli/index.js

@@ -0,0 +1,3 @@
+export * from "./build";
+export * from "./dev";
+export * from "./new";

package/dist/js/modern/cli/new.js

@@ -0,0 +1,16 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 { Import } from '@modern-js/utils';
+const newAction = Import.lazy('@modern-js/new-action', require);
+const local = Import.lazy('../locale', require);
+export const newCli = (program, locale) => {
+  program.command('new').usage('[options]').description(local.i18n.t(local.localeKeys.command.new.describe)).option('-d, --debug', local.i18n.t(local.localeKeys.command.new.debug), false).option('-c, --config <config>', local.i18n.t(local.localeKeys.command.new.config)).option('--dist-tag <tag>', local.i18n.t(local.localeKeys.command.new.distTag)).option('--registry', local.i18n.t(local.localeKeys.command.new.registry)).action(async options => {
+    await newAction.ModuleNewAction(_objectSpread(_objectSpread({}, options), {}, {
+      locale
+    }));
+  });
+};

package/dist/js/modern/commands/build.js

@@ -0,0 +1,56 @@
+import * as path from 'path';
+import { fs, Import } from '@modern-js/utils';
+const tsConfigutils = Import.lazy('../utils/tsconfig', require);
+const valid = Import.lazy('../utils/valide', require);
+const buildFeature = Import.lazy('../features/build', require);
+const core = Import.lazy('@modern-js/core', require);
+const dotenv = Import.lazy('dotenv', require);
+export const build = async ({
+  watch: _watch = false,
+  tsconfig: tsconfigName,
+  tsc,
+  clear: _clear = true,
+  platform
+}) => {
+  const {
+    value: {
+      appDirectory
+    }
+  } = core.useAppContext();
+  const modernConfig = core.useResolvedConfigContext().value;
+  const {
+    output: {
+      path: outputPath = 'dist'
+    }
+  } = modernConfig;
+  const tsconfigPath = path.join(appDirectory, tsconfigName);
+  dotenv.config();
+  const isTsProject = tsConfigutils.existTsConfigFile(tsconfigPath);
+  const enableTscCompiler = isTsProject && tsc;
+  valid.valideBeforeTask({
+    modernConfig,
+    tsconfigPath
+  });
+
+  if (_clear) {
+    fs.removeSync(path.join(appDirectory, outputPath));
+  } // TODO: 一些配置只需要从modernConfig中获取
+
+
+  await buildFeature.build({
+    enableWatchMode: _watch,
+    isTsProject,
+    platform,
+    sourceDir: 'src',
+    tsconfigName,
+    enableTscCompiler
+  }, modernConfig);
+  process.on('SIGBREAK', () => {
+    console.info('exit');
+    const tempTsconfigFilePath = path.join(appDirectory, './tsconfig.temp.json');
+
+    if (fs.existsSync(tempTsconfigFilePath)) {
+      fs.removeSync(tempTsconfigFilePath);
+    }
+  });
+};

package/dist/js/modern/commands/dev.js

@@ -0,0 +1,29 @@
+import * as path from 'path';
+import { Import } from '@modern-js/utils';
+const devFeature = Import.lazy('../features/dev', require);
+const core = Import.lazy('@modern-js/core', require);
+const dotenv = Import.lazy('dotenv', require);
+const tsConfigutils = Import.lazy('../utils/tsconfig', require);
+const valid = Import.lazy('../utils/valide', require);
+export const dev = async option => {
+  const {
+    tsconfig: tsconfigName
+  } = option;
+  const appContext = core.useAppContext().value;
+  const modernConfig = core.useResolvedConfigContext().value;
+  const {
+    appDirectory
+  } = appContext;
+  const tsconfigPath = path.join(appDirectory, tsconfigName);
+  dotenv.config();
+  valid.valideBeforeTask({
+    modernConfig,
+    tsconfigPath
+  });
+  const isTsProject = tsConfigutils.existTsConfigFile(tsconfigPath); // await devFeature.showMenu({ isTsProject, appDirectory });
+
+  await devFeature.devStorybook({
+    isTsProject,
+    appDirectory
+  });
+};

package/dist/js/modern/commands/index.js

@@ -0,0 +1,2 @@
+export { dev } from "./dev";
+export { build } from "./build";

package/dist/js/modern/features/build/build-platform.js

@@ -0,0 +1,70 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 { Import, chalk } from '@modern-js/utils';
+const core = Import.lazy('@modern-js/core', require);
+const execa = Import.lazy('execa', require);
+const lg = Import.lazy('./logger', require);
+const pMap = Import.lazy('p-map', require);
+export const buildPlatform = async option => {
+  const {
+    isTsProject = false,
+    platform
+  } = option;
+  const lm = new lg.LoggerManager(); // 获取platforms的参数
+
+  const buildTasks = await core.mountHook().platformBuild({
+    isTsProject
+  });
+
+  if (buildTasks.length <= 0) {
+    console.info(chalk.yellow('No build tasks detected.\nYou can use the `new` command to enable the more features'));
+    return;
+  }
+
+  const loggerMap = {};
+  const taskMapper = buildTasks.filter(task => platform === 'all' || task.name === platform).map(params => {
+    const logger = lm.createLoggerText({
+      title: params.title
+    });
+    loggerMap[params.name] = logger;
+    return _objectSpread({
+      logger
+    }, params);
+  });
+
+  if (taskMapper.length <= 0) {
+    console.info(chalk.yellow(`'${platform}' is undefined task`));
+    return;
+  }
+
+  lm.showCompiling();
+  await pMap(taskMapper, async ({
+    taskPath,
+    params,
+    logger
+  }) => {
+    const childProcess = execa.node(taskPath, params, {
+      stdio: 'pipe',
+      all: true
+    });
+    lm.addStdout(logger, childProcess.stdout, {
+      event: {
+        data: true,
+        error: true
+      }
+    });
+    lm.addStderr(logger, childProcess.stderr);
+    await childProcess; // lm.disappearCompiling();
+    // console.info(lg.colors.title(title));
+    // console.info(a.all);
+  });
+  lm.disappearCompiling();
+
+  for (const key of Object.keys(loggerMap)) {
+    console.info(loggerMap[key].value);
+  }
+};

package/dist/js/modern/features/build/build-watch.js

@@ -0,0 +1,96 @@
+import * as path from 'path';
+import * as os from 'os';
+import { Import } from '@modern-js/utils';
+const core = Import.lazy('@modern-js/core', require);
+const execa = Import.lazy('execa', require);
+const lg = Import.lazy('./logger', require);
+const pMap = Import.lazy('p-map', require);
+const utils = Import.lazy('./utils', require);
+const constants = Import.lazy('./constants', require);
+export const buildInWatchMode = async (config, _) => {
+  const {
+    appDirectory
+  } = core.useAppContext().value;
+  const {
+    sourceDir,
+    enableTscCompiler
+  } = config;
+  const srcRootDir = path.join(appDirectory, sourceDir);
+  const concurrency = os.cpus().length;
+  const lm = new lg.LoggerManager();
+  const codeLog = lm.createLoggerText({
+    title: constants.runBabelCompilerTitle
+  });
+  const dtsLog = lm.createLoggerText({
+    title: constants.runTscWatchTitle
+  });
+  const styleLog = lm.createLoggerText({
+    title: constants.runStyleCompilerTitle
+  });
+  const initCodeMapper = utils.getCodeInitMapper(config);
+  const taskMapper = [...utils.getCodeMapper({
+    logger: codeLog,
+    taskPath: require.resolve("../../tasks/build-watch-source-code"),
+    config,
+    willCompilerDirOrFile: sourceDir,
+    initMapper: initCodeMapper,
+    srcRootDir
+  }), ...(enableTscCompiler ? utils.getDtsMapper(config, dtsLog) : []), {
+    logger: styleLog,
+    taskPath: require.resolve("../../tasks/build-watch-style")
+  }];
+  lm.on('data', () => {
+    console.info(constants.clearFlag);
+    enableTscCompiler && console.info(dtsLog.value);
+    console.info(codeLog.value);
+    console.info(styleLog.value);
+  });
+  await pMap(taskMapper, async ({
+    logger,
+    taskPath,
+    params
+  }) => {
+    const childProcess = execa.node(taskPath, params, {
+      stdio: 'pipe'
+    });
+
+    if (logger === codeLog) {
+      lm.addStdout(logger, childProcess.stdout, {
+        event: {
+          error: true,
+          data: true
+        } // colors: { data: s => s },
+
+      });
+      lm.addStderr(logger, childProcess.stderr);
+    }
+
+    if (logger === dtsLog) {
+      lm.addStdout(logger, childProcess.stdout, {
+        event: {
+          data: true,
+          error: true
+        },
+        colors: {
+          // tsc 的log信息无论是错误还是正确都是从 data event 中获取到的
+          data: s => s
+        }
+      });
+    }
+
+    if (logger === styleLog) {
+      lm.addStdout(logger, childProcess.stdout, {
+        event: {
+          error: true,
+          data: true
+        } // colors: { data: s => s },
+
+      });
+      lm.addStderr(logger, childProcess.stderr);
+    }
+
+    await childProcess;
+  }, {
+    concurrency
+  });
+};

package/dist/js/modern/features/build/build.js

@@ -0,0 +1,110 @@
+/* eslint-disable max-statements */
+import * as path from 'path';
+import * as os from 'os';
+import { Import } from '@modern-js/utils';
+const pMap = Import.lazy('p-map', require);
+const utils = Import.lazy('./utils', require);
+const execa = Import.lazy('execa', require);
+const lg = Import.lazy('./logger', require);
+const constants = Import.lazy('./constants', require);
+const core = Import.lazy('@modern-js/core', require);
+export const buildSourceCode = async (config, _) => {
+  const {
+    sourceDir,
+    enableTscCompiler
+  } = config;
+  const {
+    appDirectory
+  } = core.useAppContext().value;
+  const concurrency = os.cpus().length;
+  const srcRootDir = path.join(appDirectory, sourceDir);
+  const lm = new lg.LoggerManager();
+  const codeLog = lm.createLoggerText({
+    title: constants.runBabelCompilerTitle
+  });
+  const dtsLog = lm.createLoggerText({
+    title: constants.runTscTitle
+  });
+  const styleLog = lm.createLoggerText({
+    title: constants.runStyleCompilerTitle
+  });
+  const copyLog = lm.createLoggerText({
+    title: 'Copy Log:'
+  });
+  const initCodeMapper = utils.getCodeInitMapper(config);
+  const taskMapper = [...utils.getCodeMapper({
+    logger: codeLog,
+    taskPath: require.resolve("../../tasks/build-source-code"),
+    config,
+    willCompilerDirOrFile: sourceDir,
+    initMapper: initCodeMapper,
+    srcRootDir
+  }), ...(enableTscCompiler ? utils.getDtsMapper(config, dtsLog) : []), {
+    logger: styleLog,
+    taskPath: require.resolve("../../tasks/build-style")
+  }, {
+    logger: copyLog,
+    taskPath: require.resolve("../../tasks/copy-assets")
+  }];
+  lm.showCompiling();
+  await pMap(taskMapper, async ({
+    logger,
+    taskPath,
+    params
+  }) => {
+    const childProcess = execa.node(taskPath, params, {
+      stdio: 'pipe'
+    });
+
+    if (logger === codeLog || logger === copyLog) {
+      lm.addStdout(logger, childProcess.stdout, {
+        event: {
+          data: true,
+          error: true
+        }
+      });
+      lm.addStderr(logger, childProcess.stderr);
+    }
+
+    if (logger === dtsLog) {
+      lm.addStdout(dtsLog, childProcess.stdout, {
+        event: {
+          data: true,
+          error: true
+        }
+      });
+      lm.addStderr(dtsLog, childProcess.stderr);
+    }
+
+    if (logger === styleLog) {
+      lm.addStdout(logger, childProcess.stdout, {
+        event: {
+          data: true,
+          error: true
+        }
+      });
+      lm.addStderr(logger, childProcess.stderr);
+    }
+
+    await childProcess;
+  }, {
+    concurrency
+  });
+  lm.disappearCompiling();
+  enableTscCompiler && console.info(dtsLog.value);
+  console.info(codeLog.value);
+
+  if (styleLog.hasMessages()) {
+    console.info(styleLog.value);
+  }
+
+  if (copyLog.hasMessages()) {
+    console.info(copyLog.value);
+  }
+
+  if (dtsLog.hasErrorMessage || codeLog.hasErrorMessage || styleLog.hasErrorMessage || copyLog.hasErrorMessage) {
+    // eslint-disable-next-line no-process-exit
+    process.exit(1);
+  }
+};
+/* eslint-enable max-statements */

package/dist/js/modern/features/build/constants.js

@@ -0,0 +1,66 @@
+// Universal JS 的默认选择，三份构建产物，支持 Node.js，对现代浏览器有优化
+const universalJs = [{
+  type: 'module',
+  syntax: 'es5',
+  outDir: 'treeshaking'
+}, {
+  type: 'commonjs',
+  syntax: 'es6+',
+  outDir: 'node'
+}, {
+  type: 'module',
+  syntax: 'es6+',
+  outDir: 'modern'
+}]; // Universal JS 的优化选择，两份构建产物，对现代浏览器无优化
+
+const universalJsLite = [{
+  type: 'module',
+  syntax: 'es5',
+  outDir: 'treeshaking'
+}, {
+  type: 'commonjs',
+  syntax: 'es6+',
+  outDir: 'node',
+  copyDirs: ['modern']
+}]; // 纯前端代码的默认选择，两份构建产物
+
+const browserJs = [{
+  type: 'module',
+  syntax: 'es5',
+  outDir: 'treeshaking',
+  copyDirs: ['node']
+}, {
+  type: 'module',
+  syntax: 'es6+',
+  outDir: 'modern'
+}]; // 纯前端代码的优化选择，单份构建产物，对现代浏览器无优化
+
+const browserJsLite = [{
+  type: 'module',
+  syntax: 'es5',
+  outDir: 'treeshaking',
+  copyDirs: ['modern', 'node']
+}]; // 纯 Node.js 代码的默认选择，两份构建产物
+
+const nodeJs = [{
+  type: 'commonjs',
+  syntax: 'es6+',
+  outDir: 'node'
+}, {
+  type: 'module',
+  syntax: 'es6+',
+  outDir: 'modern'
+}];
+export const DEFAULT_PACKAGE_MODE = 'universal-js';
+export const PACKAGE_MODES = {
+  'universal-js': universalJs,
+  'universal-js-lite': universalJsLite,
+  'browser-js': browserJs,
+  'browser-js-lite': browserJsLite,
+  'node-js': nodeJs
+};
+export const runBabelCompilerTitle = 'Run babel compiler code log';
+export const runTscWatchTitle = 'Run `tsc -w` log';
+export const runTscTitle = 'Run `tsc` log';
+export const runStyleCompilerTitle = 'Run style compiler code log';
+export const clearFlag = '\x1Bc';

package/dist/js/modern/features/build/index.js

@@ -0,0 +1,29 @@
+import { Import } from '@modern-js/utils';
+const buildFeature = Import.lazy('./build', require);
+const buildWatchFeature = Import.lazy('./build-watch', require); // const bp: typeof import('./build-platform') = Import.lazy(
+//   './build-platform',
+//   require,
+// );
+
+export const build = async (config, modernConfig) => {
+  const {
+    enableWatchMode,
+    platform
+  } = config; // TODO: maybe need watch mode in build platform
+
+  if (typeof platform === 'boolean' && platform) {
+    // await bp.buildPlatform({ platform: 'all', isTsProject });
+    return;
+  }
+
+  if (typeof platform === 'string') {
+    // await bp.buildPlatform({ platform, isTsProject });
+    return;
+  }
+
+  if (enableWatchMode) {
+    await buildWatchFeature.buildInWatchMode(config, modernConfig);
+  } else {
+    await buildFeature.buildSourceCode(config, modernConfig);
+  }
+};

package/dist/js/modern/features/build/logger/index.js

@@ -0,0 +1,2 @@
+export * from "./logText";
+export * from "./loggerManager";

package/dist/js/modern/features/build/logger/logText.js

@@ -0,0 +1,63 @@
+import { chalk } from '@modern-js/utils';
+export const colors = {
+  title: chalk.rgb(218, 152, 92)
+};
+export const clearFlag = '\x1Bc';
+export const logTemplate = (title, messageStack, {
+  noBottomBorder: _noBottomBorder = false,
+  bottomBorderText: _bottomBorderText = '',
+  noLeftBorder: _noLeftBorder = false,
+  leftBorder: _leftBorder = '',
+  contentColor: _contentColor = s => s
+} = {}) => {
+  const maxLength = Infinity; // TODO: 考虑后面是否提供该参数
+
+  const leftBorderFlag = _noLeftBorder ? '' : _leftBorder;
+  const messageFragments = messageStack.map(p => {
+    p.trim();
+    return `${leftBorderFlag}${p.replace(clearFlag, '')}`;
+  }) // 移除 clearFlag
+  .filter(s => s !== leftBorderFlag) // 过滤空字符串
+  .slice(0, maxLength); // 控制长度
+
+  const template = `${colors.title(title)}:
+${_contentColor(messageFragments.join(''))}${_noBottomBorder ? '' : `\n${_bottomBorderText}`}`;
+  return template;
+};
+// 处理Log内容如何展示
+export class LoggerText {
+  constructor(option) {
+    this.messages = void 0;
+    this.hasErrorMessage = void 0;
+    this.option = void 0;
+    this.messages = [];
+    this.option = option;
+    this.hasErrorMessage = false;
+  }
+
+  append(message) {
+    if (message.includes(clearFlag)) {
+      this.messages = [];
+    }
+
+    this.messages.push(message);
+  }
+
+  errorHappen() {
+    this.hasErrorMessage = true;
+  }
+
+  hasMessages() {
+    return this.messages.length > 0;
+  }
+
+  get value() {
+    const {
+      title,
+      contentConfig
+    } = this.option;
+    const messages = [...new Set(this.messages)];
+    return logTemplate(title, messages, contentConfig);
+  }
+
+}