balm-core 5.2.0 → 6.0.0-alpha.0

package/src/bundler/esbuild.ts

@@ -0,0 +1,47 @@
+import * as esbuild from 'esbuild';
+import path from 'node:path';
+import { BalmConfig } from '../types/index.js';
+import { logger } from '../utilities/logger.js';
+
+export async function runEsbuild(
+  config: BalmConfig,
+  customOptions: esbuild.BuildOptions = {}
+): Promise<esbuild.BuildResult> {
+  const isProd = config.env.isProd;
+
+  let entryPoints = customOptions.entryPoints || config.scripts.entry;
+  if (!entryPoints) {
+    entryPoints = [path.join(config.src.js, 'main.js')];
+  }
+
+  const defaultOptions: esbuild.BuildOptions = {
+    entryPoints: (Array.isArray(entryPoints)
+      ? entryPoints
+      : typeof entryPoints === 'string'
+        ? [entryPoints]
+        : entryPoints) as any,
+    absWorkingDir: config.workspace,
+    bundle: true,
+    outdir: config.dest.js,
+    alias: {
+      ...config.alias,
+      ...config.scripts.alias
+    },
+    minify: isProd || config.scripts.minify,
+    sourcemap: !isProd,
+    target:
+      config.scripts.target && config.scripts.target !== 'web'
+        ? (config.scripts.target as string)
+        : 'es2020',
+    format: 'esm',
+    ...config.scripts.esbuildOptions,
+    ...customOptions
+  };
+
+  try {
+    return await esbuild.build(defaultOptions);
+  } catch (err: any) {
+    logger.error('esbuild', err.message || err);
+    throw err;
+  }
+}

package/src/bundler/index.ts

@@ -0,0 +1,3 @@
+export * from './webpack.js';
+export * from './rollup.js';
+export * from './esbuild.js';

package/src/bundler/rollup.ts

@@ -0,0 +1,39 @@
+import { rollup, RollupOptions, OutputOptions } from 'rollup';
+import path from 'node:path';
+import { BalmConfig } from '../types/index.js';
+import { logger } from '../utilities/logger.js';
+
+export async function runRollup(
+  config: BalmConfig,
+  customInputOptions: RollupOptions = {},
+  customOutputOptions: OutputOptions = {}
+): Promise<void> {
+  const isProd = config.env.isProd;
+
+  let input = customInputOptions.input || config.scripts.entry;
+  if (!input) {
+    input = path.join(config.src.js, 'main.js');
+  }
+
+  const inputOptions: RollupOptions = {
+    input: input as any,
+    ...config.scripts.rollupOptions,
+    ...customInputOptions
+  };
+
+  const outputOptions: OutputOptions = {
+    dir: config.dest.js,
+    format: 'es',
+    sourcemap: !isProd,
+    ...customOutputOptions
+  };
+
+  try {
+    const bundle = await rollup(inputOptions);
+    await bundle.write(outputOptions);
+    await bundle.close();
+  } catch (err: any) {
+    logger.error('rollup', err.message || err);
+    throw err;
+  }
+}

package/src/bundler/webpack.ts

@@ -0,0 +1,82 @@
+import webpack, { Configuration } from 'webpack';
+import path from 'node:path';
+import { BalmConfig } from '../types/index.js';
+import { logger } from '../utilities/logger.js';
+
+export async function runWebpack(
+  config: BalmConfig,
+  customOptions: Configuration = {}
+): Promise<webpack.Stats | undefined> {
+  const isProd = config.env.isProd;
+
+  let entry = customOptions.entry || config.scripts.entry;
+  if (!entry) {
+    entry = path.join(config.src.js, 'main.js');
+  }
+
+  const defaultWebpackConfig: Configuration = {
+    mode: isProd ? 'production' : 'development',
+    context: config.workspace,
+    entry,
+    output: {
+      path: config.dest.js,
+      filename: isProd && config.assets.cache ? '[name].[contenthash:8].js' : '[name].js',
+      chunkFilename: isProd && config.assets.cache ? 'chunk/[name].[contenthash:8].js' : 'chunk/[name].js',
+      publicPath: config.assets.virtualDir ? `/${config.assets.virtualDir}/` : '/'
+    },
+    resolve: {
+      extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
+      alias: {
+        ...config.alias,
+        ...config.scripts.alias
+      }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(png|jpe?g|gif|svg|webp)$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'img/[name].[hash:8][ext]'
+          }
+        },
+        {
+          test: /\.(woff2?|eot|ttf|otf)$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'font/[name].[hash:8][ext]'
+          }
+        }
+      ]
+    },
+    optimization: {
+      minimize: isProd || config.scripts.minify
+    },
+    devtool: isProd ? false : 'eval-cheap-module-source-map'
+  };
+
+  const webpackConfig = Object.assign(
+    {},
+    defaultWebpackConfig,
+    config.scripts.webpackOptions,
+    customOptions
+  );
+
+  return new Promise((resolve, reject) => {
+    const compiler = webpack(webpackConfig);
+    compiler.run((err, stats) => {
+      if (err) {
+        logger.error('webpack', err.stack || err);
+        return reject(err);
+      }
+
+      if (stats?.hasErrors()) {
+        const info = stats.toJson();
+        logger.error('webpack', info.errors?.map((e) => e.message).join('\n'));
+        return reject(new Error('Webpack compilation errors'));
+      }
+
+      resolve(stats);
+    });
+  });
+}

