@modern-js/module-tools 1.5.5 → 1.6.0-alpha.0

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

@@ -0,0 +1,266 @@
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 * as path from 'path';
+import { fs, glob, Import, watch as watcher, WatchChangeType, chalk, globby } from '@modern-js/utils';
+import { InternalBuildError } from "../error";
+import { watchSectionTitle, SectionTitleStatus, getPostcssOption } from "../utils";
+const compiler = Import.lazy('@modern-js/style-compiler', require);
+export class StyleBuildError extends Error {
+  constructor(message, opts) {
+    super(message);
+
+    _defineProperty(this, "summary", void 0);
+
+    _defineProperty(this, "details", void 0);
+
+    Error.captureStackTrace(this, this.constructor);
+    this.summary = opts === null || opts === void 0 ? void 0 : opts.summary;
+    this.details = opts === null || opts === void 0 ? void 0 : opts.details;
+  }
+
+  toString() {
+    return this.formatError().join('\n');
+  }
+
+  formatError() {
+    const msgs = [];
+    const {
+      summary,
+      details = []
+    } = this;
+    msgs.push(chalk.red.bold(summary));
+
+    for (const detail of details) {
+      if (detail.error) {
+        msgs.push(detail.error);
+        msgs.push('\n');
+      }
+    }
+
+    return msgs;
+  }
+
+}
+/**
+ * when modern build, only throw Error or silent
+ * @param result
+ * @param context
+ */
+
+const generatorFileOrLogError = (result, context) => {
+  if (result.code === 0) {
+    for (const file of result.dists) {
+      fs.ensureFileSync(file.filename);
+      fs.writeFileSync(file.filename, file.content);
+    }
+  } else {
+    // for (const file of result.errors) {
+    //   console.error(file.error);
+    // }
+    const styleError = new StyleBuildError('bundleless failed', {
+      summary: 'Style Compiler Failed',
+      details: result.errors
+    });
+    throw new InternalBuildError(styleError, _objectSpread({
+      buildType: 'bundleless'
+    }, context));
+  }
+};
+
+const generatorFileAndLog = (result, titleText) => {
+  if (result.code === 0) {
+    for (const file of result.dists) {
+      fs.ensureFileSync(file.filename);
+      fs.writeFileSync(file.filename, file.content);
+    }
+
+    console.info(watchSectionTitle(titleText, SectionTitleStatus.Success));
+  } else {
+    console.info(watchSectionTitle(titleText, SectionTitleStatus.Fail));
+
+    for (const file of result.errors) {
+      console.error(file.error);
+    }
+  }
+};
+
+const copyOriginStyleFiles = ({
+  targetDir,
+  outputDir
+}) => {
+  const styleFiles = glob.sync(`${targetDir}/**/*.{css,sass,scss,less}`);
+
+  if (styleFiles.length > 0) {
+    fs.ensureDirSync(outputDir);
+  }
+
+  for (const styleFile of styleFiles) {
+    const file = path.relative(targetDir, styleFile);
+    fs.ensureDirSync(path.dirname(path.join(outputDir, file)));
+    fs.copyFileSync(styleFile, path.join(outputDir, file));
+  }
+};
+
+export const runBuild = async option => {
+  const {
+    watch,
+    appDirectory,
+    srcDir,
+    outDir,
+    lessOption,
+    sassOption,
+    postcssOption
+  } = option;
+
+  if (watch) {
+    const srcStyleEmitter = compiler.styleCompiler({
+      watch: true,
+      projectDir: appDirectory,
+      stylesDir: srcDir,
+      outDir,
+      enableVirtualDist: true,
+      compilerOption: {
+        less: lessOption,
+        sass: sassOption,
+        postcss: postcssOption
+      }
+    });
+    return srcStyleEmitter;
+  } else {
+    const srcStyleResult = await compiler.styleCompiler({
+      projectDir: appDirectory,
+      stylesDir: srcDir,
+      outDir,
+      enableVirtualDist: true,
+      compilerOption: {
+        less: lessOption,
+        sass: sassOption,
+        postcss: postcssOption
+      }
+    });
+    return srcStyleResult;
+  }
+};
+export const styleFileSuffix = ['css', 'less', 'sass', 'scss'];
+export const haveNotAnyStyles = async sourceDir => {
+  const files = await globby(`${sourceDir}/**/*.{${styleFileSuffix.join(',')}}`);
+  return files.length === 0;
+};
+export const buildStyle = async (api, config) => {
+  var _style$path;
+
+  const modernConfig = api.useResolvedConfigContext();
+  const {
+    appDirectory
+  } = api.useAppContext();
+  const {
+    watch = false,
+    outputPath,
+    bundlelessOptions
+  } = config;
+  const {
+    style,
+    sourceDir
+  } = bundlelessOptions;
+  const {
+    output: {
+      path: distPath = 'dist'
+    }
+  } = modernConfig;
+  const titleText = `[Bundleless:Style:${sourceDir}]`;
+
+  if ((await haveNotAnyStyles(sourceDir)) || style.compileMode === false) {
+    return;
+  }
+
+  const runner = api.useHookRunners();
+  const lessOption = await runner.moduleLessConfig({
+    modernConfig
+  }, {
+    onLast: async _ => undefined
+  });
+  const sassOption = await runner.moduleSassConfig({
+    modernConfig
+  }, {
+    onLast: async _ => undefined
+  });
+  const tailwindPlugin = await runner.moduleTailwindConfig({
+    modernConfig
+  }, {
+    onLast: async _ => undefined
+  });
+  const postcssOption = getPostcssOption(appDirectory, modernConfig);
+
+  if (tailwindPlugin) {
+    var _postcssOption$plugin;
+
+    (_postcssOption$plugin = postcssOption.plugins) === null || _postcssOption$plugin === void 0 ? void 0 : _postcssOption$plugin.push(tailwindPlugin);
+  }
+
+  const srcDir = path.resolve(appDirectory, sourceDir);
+  const outputDirToSrc = path.join(appDirectory, distPath, outputPath, (_style$path = style.path) !== null && _style$path !== void 0 ? _style$path : './');
+
+  if (style.compileMode === 'all' || style.compileMode === 'only-compiled-code') {
+    const result = await runBuild({
+      appDirectory,
+      srcDir,
+      watch,
+      outDir: outputDirToSrc,
+      lessOption,
+      sassOption,
+      postcssOption
+    });
+
+    if (watch) {
+      const emitter = result;
+      emitter.on(compiler.BuildWatchEvent.firstCompiler, result => {
+        generatorFileAndLog(result, titleText);
+      });
+      emitter.on(compiler.BuildWatchEvent.watchingCompiler, srcStyleResult => {
+        generatorFileAndLog(srcStyleResult, titleText);
+      });
+      await emitter.watch();
+    } else {
+      const srcStyleResult = result;
+      generatorFileOrLogError(srcStyleResult, {
+        target: config.target,
+        format: config.format
+      });
+    }
+  }
+
+  if (style.compileMode === 'all' || style.compileMode === 'only-source-code') {
+    if (watch) {
+      copyOriginStyleFiles({
+        targetDir: srcDir,
+        outputDir: outputDirToSrc
+      });
+      console.info(watchSectionTitle(titleText, SectionTitleStatus.Success));
+      watcher(`${srcDir}/**/*.{css,less,sass,scss}`, ({
+        changeType,
+        changedFilePath
+      }) => {
+        if (changeType === WatchChangeType.UNLINK) {
+          const removeFile = path.normalize(`${outputDirToSrc}/${path.relative(srcDir, changedFilePath)}`);
+          fs.removeSync(removeFile);
+        } else {
+          copyOriginStyleFiles({
+            targetDir: srcDir,
+            outputDir: outputDirToSrc
+          });
+        }
+
+        console.info(watchSectionTitle(titleText, SectionTitleStatus.Success));
+      });
+    } else {
+      copyOriginStyleFiles({
+        targetDir: srcDir,
+        outputDir: outputDirToSrc
+      });
+    }
+  }
+};

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

