@modern-js/core 1.0.0-alpha.3

package/src/config/defaults.ts

@@ -0,0 +1,104 @@
+import { OutputConfig, ServerConfig, SourceConfig } from '.';
+
+const sourceDefaults: SourceConfig = {
+  entries: undefined,
+  disableDefaultEntries: false,
+  entriesDir: './src',
+  configDir: './config',
+  apiDir: './api',
+  envVars: [],
+  globalVars: undefined,
+  alias: undefined,
+  moduleScopes: undefined,
+  include: [],
+};
+
+const outputDefaults: OutputConfig = {
+  assetPrefix: '/',
+  htmlPath: 'html',
+  jsPath: 'static/js',
+  cssPath: 'static/css',
+  mediaPath: 'static/media',
+  path: 'dist',
+  title: '',
+  titleByEntries: undefined,
+  meta: {
+    charset: { charset: 'utf-8' },
+    viewport:
+      'width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
+    'http-equiv': { 'http-equiv': 'x-ua-compatible', content: 'ie=edge' },
+    renderer: 'webkit',
+    layoutmode: 'standard',
+    imagemode: 'force',
+    'wap-font-scale': 'no',
+    'format-detection': 'telephone=no',
+  },
+  metaByEntries: undefined,
+  inject: 'head',
+  injectByEntries: undefined,
+  mountId: 'root',
+  favicon: '',
+  faviconByEntries: undefined,
+  copy: undefined,
+  scriptExt: undefined,
+  disableHtmlFolder: false,
+  disableCssModuleExtension: false,
+  disableCssExtract: false,
+  enableCssModuleTSDeclaration: false,
+  disableMinimize: false,
+  enableInlineStyles: false,
+  enableInlineScripts: false,
+  disableSourceMap: false,
+  disableInlineRuntimeChunk: false,
+  disableAssetsCache: false,
+  enableLatestDecorators: false,
+  polyfill: 'entry',
+  dataUriLimit: 10000,
+  templateParameters: {},
+  templateParametersByEntries: undefined,
+  cssModuleLocalIdentName: '[name]__[local]--[hash:base64:5]',
+  enableModernMode: false,
+  federation: undefined,
+  disableNodePolyfill: false,
+  enableTsLoader: false,
+};
+
+const serverDefaults: ServerConfig = {
+  routes: undefined,
+  publicRoutes: undefined,
+  ssr: undefined,
+  ssrByEntries: undefined,
+  baseUrl: '/',
+  port: 8080,
+};
+
+const devDefaults = { assetPrefix: false };
+
+const deployDefaults = {
+  microFrontend: {
+    enableHtmlEntry: false
+  },
+  domain: '',
+  domainByEntries: undefined,
+};
+
+const toolsDefaults = {
+  webpack: undefined,
+  babel: undefined,
+  postcss: undefined,
+  autoprefixer: undefined,
+  lodash: undefined,
+  devServer: undefined,
+  tsLoader: undefined,
+  terser: undefined,
+  minifyCss: undefined,
+};
+
+export const defaults = {
+  source: sourceDefaults,
+  output: outputDefaults,
+  server: serverDefaults,
+  dev: devDefaults,
+  deploy: deployDefaults,
+  tools: toolsDefaults,
+};

package/src/config/index.ts

