balm-core 4.6.0 → 4.7.0

package/index.d.ts

@@ -29,6 +29,7 @@ interface BalmStyles {
   extname: string;
   minify: boolean;
   atImportPaths: string[];
+  entry: string | string[];
   options: object;
   sassOptions: object;
   lessOptions: object;
@@ -92,9 +93,12 @@ export interface BalmScripts {
   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;

package/lib/balm.js

@@ -30,8 +30,10 @@ class Balm {
 
     _classPrivateFieldSet(this, _config, setConfig({}));
 
-    BalmJS.loading = false;
-    loading.succeed();
+    if (!BalmJS.useCacache) {
+      BalmJS.loading = false;
+      loading.succeed();
+    }
   }
 
   get config() {

package/lib/bundler/webpack/config/common.js

@@ -1,9 +1,20 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import getLoaders from '../loaders.js';
 import { CHUNK } from '../../../config/constants.js';
+import getClientEnvironment from './env.js';
 
 function getDefaultPlugins(webpack, scripts) {
-  const plugins = [// Moment.js is an extremely popular library that bundles large locale files
+  // We will provide `BalmJS.file.publicUrlOrPath` to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(BalmJS.file.publicUrlOrPath.slice(0, -1));
+  const plugins = [// Makes some environment variables available to the JS code, for example:
+  // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+  // It is absolutely essential that NODE_ENV is set to production
+  // during a production build.
+  // Otherwise webapp will be compiled in the very slow development mode.
+  new webpack.DefinePlugin(env.stringified), // Moment.js is an extremely popular library that bundles large locale files
   // by default due to how webpack interprets its code. This is a practical
   // solution that requires the user to opt into importing specific locales.
   // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

package/lib/bundler/webpack/config/dev.js

@@ -4,9 +4,7 @@ import getCommonConfig from './common.js';
 function getDevConfig(webpack, scripts) {
   return merge(getCommonConfig(webpack, scripts), {
     mode: 'development',
-    plugins: [new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
-    }), // This is necessary to emit hot updates
+    plugins: [// This is necessary to emit hot updates
     new webpack.HotModuleReplacementPlugin()],
     devtool: scripts.sourceMap ? scripts.sourceMap : 'eval-cheap-module-source-map'
   });

package/lib/bundler/webpack/config/env.js

@@ -0,0 +1,67 @@
+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 dotenv from 'dotenv';
+import dotenvExpand from 'dotenv-expand';
+const NODE_ENV = process.env.NODE_ENV;
+
+if (!NODE_ENV) {
+  throw new Error('The NODE_ENV environment variable is required but was not specified.');
+}
+
+const dotenvFile = BalmJS.file.resolveApp('.env'); // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+
+const dotenvFiles = [`${dotenvFile}.${NODE_ENV}.local`, // Don't include `.env.local` for `test` environment
+// since normally you expect tests to produce the same
+// results for everyone
+NODE_ENV !== 'test' && `${dotenvFile}.local`, `${dotenvFile}.${NODE_ENV}`, dotenvFile].filter(Boolean); // Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+
+dotenvFiles.forEach(dotenvFile => {
+  if (node.fs.existsSync(dotenvFile)) {
+    dotenvExpand.expand(dotenv.config({
+      path: dotenvFile
+    }));
+  }
+}); // Grab NODE_ENV and BALM_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+
+const BALM_APP = /^BALM_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env).filter(key => BALM_APP.test(key)).reduce((env, key) => {
+    env[key] = process.env[key];
+    return env;
+  }, _objectSpread({
+    // Useful for determining whether we’re running in production mode.
+    // Most importantly, it switches webapp into the correct mode.
+    NODE_ENV: process.env.NODE_ENV || 'development',
+    // Useful for resolving the correct path to static assets in `public`.
+    // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+    // This should only be used as an escape hatch. Normally you would put
+    // images into the `src` and `import` them in code to get their paths.
+    PUBLIC_URL: publicUrl
+  }, BalmJS.config.scripts.nodeEnv)); // Stringify all values so we can feed into webpack DefinePlugin
+
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {})
+  };
+  BalmJS.logger.debug('webpack .env', stringified, {
+    pre: true
+  });
+  return {
+    raw,
+    stringified
+  };
+}
+
+export default getClientEnvironment;

package/lib/bundler/webpack/config/prod.js

@@ -29,9 +29,7 @@ function getProdConfig(webpack, scripts) {
         extractComments: false
       }), new CssMinimizerPlugin()]
     },