package/src/config/constants.ts

@@ -0,0 +1,12 @@
+export const ASSETS_TYPES = ['css', 'js', 'img', 'font', 'media'];
+export const PUBLIC_URL = '%PUBLIC_URL%';
+export const CHUNK = { dir: 'chunk' };
+export const ASSET = { dir: 'asset' };
+
+export const ASSET_EXT = {
+  styles: ['css', 'scss', 'sass', 'less'],
+  scripts: ['js', 'mjs', 'cjs', 'ts', 'mts', 'cts', 'jsx', 'tsx'],
+  images: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico'],
+  fonts: ['woff', 'woff2', 'ttf', 'eot', 'otf'],
+  media: ['mp4', 'webm', 'ogg', 'mp3', 'wav', 'flac', 'aac']
+};

package/src/config/defaults.ts

@@ -0,0 +1,209 @@
+import path from 'node:path';
+import { BalmConfig, BundlerType } from '../types/index.js';
+
+export function createDefaultConfig(workspace = process.cwd()): BalmConfig {
+  const isProd = process.env.NODE_ENV === 'production';
+  const isDev = !isProd;
+  const isTest = process.env.NODE_ENV === 'test';
+
+  const roots = {
+    source: 'src',
+    tmp: '.tmp',
+    target: 'dist'
+  };
+
+  const paths = {
+    source: {
+      base: '',
+      html: '',
+      css: 'styles',
+      js: 'scripts',
+      img: 'images',
+      font: 'fonts',
+      media: 'media'
+    },
+    tmp: {
+      base: '',
+      css: 'css',
+      js: 'js',
+      img: 'img',
+      font: 'fonts',
+      media: 'media'
+    },
+    target: {
+      base: '',
+      css: 'css',
+      js: 'js',
+      img: 'img',
+      font: 'font',
+      media: 'media'
+    }
+  };
+
+  const alias: Record<string, string> = {
+    '@': path.join(workspace, roots.source)
+  };
+
+  const styles = {
+    extname: 'scss',
+    minify: false,
+    atImportPaths: [],
+    alias: {},
+    options: {},
+    sassOptions: {},
+    lessOptions: {},
+    postcssLoaderOptions: {},
+    postcssPlugins: [],
+    sprites: [],
+    spriteOptions: {}
+  };
+
+  const scripts = {
+    bundler: BundlerType.webpack,
+    minify: false,
+    minifyOptions: {},
+    entry: '',
+    target: 'web',
+    library: '',
+    libraryTarget: 'var',
+    externals: {},
+    injectHtml: false,
+    htmlName: 'index.html',
+    alias: {},
+    plugins: [],
+    loaders: [],
+    defaultLoaders: {
+      html: true,
+      css: true,
+      js: true,
+      url: true
+    },
+    options: {},
+    esbuildOptions: {},
+    rollupOptions: {},
+    webpackOptions: {},
+    useCache: false
+  };
+
+  const html = {
+    options: {
+      collapseWhitespace: true,
+      minifyCSS: true,
+      minifyJS: {
+        compress: {
+          drop_console: true
+        }
+      },
+      processConditionalComments: true,
+      removeComments: true,
+      removeEmptyAttributes: true,
+      removeScriptTypeAttributes: true,
+      removeStyleLinkTypeAttributes: true
+    }
+  };
+
+  const assets = {
+    root: 'assets',
+    mainDir: 'public',
+    subDir: '',
+    buildDir: 'build',
+    virtualDir: '',
+    cache: false,
+    options: {
+      fileNameManifest: 'rev-manifest.json',
+      dontRenameFile: ['.html'],
+      dontUpdateReference: []
+    },
+    includes: [],
+    excludes: []
+  };
+
+  const server = {
+    host: null,
+    port: 3000,
+    open: true,
+    proxy: false,
+    proxyOptions: false,
+    historyOptions: false,
+    useHMR: false,
+    options: {}
+  };
+
+  const pwa = {
+    enabled: false,
+    mode: 'generateSW' as const,
+    version: '',
+    manifest: 'manifest.json',
+    swSrcFilename: 'service-worker.js',
+    swDestFilename: 'sw.js',
+    options: {}
+  };
+
+  const ftp = {
+    options: {},
+    watchFiles: []
+  };
+
+  const images = {
+    plugins: []
+  };
+
+  const env = {
+    isProd,
+    isDev,
+    isTest,
+    inFrontend: true,
+    inSSR: false,
+    inDesktopApp: false,
+    isMP: false
+  };
+
+  const src = {
+    base: path.join(workspace, roots.source),
+    html: path.join(workspace, roots.source, paths.source.html),
+    css: path.join(workspace, roots.source, paths.source.css),
+    js: path.join(workspace, roots.source, paths.source.js),
+    img: path.join(workspace, roots.source, paths.source.img),
+    font: path.join(workspace, roots.source, paths.source.font),
+    media: path.join(workspace, roots.source, paths.source.media)
+  };
+
+  const targetBase = path.join(workspace, isProd ? roots.target : roots.tmp);
+  const dest = {
+    base: targetBase,
+    html: targetBase,
+    css: path.join(targetBase, isProd ? paths.target.css : paths.tmp.css),
+    js: path.join(targetBase, isProd ? paths.target.js : paths.tmp.js),
+    img: path.join(targetBase, isProd ? paths.target.img : paths.tmp.img),
+    font: path.join(targetBase, isProd ? paths.target.font : paths.tmp.font),
+    media: path.join(targetBase, isProd ? paths.target.media : paths.tmp.media),
+    static: path.join(targetBase, assets.virtualDir, assets.subDir)
+  };
+
+  return {
+    workspace,
+    workspaces: {
+      local: workspace,
+      global: path.resolve(workspace, '..')
+    },
+    alias,
+    env,
+    inFrontend: true,
+    useDefaults: true,
+    roots,
+    paths,
+    styles,
+    scripts,
+    html,
+    assets,
+    server,
+    pwa,
+    ftp,
+    images,
+    logs: {
+      level: 1
+    },
+    src,
+    dest
+  };
+}