@@ -0,0 +1,296 @@
+import { loadConfig } from '@modern-js/load-config';
+import Ajv, { ErrorObject } from 'ajv';
+import ajvKeywords from 'ajv-keywords';
+import logger from 'signale';
+import {
+  createDebugger,
+  getPort,
+  isDev,
+  MetaOptions,
+  PLUGIN_SCHEMAS,
+  chalk,
+} from '@modern-js/utils';
+import mergeWith from 'lodash.mergewith';
+import betterAjvErrors from 'better-ajv-errors';
+import { codeFrameColumns } from '@babel/code-frame';
+import { PluginConfig } from '../loadPlugins';
+import { repeatKeyWarning } from '../utils/repeatKeyWarning';
+import { defaults } from './defaults';
+import { mergeConfig, NormalizedConfig } from './mergeConfig';
+import { patchSchema, PluginValidateSchema } from './schema';
+
+const debug = createDebugger('resolve-config');
+
+export { defaults as defaultsConfig };
+
+export interface SourceConfig {
+  entries?: Record<
+    string,
+    | string
+    | {
+        entry: string;
+        enableFileSystemRoutes?: boolean;
+        disableMount?: boolean;
+      }
+  >;
+  disableDefaultEntries?: boolean;
+  entriesDir?: string;
+  configDir?: string;
+  apiDir?: string;
+  envVars?: Array<string>;
+  globalVars?: Record<string, string>;
+  alias?:
+    | Record<string, string>
+    | ((aliases: Record<string, string>) => Record<string, unknown>);
+  moduleScopes?:
+    | Array<string | RegExp>
+    | ((scopes: Array<string | RegExp>) => Array<string | RegExp>);
+  include?: Array<string | RegExp>;
+}
+
+export interface OutputConfig {
+  assetPrefix?: string;
+  htmlPath?: string;
+  jsPath?: string;
+  cssPath?: string;
+  mediaPath?: string;
+  path?: string;
+  title?: string;
+  titleByEntries?: Record<string, string>;
+  meta?: MetaOptions;
+  metaByEntries?: Record<string, MetaOptions>;
+  inject?: 'body' | 'head' | boolean;
+  injectByEntries?: Record<string, 'body' | 'head' | boolean>;
+  mountId?: string;
+  favicon?: string;
+  faviconByEntries?: Record<string, string | undefined>;
+  copy?: Record<string, unknown>;
+  scriptExt?: Record<string, unknown>;
+  disableHtmlFolder?: boolean;
+  disableCssModuleExtension?: boolean;
+  disableCssExtract?: boolean;
+  enableCssModuleTSDeclaration?: boolean;
+  disableMinimize?: boolean;
+  enableInlineStyles?: boolean;
+  enableInlineScripts?: boolean;
+  disableSourceMap?: boolean;
+  disableInlineRuntimeChunk?: boolean;
+  disableAssetsCache?: boolean;
+  enableLatestDecorators?: boolean;
+  polyfill?: 'off' | 'usage' | 'entry' | 'ua';
+  dataUriLimit?: number;
+  templateParameters?: Record<string, unknown>;
+  templateParametersByEntries?: Record<
+    string,
+    Record<string, unknown> | undefined
+  >;
+  cssModuleLocalIdentName?: string;
+  enableModernMode?: boolean;
+  federation?: boolean;
+  disableNodePolyfill?: boolean;
+  enableTsLoader?: boolean;
+}
+
+export interface ServerConfig {
+  routes?: Record<
+    string,
+    | string
+    | {
+        route: string | string[];
+        disableSpa?: boolean;
+      }
+  >;
+  publicRoutes?: { [filepath: string]: string };
+  ssr?: boolean | Record<string, unknown>;
+  ssrByEntries?: Record<string, boolean | Record<string, unknown>>;
+  baseUrl?: string | Array<string>;
+  port?: number;
+  logger?: Record<string, string>;
+  measure?: Record<string, string>;
+}
+
+export interface DevConfig {
+  assetPrefix?: string | boolean;
+}
+
+export interface DeployConfig {
+  microFrontend?: {
+    enableHtmlEntry?: boolean;
+  };
+  domain?: string | Array<string>;
+  domainByEntries?: Record<string, string | Array<string>>;
+}
+
+type ConfigFunction =
+  | Record<string, unknown>
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  | ((config: Record<string, unknown>) => Record<string, unknown> | void);
+export interface ToolsConfig {
+  webpack?: ConfigFunction;
+  babel?: ConfigFunction;
+  autoprefixer?: ConfigFunction;
+  postcss?: ConfigFunction;
+  lodash?: ConfigFunction;
+  devServer?: Record<string, unknown>;
+  tsLoader?: ConfigFunction;
+  terser?: ConfigFunction;
+  minifyCss?: ConfigFunction;
+  esbuild?: Record<string, unknown>;
+}
+
+export type RuntimeConfig = Record<string, any>;
+
+export interface RuntimeByEntriesConfig {
+  [name: string]: RuntimeConfig;
+}
+
+export interface UserConfig {
+  source?: SourceConfig;
+  output?: OutputConfig;
+  server?: ServerConfig;
+  dev?: DevConfig;
+  deploy?: DeployConfig;
+  tools?: ToolsConfig;
+  plugins?: PluginConfig;
+  runtime?: RuntimeConfig;
+  runtimeByEntries?: RuntimeByEntriesConfig;
+}
+
+export type ConfigParam =
+  | UserConfig
+  | Promise<UserConfig>
+  | ((env: any) => UserConfig | Promise<UserConfig>);
+
+export interface LoadedConfig {
+  config: UserConfig;
+  filePath: string | false;
+  dependencies: string[];
+  pkgConfig: UserConfig;
+  jsConfig: UserConfig;
+}
+
+export const defineConfig = (config: ConfigParam): ConfigParam => config;
+
+export const loadUserConfig = async (
+  appDirectory: string,
+  filePath?: string,
+): Promise<LoadedConfig> => {
+  const loaded = loadConfig<ConfigParam>(appDirectory, filePath);
+
+  const config = !loaded
+    ? {}
+    : await (typeof loaded.config === 'function'
+        ? loaded.config(0)
+        : loaded.config);
+
+  return {
+    config: mergeWith({}, config || {}, loaded?.pkgConfig || {}),
+    jsConfig: config || {},
+    pkgConfig: (loaded?.pkgConfig || {}) as UserConfig,
+    filePath: loaded?.path,
+    dependencies: loaded?.dependencies || [],
+  };
+};
+
+const showAdditionalPropertiesError = (error: ErrorObject) => {
+  if (
+    error.keyword === 'additionalProperties' &&
+    error.instancePath &&
+    error.params.additionalProperty
+  ) {
+    const target = `${error.instancePath.substr(1)}.${
+      error.params.additionalProperty
+    }`;
+
+    const name = Object.keys(PLUGIN_SCHEMAS).find(key =>
+      (PLUGIN_SCHEMAS as Record<string, any>)[key].some(
+        (schemaItem: any) => schemaItem.target === target,
+      ),
+    );
+
+    if (name) {
+      logger.warn(
+        `The configuration of ${chalk.bold(
+          target,
+        )} is provided by plugin ${chalk.bold(name)}. Please use ${chalk.bold(
+          'yarn new',
+        )} to enable the corresponding capability.\n`,
+      );
+    }
+  }
+};
+
+/* eslint-disable max-statements, max-params */
+export const resolveConfig = async (
+  loaded: LoadedConfig,
+  configs: UserConfig[],
+  schemas: PluginValidateSchema[],
+  isRestart: boolean,
+  argv: string[],
+): Promise<NormalizedConfig> => {
+  const { config: userConfig, jsConfig, pkgConfig } = loaded;
+
+  const ajv = new Ajv({ $data: true, strict: false });
+
+  ajvKeywords(ajv);
+
+  const validateSchema = patchSchema(schemas);
+
+  const validate = ajv.compile(validateSchema);
+
+  repeatKeyWarning(validateSchema, jsConfig, pkgConfig);
+
+  // validate user config.
+  const valid = validate(userConfig);
+
+  if (!valid && validate.errors?.length) {
+    showAdditionalPropertiesError(validate?.errors[0]);
+    const errors = betterAjvErrors(
+      validateSchema,
+      userConfig,
+      validate.errors?.map(e => ({
+        ...e,
+        dataPath: e.instancePath,
+      })),
+      {
+        format: 'js',
+        indent: 2,
+      },
+    );
+
+    logger.log(
+      codeFrameColumns(
+        JSON.stringify(userConfig, null, 2),
+        {
+          start: errors?.[0].start as any,
+          end: errors?.[0].end as any,
+        },
+        {
+          highlightCode: true,
+          message: errors?.[0].error,
+        },
+      ),
+    );
+    throw new Error(`Validate configuration error`);
+  }
+
+  // validate config from plugins.
+  for (const config of configs) {
+    if (!validate(config)) {
+      logger.error(validate.errors);
+      throw new Error(`Validate configuration error.`);
+    }
+  }
+  const resolved = mergeConfig([defaults, ...configs, userConfig]);
+
+  resolved._raw = loaded.config;
+
+  if (isDev() && argv[0] === 'dev' && !isRestart) {
+    resolved.server.port = await getPort(resolved.server.port!);
+  }
+
+  debug('resolved %o', resolved);
+
+  return resolved;
+};
+/* eslint-enable max-statements, max-params */

