balm-core 5.2.0 → 6.0.0-alpha.0

package/src/watcher/index.ts

@@ -0,0 +1,100 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { BalmConfig } from '../types/index.js';
+import { StyleTask } from '../tasks/style.js';
+import { ScriptTask } from '../tasks/script.js';
+import { HtmlTask } from '../tasks/html.js';
+import { logger } from '../utilities/logger.js';
+import pc from 'picocolors';
+
+export interface WatcherBroadcast {
+  (data: { type: 'reload' | 'reload-css'; file?: string }): void;
+}
+
+export class FileWatcher {
+  private config: BalmConfig;
+  private broadcast: WatcherBroadcast;
+  private debounceTimer: NodeJS.Timeout | null = null;
+  private pendingFiles = new Set<string>();
+  private styleTask: StyleTask;
+  private scriptTask: ScriptTask;
+  private htmlTask: HtmlTask;
+  private watcher: fs.FSWatcher | null = null;
+
+  constructor(config: BalmConfig, broadcast: WatcherBroadcast) {
+    this.config = config;
+    this.broadcast = broadcast;
+    this.styleTask = new StyleTask();
+    this.scriptTask = new ScriptTask();
+    this.htmlTask = new HtmlTask();
+  }
+
+  start(): void {
+    const watchDir = this.config.src.base;
+    if (!fs.existsSync(watchDir)) return;
+
+    logger.info('watch', `Watching for file changes in ${pc.cyan(watchDir)}`);
+
+    try {
+      this.watcher = fs.watch(watchDir, { recursive: true }, (eventType, filename) => {
+        if (!filename) return;
+        this.pendingFiles.add(filename);
+
+        if (this.debounceTimer) clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+          this.handleChanges();
+        }, 50);
+      });
+    } catch (err: any) {
+      logger.warn('watch', `Native recursive watch failed: ${err.message}`);
+    }
+  }
+
+  private async handleChanges(): Promise<void> {
+    const changed = Array.from(this.pendingFiles);
+    this.pendingFiles.clear();
+
+    const hasStyle = changed.some((f) => /\.(scss|sass|less|css)$/i.test(f));
+    const hasScript = changed.some((f) => /\.(js|mjs|cjs|ts|jsx|tsx)$/i.test(f));
+    const hasHtml = changed.some((f) => /\.html$/i.test(f));
+
+    try {
+      if (hasStyle) {
+        const start = performance.now();
+        await this.styleTask.run(this.config);
+        const duration = (performance.now() - start).toFixed(1);
+        logger.info('watch', `Recompiled styles in ${pc.bold(duration + 'ms')}`);
+        this.broadcast({ type: 'reload-css' });
+      }
+
+      if (hasScript) {
+        const start = performance.now();
+        await this.scriptTask.run(this.config);
+        const duration = (performance.now() - start).toFixed(1);
+        logger.info('watch', `Rebundled scripts in ${pc.bold(duration + 'ms')}`);
+        this.broadcast({ type: 'reload' });
+      }
+
+      if (hasHtml) {
+        const start = performance.now();
+        await this.htmlTask.run(this.config);
+        const duration = (performance.now() - start).toFixed(1);
+        logger.info('watch', `Recompiled HTML in ${pc.bold(duration + 'ms')}`);
+        this.broadcast({ type: 'reload' });
+      }
+
+      if (!hasStyle && !hasScript && !hasHtml && changed.length > 0) {
+        this.broadcast({ type: 'reload' });
+      }
+    } catch (err: any) {
+      logger.error('watch', `Incremental rebuild failed: ${err?.message || err}`);
+    }
+  }
+
+  stop(): void {
+    if (this.watcher) {
+      this.watcher.close();
+      this.watcher = null;
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  splitting: false,
+  shims: true,
+  target: 'node18'
+});

package/README.md