package/src/config/index.ts

@@ -0,0 +1,112 @@
+import path from 'node:path';
+import { BalmConfig, BalmCustomConfig } from '../types/index.js';
+import { createDefaultConfig } from './defaults.js';
+import { deepMerge } from '../utilities/utils.js';
+import { ASSETS_TYPES } from './constants.js';
+import { setWorkspaces } from '../utilities/workspace.js';
+
+export function resolveConfig(
+  customConfig: BalmCustomConfig = {},
+  defaultWorkspace = process.cwd()
+): BalmConfig {
+  let localWorkspace = defaultWorkspace;
+  let globalWorkspace = path.resolve(defaultWorkspace, '..');
+
+  if (customConfig.workspace) {
+    if (typeof customConfig.workspace === 'string') {
+      localWorkspace = path.resolve(customConfig.workspace);
+      globalWorkspace = path.resolve(localWorkspace, '..');
+    } else if (typeof customConfig.workspace === 'object') {
+      localWorkspace = path.resolve(customConfig.workspace.local || defaultWorkspace);
+      globalWorkspace = path.resolve(
+        customConfig.workspace.global || path.resolve(localWorkspace, '..')
+      );
+    }
+  }
+
+  setWorkspaces(localWorkspace, globalWorkspace);
+
+  const defaultConfig = createDefaultConfig(localWorkspace);
+  const config = deepMerge(defaultConfig, customConfig) as BalmConfig;
+
+  // Set normalized workspace path
+  config.workspace = localWorkspace;
+  config.workspaces = {
+    local: localWorkspace,
+    global: globalWorkspace
+  };
+
+  // Update src quick directories
+  config.src = {
+    base: path.join(config.workspace, config.roots.source),
+    html: path.join(config.workspace, config.roots.source, config.paths.source.html),
+    css: path.join(config.workspace, config.roots.source, config.paths.source.css),
+    js: path.join(config.workspace, config.roots.source, config.paths.source.js),
+    img: path.join(config.workspace, config.roots.source, config.paths.source.img),
+    font: path.join(config.workspace, config.roots.source, config.paths.source.font),
+    media: path.join(config.workspace, config.roots.source, config.paths.source.media)
+  };
+
+  // Update dest quick directories
+  const targetBase = path.join(
+    config.workspace,
+    config.env.isProd || !config.inFrontend ? config.roots.target : config.roots.tmp
+  );
+
+  const isProd = config.env.isProd || !config.inFrontend;
+  const pathMap = isProd ? config.paths.target : config.paths.tmp;
+
+  const destStatic = path.join(
+    targetBase,
+    config.assets.virtualDir,
+    config.assets.subDir
+  );
+
+  config.dest = {
+    base: targetBase,
+    html: targetBase,
+    css: path.join(targetBase, pathMap.css),
+    js: path.join(targetBase, pathMap.js),
+    img: path.join(targetBase, pathMap.img),
+    font: path.join(targetBase, pathMap.font),
+    media: path.join(targetBase, pathMap.media),
+    static: destStatic
+  };
+
+  // Set assets.static
+  config.assets.static = path.join(
+    config.assets.root,
+    config.assets.mainDir,
+    config.assets.subDir
+  );
+
+  for (const assetType of ASSETS_TYPES) {
+    (config.assets as any)[assetType] = path.join(
+      config.assets.static,
+      (config.paths.target as any)[assetType]
+    );
+  }
+
+  // Set HMR flag
+  const hmrEnv =
+    config.useDefaults &&
+    config.env.isDev &&
+    !config.env.inSSR &&
+    !config.env.isMP;
+  const hmrEnabling = config.scripts.bundler === 'webpack';
+  config.server.useHMR = hmrEnv && hmrEnabling;
+
+  // Set desktop app
+  if (/^electron-.*/.test(config.scripts.target as string)) {
+    config.env.inDesktopApp = true;
+  }
+
+  // Set use cache for webpack
+  config.scripts.useCache =
+    config.env.isProd && config.assets.cache && config.scripts.injectHtml;
+
+  return config;
+}
+
+export * from './constants.js';
+export * from './defaults.js';