package/src/config/mergeConfig.ts

@@ -0,0 +1,68 @@
+import mergeWith from 'lodash.mergewith';
+import { isFunction } from '@modern-js/utils';
+import { UserConfig, SourceConfig, ToolsConfig } from '.';
+
+export interface NormalizedSourceConfig
+  extends Omit<SourceConfig, 'alias' | 'moduleScopes'> {
+  alias: SourceConfig['alias'] | Array<SourceConfig['alias']>;
+  moduleScopes:
+    | SourceConfig['moduleScopes']
+    | Array<SourceConfig['moduleScopes']>;
+}
+
+export interface NormalizedToolsConfig
+  extends Omit<
+    ToolsConfig,
+    | 'webpack'
+    | 'babel'
+    | 'postcss'
+    | 'autoprefixer'
+    | 'lodash'
+    | 'tsLoader'
+    | 'terser'
+    | 'minifyCss'
+    | 'esbuild'
+  > {
+  webpack: ToolsConfig['webpack'] | Array<NonNullable<ToolsConfig['webpack']>>;
+  babel: ToolsConfig['babel'] | Array<NonNullable<ToolsConfig['babel']>>;
+  postcss: ToolsConfig['postcss'] | Array<NonNullable<ToolsConfig['postcss']>>;
+  autoprefixer:
+    | ToolsConfig['autoprefixer']
+    | Array<NonNullable<ToolsConfig['autoprefixer']>>;
+  lodash: ToolsConfig['lodash'] | Array<ToolsConfig['lodash']>;
+  tsLoader:
+    | ToolsConfig['tsLoader']
+    | Array<NonNullable<ToolsConfig['tsLoader']>>;
+  terser: ToolsConfig['terser'] | Array<NonNullable<ToolsConfig['terser']>>;
+  minifyCss:
+    | ToolsConfig['minifyCss']
+    | Array<NonNullable<ToolsConfig['minifyCss']>>;
+  esbuild: ToolsConfig['esbuild'] | Array<NonNullable<ToolsConfig['esbuild']>>;
+}
+export interface NormalizedConfig
+  extends Omit<Required<UserConfig>, 'source' | 'tools'> {
+  source: NormalizedSourceConfig;
+  tools: NormalizedToolsConfig;
+  _raw: UserConfig;
+}
+
+/**
+ * merge configuration from  modern.config.js and plugins.
+ *
+ * @param configs - Configuration from modern.config.ts or plugin's config hook.
+ * @returns - normalized user config.
+ */
+export const mergeConfig = (
+  configs: Array<UserConfig | NormalizedConfig>,
+): NormalizedConfig =>
+  mergeWith({}, ...configs, (target: any, source: any) => {
+    if (Array.isArray(target) && Array.isArray(source)) {
+      return [...target, ...source];
+    }
+    if (isFunction(source)) {
+      return Array.isArray(target)
+        ? [...target, source]
+        : [target, source].filter(Boolean);
+    }
+    return undefined;
+  });