-    plugins: [new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
-    }), // Extract css into its own file
+    plugins: [// Extract css into its own file
     ...(scripts.extractCss ? [new MiniCssExtractPlugin({
       filename: BalmJS.file.assetsPath(getCssFilename()),
       chunkFilename: BalmJS.file.assetsPath(getCssFilename())

package/lib/bundler/webpack/config/regex.js

@@ -4,7 +4,7 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 const jsRegex = /\.(js|mjs|jsx|ts|tsx)$/;
-const imgRegex = /\.(bmp|gif|jpe?g|png|svg)(\?.*)?$/;
+const imgRegex = /\.(bmp|gif|jpe?g|png|svg|webp)(\?.*)?$/;
 const fontRegex = /\.(woff2?|eot|ttf|otf)(\?.*)?$/;
 const mediaRegex = /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/;
 export { htmlRegex, cssRegex, cssModuleRegex, sassRegex, sassModuleRegex, jsRegex, imgRegex, fontRegex, mediaRegex };

package/lib/bundler/webpack/loaders.js

@@ -1,5 +1,6 @@
 import { mergeWithRules, CustomizeRule } from 'webpack-merge';
 import LOADERS from './rules/index.js';
+import fileLoader from './rules/file.js';
 
 function getLoaders(customLoaders) {
   const enableDefaultLoaders = Object.assign({
@@ -45,6 +46,10 @@ function getLoaders(customLoaders) {
     module: {
       rules: customLoaders
     }
+  }, {
+    module: {
+      rules: [fileLoader()]
+    }
   });
   const defaultModule = result.module;
   BalmJS.logger.debug('webpack loaders', defaultModule.rules, {

package/lib/bundler/webpack/rules/asset.js

@@ -7,7 +7,12 @@ function assetLoader() {
   // A missing `test` is equivalent to a match.
   {
     test: imgRegex,
-    type: 'asset/resource',
+    type: BalmJS.config.scripts.imageAssetType,
+    parser: {
+      dataUrlCondition: {
+        maxSize: BalmJS.config.scripts.imageInlineSizeLimit
+      }
+    },
     generator: {
       filename: BalmJS.file.assetsPath(`${ASSET.dir}/${BalmJS.config.paths.target.img}/[name].${ASSET.hash}[ext]`)
     }

package/lib/bundler/webpack/rules/babel.js

@@ -1,7 +1,12 @@
 import { jsRegex } from '../config/regex.js';
 
 function jsLoader() {
-  const options = Object.assign({}, BalmJS.config.scripts.babelLoaderOptions); // Process application JS with Babel.
+  const options = Object.assign({
+    // This is a feature of `babel-loader` for webpack (not Babel itself).
+    // It enables caching results in ./node_modules/.cache/babel-loader/
+    // directory for faster rebuilds.
+    cacheDirectory: true
+  }, BalmJS.config.scripts.babelLoaderOptions); // Process application JS with Babel.
   // The preset includes JSX, Flow, TypeScript, and some ESnext features.
 
   return {

package/lib/bundler/webpack/rules/file.js

@@ -0,0 +1,20 @@
+import { jsRegex, htmlRegex } from '../config/regex.js';
+
+function fileLoader() {
+  // "file" loader makes sure those assets get served by WebpackDevServer.
+  // When you `import` an asset, you get its (virtual) filename.
+  // In production, they would get copied to the `build` folder.
+  // This loader doesn't use a "test" so it will catch all modules
+  // that fall through the other loaders.
+  return {
+    // Exclude `js` files to keep "css" loader working as it injects
+    // its runtime that would otherwise be processed through "file" loader.
+    // Also exclude `html` and `json` extensions so they get processed
+    // by webpacks internal loaders.
+    exclude: [/^$/, jsRegex, htmlRegex, /\.json$/],
+    type: 'asset/resource'
+  }; // ** STOP ** Are you adding a new loader?
+  // Make sure to add the new loader(s) before the "file" loader.
+}
+
+export default fileLoader;

package/lib/bundler/webpack/rules/index.js

@@ -3,8 +3,8 @@ import cssLoader from './css.js';
 import htmlLoader from './html.js';
 import assetLoader from './asset.js';
 export default {
-  jsLoader,
-  cssLoader,
+  assetLoader,
   htmlLoader,
-  assetLoader
+  jsLoader,
+  cssLoader
 };

package/lib/config/scripts.js

@@ -68,17 +68,21 @@ const babelLoaderOptions = {};
 
 const postcssLoaderOptions = {};
 /**
- * Templating: html-loader options
+ * Template: html-loader options
  *
  * @reference https://github.com/webpack-contrib/html-loader#options
  */
 
-const htmlLoaderOptions = {}; // Resolve
+const htmlLoaderOptions = {};
+const imageAssetType = 'asset';
+const imageInlineSizeLimit = 8096; // 8kb
+// Resolve
 
 const extensions = [];
 const alias = {}; // Plugins
 
 const plugins = [];
+const nodeEnv = {};
 const injectHtml = false;
 const htmlPluginOptions = {};
 const extractCss = false; // Devtool
@@ -146,9 +150,12 @@ export default {
   babelLoaderOptions,
   postcssLoaderOptions,
   htmlLoaderOptions,
+  imageAssetType,
+  imageInlineSizeLimit,
   extensions,
   alias,
   plugins,
+  nodeEnv,
   injectHtml,
   htmlPluginOptions,
   extractCss,

package/lib/config/styles.js

@@ -1,6 +1,7 @@
 const extname = 'css';
 const minify = false;
 const atImportPaths = [];
+const entry = '';
 /**
  * Cssnano optimisations
  *
@@ -61,6 +62,7 @@ export default {
   extname,
   minify,
   atImportPaths,
+  entry,
   options,
   sassOptions,
   lessOptions,

package/lib/hello.js

@@ -1,3 +1,4 @@
+import { versions } from 'node:process';
 import { createRequire } from 'node:module';
 import fs from 'node:fs';
 import { URL } from 'node:url';
@@ -8,8 +9,13 @@ const balmCorePkg = JSON.parse(fs.readFileSync(new URL('../package.json', import
 global.requireModule = requireModule;
 global.BalmJS = {
   version: balmCorePkg.version,
-  emitter: new EventEmitter()
+  emitter: new EventEmitter(),
+  useCacache: +versions.node.split('.')[0] >= 18
 };
-BalmJS.loading = true;
-cacheBalmCore();
+
+if (!BalmJS.useCacache) {
+  BalmJS.loading = true;
+  cacheBalmCore();
+}
+
 export default balmCorePkg.version;

package/lib/tasks/foundation/balm_style.js

@@ -19,11 +19,23 @@ class BalmStyleTask extends BalmTask {
         extname = 'css';
     }
 
-    this.defaultInput = node.path.join(BalmJS.config.src.css, '**', `!(_*).${extname}`);
+    if (Array.isArray(BalmJS.config.styles.entry)) {
+      this.defaultInput = BalmJS.config.styles.entry.map(styleEntry => node.path.join(BalmJS.config.src.css, styleEntry));
+    } else {
+      if (BalmJS.config.styles.entry) {
+        this.defaultInput = node.path.join(BalmJS.config.src.css, BalmJS.config.styles.entry);
+      } else {
+        this.defaultInput = node.path.join(BalmJS.config.src.css, '**', `!(_*).${extname}`);
+      }
+    }
+
     this.defaultOutput = BalmJS.config.env.isMP ? node.path.join(BalmJS.config.dest.base, ASSET.mpDir, BalmJS.config.paths.target.css) : BalmJS.config.dest.css;
   }
 
   handleStyle(style, output, options) {
+    BalmJS.logger.debug(`${this.name} entry`, this.defaultInput, {
+      pre: true
+    });
     const taskName = `${this.name} task`;
     const shouldUseSourceMap = !(BalmJS.config.env.isProd || BalmJS.config.styles.minify);
     let stream = gulp.src(this.input, Object.assign({

package/lib/utilities/compiling.js

@@ -25,13 +25,13 @@ class BalmCompiling {
   }
 
   start() {
-    if (_classPrivateFieldGet(this, _firstCompile)) {
+    if (!BalmJS.useCacache && _classPrivateFieldGet(this, _firstCompile)) {
       loading.render('Compiling to JS...');
     }
   }
 
   stop() {
-    if (_classPrivateFieldGet(this, _firstCompile)) {
+    if (!BalmJS.useCacache && _classPrivateFieldGet(this, _firstCompile)) {
       _classPrivateFieldSet(this, _firstCompile, false);
 
       loading.clear();

package/lib/utilities/file.js

@@ -3,9 +3,11 @@ import { PUBLIC_URL } from '../config/constants.js'; // Make sure any symlinks i
 
 const appDirectory = node.fs.realpathSync(process.cwd());
 
-const resolveApp = relativePath => node.path.resolve(appDirectory, relativePath);
-
 class File {
+  resolveApp(relativePath) {
+    return node.path.resolve(appDirectory, relativePath);
+  }
+
   get publicUrlOrPath() {
     // We use `PUBLIC_URL` environment variable or "homepage" field to infer
     // "public path" at which the app is served.
@@ -13,7 +15,7 @@ class File {
     // single-page apps that may serve index.html for nested URLs like /todos/42.
     // We can't use a relative path in HTML because we don't want to load something
     // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-    return getPublicUrlOrPath(requireModule(resolveApp('package.json')).homepage, process.env.PUBLIC_URL);
+    return getPublicUrlOrPath(requireModule(this.resolveApp('package.json')).homepage, process.env.PUBLIC_URL);
   }
 
   get stylePaths() {

package/lib/utilities/loading.js

@@ -63,7 +63,7 @@ class BalmLoading {
 
   succeed() {
     this.clear();
-    console.log(`BalmJS version: ${BalmJS.version}`);
+    console.log(`BalmJS core version: ${BalmJS.version}`);
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balm-core",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "BalmJS compiler core",
   "keywords": [
     "balm",
@@ -41,16 +41,18 @@
     "directory": "packages/balm-core"
   },
   "dependencies": {
-    "ansi-colors": "^4.1.1",
+    "ansi-colors": "^4.1.3",
     "async": "^3.2.3",
-    "autoprefixer": "^10.4.5",
+    "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",
-    "browser-sync": "^2.27.9",
+    "browser-sync": "^2.27.10",
     "connect-history-api-fallback": "^1.6.0",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "cssnano": "^5.1.7",
-    "del": "^6.0.0",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "cssnano": "^5.1.9",
+    "del": "^6.1.0",
+    "dotenv": "^16.0.1",
+    "dotenv-expand": "^8.0.3",
     "esbuild": "^0.14",
     "fancy-log": "^2.0.0",
     "gulp-eslint": "^6.0.0",
@@ -73,31 +75,31 @@
     "modernizr": "^3.12.0",
     "parents": "^1.0.1",
     "plugin-error": "^1.0.1",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^14.1.0",
     "postcss-load-config": "^3.1.4",
-    "postcss-loader": "6.2.1",
-    "postcss-preset-env": "^7.4.4",
+    "postcss-loader": "7.0.0",
+    "postcss-preset-env": "^7.6.0",
     "pretty-bytes": "^6.0.0",
     "readable-stream": "^3.6.0",
     "replace-ext": "^2.0.0",
-    "rollup": "^2.70.2",
+    "rollup": "^2.74.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.51.0",
-    "sass-loader": "^12.6.0",
+    "sass": "^1.52.1",
+    "sass-loader": "^13.0.0",
     "ssh2": "^1.10.0",
     "strip-ansi": "^7.0.1",
     "style-loader": "^3.3.1",
-    "terser": "^5.13.0",
+    "terser": "^5.13.1",
     "terser-webpack-plugin": "^5.3.1",
     "through2": "^4.0.2",
     "through2-concurrent": "^2.0.0",
     "tslib": "^2.4.0",
     "vinyl-sourcemaps-apply": "^0.2.1",
-    "webpack": "^5.72.0",
+    "webpack": "^5.72.1",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-dev-middleware": "^5.3.1",
+    "webpack-dev-middleware": "^5.3.3",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0",
     "workbox-build": "^6.5.3"
@@ -116,7 +118,7 @@
     "imagemin-svgo": "^9.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   },
-  "gitHead": "903c97e47597f09766bd1973aded4bcc5eb36201"
+  "gitHead": "fd93945ebc7775dac2de9b8eac42f7908c0c7009"
 }

package/tslib/balm.js

@@ -10,8 +10,10 @@ class Balm {
     constructor() {
         _Balm_config.set(this, void 0);
         __classPrivateFieldSet(this, _Balm_config, setConfig({}), "f");
-        BalmJS.loading = false;
-        loading.succeed();
+        if (!BalmJS.useCacache) {
+            BalmJS.loading = false;
+            loading.succeed();
+        }
     }
     get config() {
         return __classPrivateFieldGet(this, _Balm_config, "f");

package/tslib/bundler/webpack/config/common.js

@@ -1,8 +1,11 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import getLoaders from '../loaders.js';
 import { CHUNK } from '../../../config/constants.js';
+import getClientEnvironment from './env.js';
 function getDefaultPlugins(webpack, scripts) {
+    const env = getClientEnvironment(BalmJS.file.publicUrlOrPath.slice(0, -1));
     const plugins = [
+        new webpack.DefinePlugin(env.stringified),
         new webpack.IgnorePlugin({
             resourceRegExp: /^\.\/locale$/,
             contextRegExp: /moment$/

package/tslib/bundler/webpack/config/dev.js

@@ -4,9 +4,6 @@ function getDevConfig(webpack, scripts) {
     return merge(getCommonConfig(webpack, scripts), {
         mode: 'development',
         plugins: [
-            new webpack.DefinePlugin({
-                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
-            }),
             new webpack.HotModuleReplacementPlugin()
         ],
         devtool: scripts.sourceMap

package/tslib/bundler/webpack/config/env.js

@@ -0,0 +1,44 @@
+import dotenv from 'dotenv';
+import dotenvExpand from 'dotenv-expand';
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+    throw new Error('The NODE_ENV environment variable is required but was not specified.');
+}
+const dotenvFile = BalmJS.file.resolveApp('.env');
+const dotenvFiles = [
+    `${dotenvFile}.${NODE_ENV}.local`,
+    NODE_ENV !== 'test' && `${dotenvFile}.local`,
+    `${dotenvFile}.${NODE_ENV}`,
+    dotenvFile
+].filter(Boolean);
+dotenvFiles.forEach((dotenvFile) => {
+    if (node.fs.existsSync(dotenvFile)) {
+        dotenvExpand.expand(dotenv.config({
+            path: dotenvFile
+        }));
+    }
+});
+const BALM_APP = /^BALM_APP_/i;
+function getClientEnvironment(publicUrl) {
+    const raw = Object.keys(process.env)
+        .filter((key) => BALM_APP.test(key))
+        .reduce((env, key) => {
+        env[key] = process.env[key];
+        return env;
+    }, {
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        PUBLIC_URL: publicUrl,
+        ...BalmJS.config.scripts.nodeEnv
+    });
+    const stringified = {
+        'process.env': Object.keys(raw).reduce((env, key) => {
+            env[key] = JSON.stringify(raw[key]);
+            return env;
+        }, {})
+    };
+    BalmJS.logger.debug('webpack .env', stringified, {
+        pre: true
+    });
+    return { raw, stringified };
+}
+export default getClientEnvironment;

package/tslib/bundler/webpack/config/prod.js

@@ -25,9 +25,6 @@ function getProdConfig(webpack, scripts) {
             ]
         },
         plugins: [
-            new webpack.DefinePlugin({
-                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
-            }),
             ...(scripts.extractCss
                 ? [
                     new MiniCssExtractPlugin({

package/tslib/bundler/webpack/config/regex.js

@@ -4,7 +4,7 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 const jsRegex = /\.(js|mjs|jsx|ts|tsx)$/;
-const imgRegex = /\.(bmp|gif|jpe?g|png|svg)(\?.*)?$/;
+const imgRegex = /\.(bmp|gif|jpe?g|png|svg|webp)(\?.*)?$/;
 const fontRegex = /\.(woff2?|eot|ttf|otf)(\?.*)?$/;
 const mediaRegex = /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/;
 export { htmlRegex, cssRegex, cssModuleRegex, sassRegex, sassModuleRegex, jsRegex, imgRegex, fontRegex, mediaRegex };

package/tslib/bundler/webpack/loaders.js

@@ -1,5 +1,6 @@
 import { mergeWithRules, CustomizeRule } from 'webpack-merge';
 import LOADERS from './rules/index.js';
+import fileLoader from './rules/file.js';
 function getLoaders(customLoaders) {
     const enableDefaultLoaders = Object.assign({
         js: true,
@@ -41,6 +42,10 @@ function getLoaders(customLoaders) {
         module: {
             rules: customLoaders
         }
+    }, {
+        module: {
+            rules: [fileLoader()]
+        }
     });
     const defaultModule = result.module;
     BalmJS.logger.debug('webpack loaders', defaultModule.rules, {

package/tslib/bundler/webpack/rules/asset.js

@@ -4,7 +4,12 @@ function assetLoader() {
     return [
         {
             test: imgRegex,
-            type: 'asset/resource',
+            type: BalmJS.config.scripts.imageAssetType,
+            parser: {
+                dataUrlCondition: {
+                    maxSize: BalmJS.config.scripts.imageInlineSizeLimit
+                }
+            },
             generator: {
                 filename: BalmJS.file.assetsPath(`${ASSET.dir}/${BalmJS.config.paths.target.img}/[name].${ASSET.hash}[ext]`)
             }

package/tslib/bundler/webpack/rules/babel.js

@@ -1,6 +1,8 @@
 import { jsRegex } from '../config/regex.js';
 function jsLoader() {
-    const options = Object.assign({}, BalmJS.config.scripts.babelLoaderOptions);
+    const options = Object.assign({
+        cacheDirectory: true
+    }, BalmJS.config.scripts.babelLoaderOptions);
     return {
         test: jsRegex,
         include: [

package/tslib/bundler/webpack/rules/file.js

@@ -0,0 +1,8 @@
+import { jsRegex, htmlRegex } from '../config/regex.js';
+function fileLoader() {
+    return {
+        exclude: [/^$/, jsRegex, htmlRegex, /\.json$/],
+        type: 'asset/resource'
+    };
+}
+export default fileLoader;

package/tslib/bundler/webpack/rules/index.js

@@ -3,8 +3,8 @@ import cssLoader from './css.js';
 import htmlLoader from './html.js';
 import assetLoader from './asset.js';
 export default {
-    jsLoader,
-    cssLoader,
+    assetLoader,
     htmlLoader,
-    assetLoader
+    jsLoader,
+    cssLoader
 };

package/tslib/config/scripts.js

@@ -27,9 +27,12 @@ const useEsModule = true;
 const babelLoaderOptions = {};
 const postcssLoaderOptions = {};
 const htmlLoaderOptions = {};
+const imageAssetType = 'asset';
+const imageInlineSizeLimit = 8096;
 const extensions = [];
 const alias = {};
 const plugins = [];
+const nodeEnv = {};
 const injectHtml = false;
 const htmlPluginOptions = {};
 const extractCss = false;
@@ -67,9 +70,12 @@ export default {
     babelLoaderOptions,
     postcssLoaderOptions,
     htmlLoaderOptions,
+    imageAssetType,
+    imageInlineSizeLimit,
     extensions,
     alias,
     plugins,
+    nodeEnv,
     injectHtml,
     htmlPluginOptions,
     extractCss,

package/tslib/config/styles.js

@@ -1,6 +1,7 @@
 const extname = 'css';
 const minify = false;
 const atImportPaths = [];
+const entry = '';
 const options = {
     discardComments: {
         removeAll: true
@@ -23,6 +24,7 @@ export default {
     extname,
     minify,
     atImportPaths,
+    entry,
     options,
     sassOptions,
     lessOptions,

package/tslib/hello.js

@@ -1,3 +1,4 @@
+import { versions } from 'node:process';
 import { createRequire } from 'node:module';
 import fs from 'node:fs';
 import { URL } from 'node:url';
@@ -8,8 +9,11 @@ const balmCorePkg = JSON.parse(fs.readFileSync(new URL('../package.json', import
 global.requireModule = requireModule;
 global.BalmJS = {
     version: balmCorePkg.version,
-    emitter: new EventEmitter()
+    emitter: new EventEmitter(),
+    useCacache: +versions.node.split('.')[0] >= 18
 };
-BalmJS.loading = true;
-cacheBalmCore();
+if (!BalmJS.useCacache) {
+    BalmJS.loading = true;
+    cacheBalmCore();
+}
 export default balmCorePkg.version;

package/tslib/tasks/foundation/balm_style.js

@@ -14,12 +14,25 @@ class BalmStyleTask extends BalmTask {
             default:
                 extname = 'css';
         }
-        this.defaultInput = node.path.join(BalmJS.config.src.css, '**', `!(_*).${extname}`);
+        if (Array.isArray(BalmJS.config.styles.entry)) {
+            this.defaultInput = BalmJS.config.styles.entry.map((styleEntry) => node.path.join(BalmJS.config.src.css, styleEntry));
+        }
+        else {
+            if (BalmJS.config.styles.entry) {
+                this.defaultInput = node.path.join(BalmJS.config.src.css, BalmJS.config.styles.entry);
+            }
+            else {
+                this.defaultInput = node.path.join(BalmJS.config.src.css, '**', `!(_*).${extname}`);
+            }
+        }
         this.defaultOutput = BalmJS.config.env.isMP
             ? node.path.join(BalmJS.config.dest.base, ASSET.mpDir, BalmJS.config.paths.target.css)
             : BalmJS.config.dest.css;
     }
     handleStyle(style, output, options) {
+        BalmJS.logger.debug(`${this.name} entry`, this.defaultInput, {
+            pre: true
+        });
         const taskName = `${this.name} task`;
         const shouldUseSourceMap = !(BalmJS.config.env.isProd || BalmJS.config.styles.minify);
         let stream = gulp

package/tslib/utilities/compiling.js

@@ -6,12 +6,12 @@ class BalmCompiling {
         _BalmCompiling_firstCompile.set(this, true);
     }
     start() {
-        if (__classPrivateFieldGet(this, _BalmCompiling_firstCompile, "f")) {
+        if (!BalmJS.useCacache && __classPrivateFieldGet(this, _BalmCompiling_firstCompile, "f")) {
             loading.render('Compiling to JS...');
         }
     }
     stop() {
-        if (__classPrivateFieldGet(this, _BalmCompiling_firstCompile, "f")) {
+        if (!BalmJS.useCacache && __classPrivateFieldGet(this, _BalmCompiling_firstCompile, "f")) {
             __classPrivateFieldSet(this, _BalmCompiling_firstCompile, false, "f");
             loading.clear();
         }

package/tslib/utilities/file.js

@@ -1,10 +1,12 @@
 import getPublicUrlOrPath from './public-url.js';
 import { PUBLIC_URL } from '../config/constants.js';
 const appDirectory = node.fs.realpathSync(process.cwd());
-const resolveApp = (relativePath) => node.path.resolve(appDirectory, relativePath);
 class File {
+    resolveApp(relativePath) {
+        return node.path.resolve(appDirectory, relativePath);
+    }
     get publicUrlOrPath() {
-        return getPublicUrlOrPath(requireModule(resolveApp('package.json'))
+        return getPublicUrlOrPath(requireModule(this.resolveApp('package.json'))
             .homepage, process.env.PUBLIC_URL);
     }
     get stylePaths() {

package/tslib/utilities/loading.js

@@ -24,7 +24,7 @@ class BalmLoading {
     }
     succeed() {
         this.clear();
-        console.log(`BalmJS version: ${BalmJS.version}`);
+        console.log(`BalmJS core version: ${BalmJS.version}`);
     }
 }
 _BalmLoading_stream = new WeakMap(), _BalmLoading_frameIndex = new WeakMap(), _BalmLoading_frameCount = new WeakMap();