package/src/hooks/index.ts

@@ -0,0 +1,192 @@
+import {
+  CopyTask,
+  RemoveTask,
+  ReplaceTask,
+  PublishTask,
+  PwaTask,
+  ZipTask,
+  FtpTask,
+  ServerTask
+} from '../tasks/index.js';
+import { FunctionTask } from '../runner/task.js';
+import { Pipeline } from '../pipeline/pipeline.js';
+import { transformSass } from '../pipeline/transforms/sass.js';
+import { transformLess } from '../pipeline/transforms/less.js';
+import { transformPostcss } from '../pipeline/transforms/postcss.js';
+import { runWebpack } from '../bundler/webpack.js';
+import { runRollup } from '../bundler/rollup.js';
+import { runEsbuild } from '../bundler/esbuild.js';
+import { TaskDAG } from '../runner/dag.js';
+import {
+  RenameOptions,
+  ReplaceOptions,
+  TemplateOption,
+  BalmConfig
+} from '../types/index.js';
+import { logger } from '../utilities/logger.js';
+
+export class BalmHooks {
+  private dag: TaskDAG;
+  private recipeIndex = 0;
+
+  constructor(dag: TaskDAG) {
+    this.dag = dag;
+  }
+
+  private addRecipeTask(fn: (config: BalmConfig) => Promise<void> | void): void {
+    this.recipeIndex++;
+    const taskName = `recipe:${this.recipeIndex}`;
+    this.dag.registerTask(new FunctionTask(taskName, fn));
+  }
+
+  copy(
+    input: string | string[],
+    output: string,
+    options: { rename?: RenameOptions | string | Function } = {}
+  ): this {
+    this.addRecipeTask(async (config) => {
+      const task = new CopyTask({ input, output, rename: options.rename });
+      await task.run(config);
+    });
+    return this;
+  }
+
+  remove(target: string | string[]): this {
+    this.addRecipeTask(async (config) => {
+      const task = new RemoveTask(target);
+      await task.run(config);
+    });
+    return this;
+  }
+
+  replace(
+    input: string | string[],
+    output: string,
+    options: ReplaceOptions | ReplaceOptions[]
+  ): this {
+    this.addRecipeTask(async (config) => {
+      const task = new ReplaceTask({ input, output, options });
+      await task.run(config);
+    });
+    return this;
+  }
+
+  sass(input: string | string[], output: string, options = {}): this {
+    this.addRecipeTask(async (config) => {
+      const pipeline = Pipeline.from(input, { cwd: config.workspace });
+      pipeline.pipe(transformSass(options));
+      pipeline.pipe(transformPostcss({ minify: config.env.isProd }));
+      await pipeline.dest(output);
+    });
+    return this;
+  }
+
+  less(input: string | string[], output: string, options = {}): this {
+    this.addRecipeTask(async (config) => {
+      const pipeline = Pipeline.from(input, { cwd: config.workspace });
+      pipeline.pipe(transformLess(options));
+      pipeline.pipe(transformPostcss({ minify: config.env.isProd }));
+      await pipeline.dest(output);
+    });
+    return this;
+  }
+
+  css(input: string | string[], output: string, options = {}): this {
+    this.addRecipeTask(async (config) => {
+      const pipeline = Pipeline.from(input, { cwd: config.workspace });
+      pipeline.pipe(transformPostcss({ minify: config.env.isProd, ...options }));
+      await pipeline.dest(output);
+    });
+    return this;
+  }
+
+  webpack(entry?: any, output?: string, customOptions = {}): this {
+    this.addRecipeTask(async (config) => {
+      await runWebpack(config, {
+        ...(entry ? { entry } : {}),
+        ...(output ? { output: { path: output } } : {}),
+        ...customOptions
+      });
+    });
+    return this;
+  }
+
+  rollup(input?: any, output?: any, customInputOptions = {}, customOutputOptions = {}): this {
+    this.addRecipeTask(async (config) => {
+      await runRollup(
+        config,
+        { ...(input ? { input } : {}), ...customInputOptions },
+        { ...(output ? { dir: output } : {}), ...customOutputOptions }
+      );
+    });
+    return this;
+  }
+
+  esbuild(entryPoints?: any, outdir?: string, customOptions = {}): this {
+    this.addRecipeTask(async (config) => {
+      await runEsbuild(config, {
+        ...(entryPoints ? { entryPoints } : {}),
+        ...(outdir ? { outdir } : {}),
+        ...customOptions
+      });
+    });
+    return this;
+  }
+
+  js(input?: any, output?: any, options = {}): this {
+    logger.warn('balm api', '`mix.js` is deprecated, please use `mix.webpack`/`mix.rollup`/`mix.esbuild` instead.');
+    return this.webpack(input, output, options);
+  }
+
+  publish(
+    input?: string | TemplateOption[],
+    output?: string,
+    renameOptions?: string | Function | RenameOptions
+  ): this {
+    this.addRecipeTask(async (config) => {
+      const task = new PublishTask({ input, output, renameOptions });
+      await task.run(config);
+    });
+    return this;
+  }
+
+  generateSW(options = {}): this {
+    this.addRecipeTask(async (config) => {
+      const task = new PwaTask({ mode: 'generateSW', options });
+      await task.run(config);
+    });
+    return this;
+  }
+
+  injectManifest(options = {}): this {
+    this.addRecipeTask(async (config) => {
+      const task = new PwaTask({ mode: 'injectManifest', options });
+      await task.run(config);
+    });
+    return this;
+  }
+
+  ftp(localFiles?: string | string[], options = {}): this {
+    this.addRecipeTask(async (config) => {
+      const task = new FtpTask({ localFiles, options });
+      await task.run(config);
+    });
+    return this;
+  }
+
+  zip(input?: string | string[], output?: string, filename?: string): this {
+    this.addRecipeTask(async (config) => {
+      const task = new ZipTask({ input, output, filename });
+      await task.run(config);
+    });
+    return this;
+  }
+
+  serve(): this {
+    this.addRecipeTask(async (config) => {
+      const task = new ServerTask();
+      await task.run(config);
+    });
+    return this;
+  }
+}