package/src/config/schema/deploy.ts

@@ -0,0 +1,23 @@
+import { ENTRY_NAME_PATTERN } from '@modern-js/utils';
+
+export const deploy = {
+  type: 'object',
+  properties: {
+    microFrontend: {
+      type: 'object',
+      dependencies: {
+        enableHtmlEntry: { properties: { enableLegacy: { enum: [false] } } },
+      },
+      properties: {
+        enableHtmlEntry: { type: 'boolean' },
+      },
+    },
+    domain: { type: ['array', 'string'] },
+    domainByEntries: {
+      type: 'object',
+      patternProperties: {
+        [ENTRY_NAME_PATTERN]: { type: ['array', 'string'] },
+      },
+    },
+  },
+};

package/src/config/schema/index.ts

@@ -0,0 +1,111 @@
+import { JSONSchemaType } from 'ajv';
+import { isObject, createDebugger } from '@modern-js/utils';
+import cloneDeep from 'lodash.clonedeep';
+import { source } from './source';
+import { output } from './output';
+import { server } from './server';
+import { deploy } from './deploy';
+import { tools } from './tools';
+
+const debug = createDebugger('validate-schema');
+
+const plugins = {
+  type: 'array',
+  additionalProperties: false,
+};
+
+const dev = {
+  type: 'object',
+  properties: { assetPrefix: { type: ['boolean', 'string'] } },
+  additionalProperties: false,
+};
+export interface PluginValidateSchema {
+  target: string;
+  schema: JSONSchemaType<any>;
+}
+
+export const patchSchema = (
+  pluginSchemas: Array<PluginValidateSchema | PluginValidateSchema[]>,
+) => {
+  const finalSchema = cloneDeep({
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+      source,
+      output,
+      server,
+      deploy,
+      plugins,
+      dev,
+      tools,
+    },
+  });
+
+  const findTargetNode = (props: string[]) => {
+    let node = finalSchema.properties;
+
+    for (const prop of props) {
+      node = node[prop as keyof typeof node] as any;
+      if (!node || !isObject(node)) {
+        throw new Error(`add schema ${props.join('.')} error`);
+      }
+      (node as any).properties = (node as any).hasOwnProperty('properties')
+        ? (node as any).properties
+        : {};
+
+      node = (node as any).properties;
+    }
+    return node;
+  };
+
+  const finalPluginSchemas: PluginValidateSchema[] = [];
+  pluginSchemas.forEach(item => {
+    if (Array.isArray(item)) {
+      finalPluginSchemas.push(...item);
+    } else {
+      finalPluginSchemas.push(item);
+    }
+  });
+  for (const { target, schema } of finalPluginSchemas) {
+    if (!target) {
+      throw new Error(`should return target property in plugin schema.`);
+    }
+    const props = target.split('.');
+
+    const mountProperty = props.pop();
+
+    const targetNode = findTargetNode(props);
+
+    if (targetNode.hasOwnProperty(mountProperty!)) {
+      throw new Error(`${target} already exists in current validate schema`);
+    }
+
+    (targetNode as any)[mountProperty as string] = cloneDeep(schema);
+  }
+
+  debug(`final validate schema: %o`, finalSchema);
+
+  return finalSchema;
+};
+
+export const traverseSchema = (schema: ReturnType<typeof patchSchema>) => {
+  const keys: string[] = [];
+
+  const traverse = (
+    { properties }: { properties: any },
+    old: string[] = [],
+  ) => {
+    for (const key of Object.keys(properties)) {
+      const current = [...old, key];
+      if (properties[key].type === 'object' && properties[key].properties) {
+        traverse(properties[key], current);
+      } else {
+        keys.push(current.join('.'));
+      }
+    }
+  };
+
+  traverse(schema);
+
+  return keys;
+};