@@ -1,66 +1,101 @@
-// Universal JS 的默认选择，三份构建产物，支持 Node.js，对现代浏览器有优化
-const universalJs = [{
-  type: 'module',
-  syntax: 'es5',
-  outDir: 'treeshaking'
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 { chalk } from '@modern-js/utils';
+export const clearFlag = '\x1Bc';
+export const buildingText = chalk.blue('Building...');
+export const buildSuccessText = chalk.green('Build succeed');
+export const buildFailText = chalk.red('Build Failed:');
+export const targets = ['es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'];
+export const npmLibraryPresetConfig = [{
+  format: 'cjs',
+  target: 'es6',
+  buildType: 'bundle',
+  outputPath: './lib'
 }, {
-  type: 'commonjs',
-  syntax: 'es6+',
-  outDir: 'node'
+  format: 'esm',
+  target: 'es6',
+  buildType: 'bundle',
+  outputPath: './es'
 }, {
-  type: 'module',
-  syntax: 'es6+',
-  outDir: 'modern'
-}]; // Universal JS 的优化选择，两份构建产物，对现代浏览器无优化
-
-const universalJsLite = [{
-  type: 'module',
-  syntax: 'es5',
-  outDir: 'treeshaking'
+  buildType: 'bundle',
+  outputPath: './types',
+  enableDts: true,
+  dtsOnly: true
+}];
+export const npmLibraryWithUmdPresetConfig = [{
+  format: 'cjs',
+  target: 'es6',
+  buildType: 'bundle',
+  outputPath: './lib'
 }, {
-  type: 'commonjs',
-  syntax: 'es6+',
-  outDir: 'node',
-  copyDirs: ['modern']
-}]; // 纯前端代码的默认选择，两份构建产物
-
-const browserJs = [{
-  type: 'module',
-  syntax: 'es5',
-  outDir: 'treeshaking',
-  copyDirs: ['node']
+  format: 'esm',
+  target: 'es6',
+  buildType: 'bundle',
+  outputPath: './es'
 }, {
-  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'
+  format: 'umd',
+  target: 'es6',
+  buildType: 'bundle',
+  outputPath: './umd'
+}, {
+  buildType: 'bundle',
+  outputPath: './types',
+  enableDts: true,
+  dtsOnly: true
+}];
+export const npmComponentPresetConfig = [{
+  format: 'cjs',
+  target: 'es6',
+  buildType: 'bundleless',
+  outputPath: './lib'
+}, {
+  format: 'esm',
+  target: 'es6',
+  buildType: 'bundleless',
+  outputPath: './es'
+}, {
+  buildType: 'bundleless',
+  outputPath: './types',
+  enableDts: true,
+  dtsOnly: true
+}];
+export const npmComponentWithUmdPresetConfig = [{
+  format: 'cjs',
+  target: 'es6',
+  buildType: 'bundleless',
+  outputPath: './lib'
+}, {
+  format: 'esm',
+  target: 'es6',
+  buildType: 'bundleless',
+  outputPath: './es'
+}, {
+  format: 'umd',
+  target: 'es6',
+  buildType: 'bundle',
+  outputPath: './umd'
 }, {
-  type: 'module',
-  syntax: 'es6+',
-  outDir: 'modern'
+  buildType: 'bundleless',
+  outputPath: './types',
+  enableDts: true,
+  dtsOnly: true
 }];
-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 unPresetConfigs = {
+  'npm-library': npmLibraryPresetConfig,
+  'npm-library-with-umd': npmLibraryWithUmdPresetConfig,
+  'npm-component': npmComponentPresetConfig,
+  'npm-component-with-umd': npmComponentWithUmdPresetConfig
 };
-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';
+export const unPresets = Object.keys(unPresetConfigs);
+export const unPresetWithTargetConfigs = unPresets.reduce((o, presetStr) => {
+  const rets = targets.map(target => [`${presetStr}-${target}`.toLowerCase(), unPresetConfigs[presetStr].map(config => {
+    return _objectSpread(_objectSpread({}, config), {}, {
+      target
+    });
+  })]);
+  return _objectSpread(_objectSpread({}, o), Object.fromEntries(rets));
+}, {});

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

@@ -0,0 +1,150 @@
+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 { chalk } from '@modern-js/utils';
+export const padSpaceWith = (str, targetL, opts = {}) => {
+  const {
+    endStr = '|',
+    style
+  } = opts;
+  const l = str.length;
+  const endStrL = endStr.length;
+  const resetL = targetL - l - endStrL; // str is 'aaa', targetL is 4, result is 'aaa|'
+
+  if (resetL === 0) {
+    return (style ? style(str) : str) + endStr;
+  } // str is 'aaa', targetL is 5, result is 'aaa |'
+
+
+  if (resetL > 0) {
+    const padStr = str.padEnd(targetL - 1, ' ');
+
+    if (style) {
+      return style(str) + padStr.replace(str, '') + endStr;
+    }
+
+    return padStr + endStr;
+  }
+
+  return str;
+};
+export class InternalBuildError extends Error {
+  constructor(e, opts) {
+    super(e.message);
+
+    _defineProperty(this, "buildType", void 0);
+
+    _defineProperty(this, "target", void 0);
+
+    _defineProperty(this, "format", void 0);
+
+    _defineProperty(this, "e", void 0);
+
+    Error.captureStackTrace(this, this.constructor);
+    this.e = e;
+    this.buildType = opts.buildType;
+    this.target = opts.target;
+    this.format = opts.format;
+  }
+
+  toString() {
+    return this.formatError().join('\n');
+  }
+
+  formatError() {
+    const msgs = [];
+    const {
+      e,
+      buildType,
+      target,
+      format
+    } = this;
+    const textL = 25;
+    const title = `│ ${padSpaceWith(`${buildType} failed:`, textL - 2, {
+      style: chalk.red.underline,
+      endStr: '│'
+    })}`;
+    const formatMsg = padSpaceWith(`│  - format is "${format}"`, textL, {
+      endStr: '│'
+    });
+    const targetMsg = padSpaceWith(`│  - target is "${target}"`, textL, {
+      endStr: '│'
+    });
+    const startLine = padSpaceWith('╭'.padEnd(textL - 1, '─'), textL, {
+      endStr: '╮'
+    });
+    const endLine = padSpaceWith('╰'.padEnd(textL - 1, '─'), textL, {
+      endStr: '╯'
+    });
+    msgs.push(startLine, title, formatMsg, targetMsg, endLine, chalk.blue.bold.underline(`\nDetailed Information: `));
+    msgs.push(e.toString());
+    msgs.push(e.stack || '');
+    return msgs;
+  }
+
+}
+export class InternalDTSError extends Error {
+  constructor(e, opts) {
+    super(e.message);
+
+    _defineProperty(this, "buildType", void 0);
+
+    _defineProperty(this, "e", void 0);
+
+    Error.captureStackTrace(this, this.constructor);
+    this.e = e;
+    this.buildType = opts.buildType;
+  }
+
+  toString() {
+    return this.formatError().join('\n');
+  }
+
+  formatError() {
+    const msgs = [];
+    const {
+      e,
+      buildType
+    } = this;
+    msgs.push(chalk.red.bold(`${buildType} DTS failed:`));
+
+    if (isExecaError(e)) {
+      /**
+       * `shortMeessage` content like:
+       * 'Command failed with exit code 2: /Users/github/modern.js/playground/module/node_modules/.bin/tsc -p /Users/github/modern.js/playground/module/node_modules/tsconfig.temp.json --pretty'
+       * Don`t need it.
+       */
+      if (e.stack) {
+        var _e$stack;
+
+        msgs.push((_e$stack = e.stack) === null || _e$stack === void 0 ? void 0 : _e$stack.replace(`${e.name}: ${e.shortMessage}`, ''));
+      }
+    } else {
+      msgs.push(e.stack);
+    }
+
+    return msgs;
+  }
+
+}
+export class ModuleBuildError extends Error {
+  constructor(e) {
+    super(`\n\n${e}`);
+    Error.captureStackTrace(this, this.constructor);
+    this.name = 'ModuleBuildError';
+  }
+
+}
+export const isInternalError = e => {
+  if (e instanceof InternalBuildError || e instanceof InternalDTSError) {
+    return true;
+  }
+
+  return false;
+};
+export const isExecaError = e => {
+  if (e.stdout) {
+    return true;
+  }
+
+  return false;
+};