@@ -1,196 +0,0 @@
-<div align="center">
-  <a href="https://balm.js.org/">
-    <img width="128" height="128" src="https://balm.js.org/logo.png" alt="BalmJS">
-  </a>
-  <br>
-  <br>
-
-[![NPM version][balm-core-image]][balm-core-url]
-[![License][license-image]][license-url]
-[![Coverage Percentage][cover-image]][cover-url]
-
-  <h1>BalmJS</h1>
-  <p>An universal Front-End workflow for webapps</p>
-</div>
-
-> [`balm-core@3`](https://github.com/balmjs/balm/tree/master)(v3) supports for `node@10.13.0+`, `postcss@7`, `webpack@4`
-
-## Introduction
-
-BalmJS prescribes best practices and tools to help you stay productive.
-
-- **Naturally**: Make web development _simple_, _natural_ and _pleasant_.
-- **Structure-Based**: _One configuration file_ can manage webapp projects with at least 90% use cases.
-- **Learn Once, Run Any Webapps**: Any front-end technology stack will be developed and built in _the same way_.
-
-## Features
-
-- Based on **gulp + webpack** for webapp projects
-- Automagically compile PostCSS/Sass/Less
-- CSS Autoprefixing
-- Automagically generate CSS Image Sprites
-- enable ES2015+ features using Babel
-- Awesome images optimization
-- Built-in preview server with BrowserSync
-- Custom publish assets to remote (Front-end to Back-end) project
-- ZIP/FTP/PWA supported
-- Easily define and extend your own tasks
-
-## Structure
-
-:rocket: We recommend using [Balm CLI](https://github.com/balmjs/balm-cli) to scaffold out a front-end web app.
-
-```
-project
-├── .tmp         // Scaffolds out a temporary directory for development
-├── dist         // Scaffolds out the production build
-├─┬ src          // Source code in here (Create a directory in project)
-│ ├── fonts
-│ ├── images
-│ ├── media
-│ ├─┬ scripts
-│ │ └── index.js // Required. A entry file for JS.
-│ ├─┬ styles
-│ │ └── main.css // Required. A entry file for CSS.
-│ └── index.html // Required. A entry file for HTML.
-├── .dotfile     // (e.g. .gitignore, .browserslistrc, etc...)
-├── babel.config.js
-├── balm.config.js // Required. A configuration file for Balm.
-├── package.json   // Required.
-└── ...
-```
-
-## Installation
-
-### 0. Requirements
-
-You need to set up your development environment before you can do anything.
-
-Install [Node.js® and npm](https://nodejs.org/en/download/) if they are not already on your machine.
-
-> **Verify that you are running at least node `18.12.0`** by running `node -v` in a terminal/console window. Older versions maybe produce errors, but newer versions are fine.
-
-You develop apps in the context of an [Balm workspace](https://balm.js.org/docs/guide/structure.html).
-
-To create a new workspace and initial starter app:
-
-```sh
-# /path/to/YOUR_WORKSPACE
-mkdir -p my-project/src/{styles,scripts}
-echo "Hello World" > my-project/src/index.html
-
-cd my-project
-npm init -y
-```
-
-### 1. Installing `balm`
-
-```sh
-yarn global add balm-core
-yarn add -D balm
-```
-
-OR
-
-```sh
-npm install -g balm-core
-npm install -D balm
-```
-
-> We currently recommend using [Yarn](https://yarnpkg.com/en/docs/install) instead of npm.
-
-### 2. Configuration
-
-In your project directory, create a file named `balm.config.js` in your project root with these contents:
-
-```js
-module.exports = {
-  // Your project config
-};
-```
-
-:page_with_curl: Refer to [configuration docs](https://balm.js.org/docs/config/) to learn more about config **`balm`**.
-
-### 3. Usage
-
-Edit `package.json` in your project directory:
-
-```json
-{
-  "scripts": {
-    "dev": "balm",
-    "prod": "balm -p"
-  }
-}
-```
-
-Run the command in your project directory:
-
-```sh
-# For development
-npm run dev
-
-# For production
-npm run prod
-```
-
-## Demo
-
-- [x] [HTML boilerplate](https://github.com/balmjs/demo-html5-boilerplate)
-- [x] [Laravel](https://github.com/balmjs/demo-laravel)
-- [x] [TypeScript](https://github.com/balmjs/demo-ts)
-- [x] Yours awesome projects...
-
-## Documentation
-
-To download [example](https://balm.js.org/balm-example.zip) and try it, visit [balm.js.org](https://balm.js.org/docs/).
-
-- [Getting Started](https://balm.js.org/docs/guide/getting-started.html)
-- [Configuration](https://balm.js.org/docs/config/)
-- [Custom Task API](https://balm.js.org/docs/api/)
-- [Advanced Usage](https://balm.js.org/docs/advanced/)
-
-## Ecosystem
-
-| Project                                                    | Status                                                   | Description                                                        |
-| ---------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------ |
-| **[balm-core](https://github.com/balmjs/balm)**            | [![NPM version][balm-core-image]][balm-core-url]         | :black_joker: BalmJS compiler core (required for `balm 3.0+`)      |
-| **[balm](https://github.com/balmjs/balm)**                 | [![NPM version][balm-image]][balm-url]                   | :black_joker: BalmJS runtime core                                  |
-| **[balm-cli](https://github.com/balmjs/balm-cli)**         | [![NPM version][balm-cli-image]][balm-cli-url]           | :spades: BalmJS scaffolding tool                                   |
-| [balm-gui](https://github.com/balmjs/balm-gui)             | N/A                                                      | :clubs: GUI for BalmJS                                             |
-| [balm-ui-lite](https://github.com/balmjs/ui-vue-lite)      | [![NPM version][balm-ui-lite-image]][balm-ui-lite-url]   | :hearts: Material Design Lite + Vue                                |
-| **[balm-ui](https://github.com/balmjs/ui-vue)**            | [![NPM version][balm-ui-image]][balm-ui-url]             | :diamonds: Next Generation Material UI for Vue.js                  |
-| [balm-scroll](https://github.com/balmjs/balm-scroll)       | [![NPM version][balm-scroll-image]][balm-scroll-url]     | :scroll: Smooth scrolling for Vue.js                               |
-| **[balm-ui-pro](https://github.com/balmjs/balm-ui-pro)**   | [![NPM version][balm-ui-pro-image]][balm-ui-pro-url]     | More configuration definition, less code implementation for Vue.js |
-| **[balm-git-flow](https://github.com/balmjs/balm-ui-pro)** | [![NPM version][balm-git-flow-image]][balm-git-flow-url] | The best practices for front-end git flow                          |
-
-## Contributing
-
-We'd love for you to contribute and make BalmJS even better than it is today! Please make sure to read the [Contributing Guide](https://github.com/balmjs/balm/blob/main/CONTRIBUTING.md) before making a [pull request](https://github.com/balmjs/balm/pulls). You can submit any ideas as pull requests or as [GitHub issues](https://github.com/balmjs/balm/issues).
-
-## License
-
-[MIT](https://opensource.org/licenses/MIT)
-
-© 2016-present, [Elf-mousE](http://elf-mouse.me/)
-
-[balm-core-image]: https://img.shields.io/npm/v/balm-core.svg
-[balm-core-url]: https://npmjs.org/package/balm-core
-[balm-image]: https://img.shields.io/npm/v/balm.svg
-[balm-url]: https://npmjs.org/package/balm
-[license-image]: https://img.shields.io/npm/l/balm-core.svg?sanitize=true
-[license-url]: https://www.npmjs.com/package/balm-core
-[cover-image]: https://coveralls.io/repos/balmjs/balm/badge.svg
-[cover-url]: https://coveralls.io/r/balmjs/balm
-[balm-cli-image]: https://img.shields.io/npm/v/balm-cli.svg
-[balm-cli-url]: https://npmjs.org/package/balm-cli
-[balm-ui-lite-image]: https://img.shields.io/npm/v/balm-ui-lite.svg
-[balm-ui-lite-url]: https://npmjs.org/package/balm-ui-lite
-[balm-ui-image]: https://img.shields.io/npm/v/balm-ui.svg
-[balm-ui-url]: https://npmjs.org/package/balm-ui
-[balm-scroll-image]: https://img.shields.io/npm/v/balm-scroll.svg
-[balm-scroll-url]: https://npmjs.org/package/balm-scroll
-[balm-ui-pro-image]: https://badge.fury.io/js/balm-ui-pro.svg
-[balm-ui-pro-url]: https://npmjs.org/package/balm-ui-pro
-[balm-git-flow-image]: https://badge.fury.io/js/balm-git-flow.svg
-[balm-git-flow-url]: https://npmjs.org/package/balm-git-flow

package/index.d.ts

@@ -1,360 +0,0 @@
-export * from './types/vendors';
-export * from './types/globals';
-export * from './types/webworker';
-export * from './types/balm';
-export * from './types/gulp';
-export * from './types/node';
-
-export interface LooseObject {
-  [key: string]: any;
-}
-
-export type DeepPartial<T> = {
-  [P in keyof T]?: DeepPartial<T[P]>;
-};
-
-export interface BalmEnvObject {
-  isProd: boolean;
-  isTest: boolean;
-  isDev: boolean;
-  inSSR: boolean;
-  isMP: boolean;
-  inDesktopApp: boolean;
-}
-
-export interface BalmPath {
-  base: string;
-  html: string;
-  css: string;
-  js: string;
-  img: string;
-  font: string;
-  media: string;
-}
-
-interface BalmStyles {
-  extname: string;
-  minify: boolean;
-  atImportPaths: string[];
-  entry: string | string[];
-  options: object;
-  sassOptions: object;
-  lessOptions: object;
-  postcssEnvOptions: object;
-  postcssPlugins: object[];
-  imageBasePath: string;
-  sprites: string[];
-  spriteRetina: boolean;
-  spriteParams: object;
-}
-
-// Sass
-export type SassOptions = import('sass').Options<'sync'>;
-export type CompileResult = import('sass').CompileResult;
-export type LegacyOptions = import('sass').LegacyOptions<'sync'>;
-export type LegacyResult = import('sass').LegacyResult;
-
-// Webpack
-export type WebpackEntry = import('webpack').Entry;
-export type Configuration = import('webpack').Configuration;
-export type RuleSetRule = import('webpack').RuleSetRule;
-
-export interface BalmLoaders {
-  js: boolean;
-  css: boolean;
-  html: boolean;
-  asset: boolean;
-}
-export interface PostcssLoaderOptions {
-  exec?: boolean;
-  postcssOptions?: object | Function; // NOTE: `postcssOptions.plugins` is the same to `styles.postcssPlugins`
-  sourceMap: string | boolean;
-}
-
-// Rollup
-export type RollupPlugin = import('rollup').Plugin;
-export type OutputPlugin = import('rollup').OutputPlugin;
-export type InputOption = import('rollup').InputOption;
-export type InputOptions = import('rollup').InputOptions;
-export type OutputOptions = import('rollup').OutputOptions;
-export type RollupOutput = import('rollup').RollupOutput;
-export type RollupBuild = import('rollup').RollupBuild;
-
-// Esbuild
-export type BuildOptions = import('esbuild').BuildOptions;
-export type TransformOptions = import('esbuild').TransformOptions;
-export type TransformResult = import('esbuild').TransformResult;
-
-// Bundler base
-export type BalmBundler = 'webpack' | 'rollup' | 'esbuild';
-export type MinifyOptions = import('terser').MinifyOptions;
-export type BalmEntry = string | string[] | WebpackEntry;
-
-export interface BalmScripts {
-  // base
-  bundler: BalmBundler;
-  minify: boolean;
-  minifyOptions: MinifyOptions;
-  entry: BalmEntry;
-  lint: boolean;
-  // webpack
-  library: string | object;
-  loaders: RuleSetRule[];
-  defaultLoaders: Partial<BalmLoaders>;
-  includeJsResource: string[];
-  useEsModule: boolean;
-  babelLoaderOptions: object;
-  postcssLoaderOptions: Partial<PostcssLoaderOptions>;
-  htmlLoaderOptions: object;
-  imageAssetType: string;
-  imageInlineSizeLimit: number;
-  extensions: string[];
-  alias: object;
-  plugins: object[];
-  nodeEnv: object;
-  injectHtml: boolean;
-  htmlPluginOptions: object;
-  extractCss: boolean;
-  sourceMap: string | boolean;
-  target: string | string[] | false;
-  externals: string | string[] | object | Function | RegExp;
-  stats: object | string;
-  webpackOptions: Configuration;
-  optimization: object;
-  extractAllVendors: boolean;
-  vendorName: string;
-  ie8: boolean;
-  // rollup
-  inputOptions: Omit<InputOptions, 'acorn'>; // incompatible
-  outputOptions: OutputOptions;
-  // esbuild
-  buildOptions: BuildOptions;
-  useTransform: boolean;
-  transformOptions: TransformOptions;
-  // extra
-  useCache?: boolean;
-}
-
-export interface BalmImagesPlugins {
-  gif: boolean | Function;
-  jpeg: boolean | Function;
-  png: boolean | Function;
-  svg: boolean | Function;
-}
-
-interface BalmImages {
-  plugins: Partial<BalmImagesPlugins> | Function[];
-}
-
-export interface BalmAssetsPath extends BalmPath {
-  static: string;
-}
-
-export interface BalmAssets extends Partial<BalmAssetsPath> {
-  root: string;
-  mainDir: string;
-  subDir: string;
-  buildDir: string;
-  virtualDir: string;
-  cache: boolean;
-  options: object;
-  includes: string[];
-  excludes: string[];
-}
-
-export type BalmProxyOptions = import('http-proxy-middleware').Options;
-
-interface BalmServer {
-  port: number;
-  host: string | null;
-  https: boolean | undefined;
-  open: string | boolean;
-  proxy: string | boolean | object;
-  serveStatic: string[];
-  next: Function;
-  options: any;
-  devOptions: object;
-  hotOptions: object;
-  proxyOptions: boolean | BalmProxyOptions | BalmProxyOptions[];
-  historyOptions: boolean | object;
-  middlewares: Function[] | object[];
-  extraWatchFiles: string[];
-  // extra
-  useHMR?: boolean;
-}
-
-export interface BalmFtpConfig {
-  host?: string;
-  port?: number;
-  username?: string;
-  password?: string;
-  remotePath?: string;
-  dirMode?: string;
-  fileMode?: string;
-}
-
-export interface BalmConfig {
-  env: BalmEnvObject;
-  workspace: string;
-  inFrontend: boolean;
-  useDefaults: boolean;
-  roots: {
-    source: string;
-    tmp: string;
-    target: string;
-  };
-  paths: {
-    source: BalmPath;
-    tmp: Omit<BalmPath, 'html'>;
-    target: Omit<BalmPath, 'html'>;
-  };
-  html: {
-    options: object;
-  };
-  styles: BalmStyles;
-  scripts: BalmScripts;
-  images: BalmImages;
-  extras: {
-    includes: string[];
-    excludes: string[];
-  };
-  assets: BalmAssets;
-  server: BalmServer;
-  ftp: {
-    options: BalmFtpConfig;
-    watchFiles: string[];
-  };
-  pwa: {
-    enabled: boolean;
-    manifest: string;
-    workboxSw: string;
-    mode: string;
-    options: object;
-    swSrcFilename: string;
-    swDestFilename: string;
-    version: string;
-  };
-  logs: {
-    level: number;
-    formatOptions: object;
-  };
-  src: BalmPath;
-  dest: BalmAssetsPath;
-}
-
-export interface BalmVendor {
-  key: string;
-  value: string[];
-}
-
-export interface RenameOptions {
-  dirname?: string;
-  prefix?: string;
-  basename?: string;
-  suffix?: string;
-  extname?: string;
-}
-
-export interface HookOptions {
-  src?: object;
-  sass?: object;
-  less?: object;
-  terser?: MinifyOptions;
-  rename?: string | Function | RenameOptions;
-  ftp?: BalmFtpConfig;
-}
-
-export interface SpriteOptions {
-  extname?: string;
-  imageBasePath?: string;
-  imageTarget?: string; // NOTE: overwrite `balm.config.paths.target.img`
-  spriteRetina?: boolean;
-  spriteParams?: object;
-}
-
-export interface ReplaceOptions {
-  substr: string | RegExp;
-  replacement: string | Function;
-}
-
-export interface TemplateOption {
-  input: string;
-  output: string;
-  renameOptions: string | Function | RenameOptions;
-}
-
-export interface BalmError extends Error {
-  code: string;
-  details?: string;
-}
-
-interface BalmRecipe {
-  env: BalmEnvObject;
-  html: (input: string, output: string) => void;
-  css: (input: string | string[], output: string) => void;
-  sass: (
-    input: string | string[],
-    output: string,
-    options?: HookOptions
-  ) => void;
-  less: (
-    input: string | string[],
-    output: string,
-    options?: HookOptions
-  ) => void;
-  url: (input: string | string[], output: string) => void;
-  webpack: (input: BalmEntry, output: string, options?: Configuration) => void;
-  rollup: (input: InputOptions, output: OutputOptions) => void;
-  esbuild: (
-    input: string | string[],
-    output: string,
-    options?: BuildOptions | TransformOptions
-  ) => void;
-  jsmin: (
-    input: string | string[],
-    output: string,
-    options?: HookOptions
-  ) => void;
-  copy: (
-    input: string | string[],
-    output: string,
-    options?: HookOptions
-  ) => void;
-  remove: (paths: string | string[]) => void;
-  version: (
-    input: string | string[],
-    output: string,
-    assetsOptions?: object
-  ) => void;
-  serve: (handler: Function) => void;
-  sprite: (
-    input: string[],
-    output: string,
-    spriteOptions?: SpriteOptions
-  ) => void;
-  replace: (
-    input: string | string[],
-    output: string,
-    options: ReplaceOptions | ReplaceOptions[]
-  ) => void;
-  publish: (
-    input: string | TemplateOption[],
-    output: string,
-    renameOptions?: string | Function | RenameOptions
-  ) => void;
-  zip: (input: string | string[], output?: string, filename?: string) => void;
-  ftp: (localFiles: string, options?: HookOptions) => void;
-  generateSW: (pwaOptions: object) => void;
-  injectManifest: (pwaOptions: object) => void;
-  modernizr: () => void;
-}
-
-export type BalmRecipeFunction = (parameters: Partial<BalmRecipe>) => {};
-
-export interface Balm {
-  config: Partial<Omit<BalmConfig, 'src' | 'dest'>>;
-  beforeTask?: string | Function;
-  afterTask?: string | Function;
-  go: (recipe?: BalmRecipeFunction) => void;
-  reset?: Function;
-}