package/src/config/schema/output.ts

@@ -0,0 +1,66 @@
+import { ENTRY_NAME_PATTERN } from '@modern-js/utils';
+
+export const output = {
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    assetPrefix: { type: 'string' },
+    path: { type: 'string' },
+    jsPath: { type: 'string' },
+    cssPath: { type: 'string' },
+    htmlPath: { type: 'string' },
+    mediaPath: { type: 'string' },
+    mountId: { type: 'string' },
+    favicon: { type: 'string' },
+    faviconByEntries: {
+      type: 'object',
+      patternProperties: { [ENTRY_NAME_PATTERN]: { type: 'string' } },
+    },
+    title: { type: 'string' },
+    titleByEntries: {
+      type: 'object',
+      patternProperties: { [ENTRY_NAME_PATTERN]: { type: 'string' } },
+    },
+    meta: { type: 'object' },
+    metaByEntries: {
+      type: 'object',
+      patternProperties: { [ENTRY_NAME_PATTERN]: { type: 'object' } },
+    },
+    inject: { enum: [true, 'head', 'body', false] },
+    injectByEntries: {
+      type: 'object',
+      patternProperties: {
+        [ENTRY_NAME_PATTERN]: { enum: [true, 'head', 'body', false] },
+      },
+    },
+    copy: { type: 'array' },
+    scriptExt: { type: 'object' },
+    disableHtmlFolder: { type: 'boolean' },
+    disableCssModuleExtension: { type: 'boolean' },
+    disableCssExtract: { type: 'boolean' },
+    enableCssModuleTSDeclaration: { type: 'boolean' },
+    disableMinimize: { type: 'boolean' },
+    enableInlineStyles: { type: 'boolean' },
+    enableInlineScripts: { type: 'boolean' },
+    disableSourceMap: { type: 'boolean' },
+    disableInlineRuntimeChunk: { type: 'boolean' },
+    disableAssetsCache: { type: 'boolean' },
+    enableLatestDecorators: { type: 'boolean' },
+    enableUsageBuiltIns: { type: 'boolean' },
+    enableTsLoader: { type: 'boolean' },
+    dataUriLimit: { type: 'number' },
+    templateParameters: { type: 'object' },
+    templateParametersByEntries: {
+      type: 'object',
+      patternProperties: { [ENTRY_NAME_PATTERN]: { type: 'object' } },
+    },
+    polyfill: {
+      type: 'string',
+      enum: ['usage', 'entry', 'off', 'ua'],
+    },
+    cssModuleLocalIdentName: { type: 'string' },
+    federation: { type: 'object' },
+    disableNodePolyfill: { type: 'boolean' },
+    enableModernMode: { type: 'boolean' },
+  },
+};