balm-core 4.5.4 → 4.7.0

package/README.md

@@ -13,6 +13,8 @@
   <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.
@@ -91,7 +93,7 @@ yarn add -D balm@next
 OR
 
 ```sh
-npm install -g balm-core@next
+npm install -g balm-core@next # Not supported for now (npm bug)
 npm install -D balm@next
 ```
 

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;
@@ -65,7 +66,6 @@ export type InputOptions = import('rollup').InputOptions;
 export type OutputOptions = import('rollup').OutputOptions;
 export type RollupOutput = import('rollup').RollupOutput;
 export type RollupBuild = import('rollup').RollupBuild;
-export type WatcherOptions = import('rollup').WatcherOptions;
 
 // Esbuild
 export type BuildOptions = import('esbuild').BuildOptions;
@@ -93,11 +93,15 @@ 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;
   sourceMap: string | boolean;
   target: string | string[] | false;
   externals: string | string[] | object | Function | RegExp;
@@ -110,7 +114,6 @@ export interface BalmScripts {
   // rollup
   inputOptions: Omit<InputOptions, 'acorn'>; // incompatible
   outputOptions: OutputOptions;
-  watchOptions: WatcherOptions;
   // esbuild
   buildOptions: BuildOptions;
   useTransform: 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/bootstrap/check_config.js

@@ -37,9 +37,9 @@ function checkConfig() {
   upgradeDeprecated('3.17.0', 'styles', 'darkSass');
   upgradeDeprecated('3.19.0', 'scripts', 'useCache'); // For v4
 
+  upgradeDeprecated('4.0.0', 'scripts', 'libraryTarget');
   upgradeDeprecated('4.5.0', 'scripts', 'excludeUrlResource');
   upgradeDeprecated('4.5.0', 'scripts', 'urlLoaderOptions');
-  upgradeDeprecated('4.5.0', 'scripts', 'extractCss');
 }
 
 export default checkConfig;

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
@@ -50,7 +61,7 @@ function getSplitChunks() {
     // All vendors
     const vendorsFilename = scripts.useCache ? `${scripts.vendorName}.${CHUNK.hash}.js` : `${scripts.vendorName}.js`;
     cacheGroups = {
-      defaultVendors: {
+      allVendors: {
         name: 'vendors',
         chunks: 'all',
         test: /[\\/](node_modules|bower_components)[\\/]/,
@@ -63,11 +74,11 @@ function getSplitChunks() {
     cacheGroups = {};
 
     for (const vendor of BalmJS.vendors) {
-      const cacheGroupKey = vendor.key;
+      const name = vendor.key;
       const cacheGroupModules = vendor.value.join('|');
-      const vendorFilename = scripts.useCache ? `${cacheGroupKey}.${CHUNK.hash}.js` : `${cacheGroupKey}.js`;
-      cacheGroups[cacheGroupKey] = {
-        name: cacheGroupKey,
+      const vendorFilename = scripts.useCache ? `${name}.${CHUNK.hash}.js` : `${name}.js`;
+      cacheGroups[`${name}Scripts`] = {
+        name,
         chunks: 'initial',
         test: new RegExp(`[\\\\/](${cacheGroupModules})[\\\\/].*(?<!\\.css)$`),
         filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${vendorFilename}`),
@@ -75,19 +86,20 @@ function getSplitChunks() {
         enforce: true
       };
     }
-  } // if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
-  //   // Custom styles in scripts
-  //   for (const entry of BalmJS.entries) {
-  //     const name = entry.key;
-  //     cacheGroups[`${name}Styles`] = {
-  //       type: 'css/mini-extract',
-  //       name,
-  //       chunks: (chunk: { name: string }) => chunk.name === name,
-  //       enforce: true
-  //     };
-  //   }
-  // }
+  }
 
+  if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
+    // Custom styles in scripts
+    for (const entry of BalmJS.entries) {
+      const name = entry.key;
+      cacheGroups[`${name}Styles`] = {
+        type: 'css/mini-extract',
+        name,
+        chunks: chunk => chunk.name === name,
+        enforce: true
+      };
+    }
+  }
 
   return Object.keys(cacheGroups).length ? {
     cacheGroups

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

@@ -1,15 +1,17 @@
 import TerserPlugin from 'terser-webpack-plugin';
-// import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpackBundleAnalyzer from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';
-import getCommonConfig from './common.js'; // import { CHUNK } from '../../../config/constants.js';
-
+import getCommonConfig from './common.js';
+import { CHUNK } from '../../../config/constants.js';
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run prod --report`
 // Set to `true` or `false` to always turn it on or off
-const bundleAnalyzerReport = process.env.npm_config_report || false; // const getCssFilename = (): string =>
-//   `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
+const bundleAnalyzerReport = process.env.npm_config_report || false;
+
+const getCssFilename = () => `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
 
 function getProdConfig(webpack, scripts) {
   const shouldUseSourceMap = scripts.sourceMap;
@@ -25,21 +27,13 @@ function getProdConfig(webpack, scripts) {
       minimizer: [new TerserPlugin({
         terserOptions,
         extractComments: false
-      }) // new CssMinimizerPlugin()
-      ]
+      }), new CssMinimizerPlugin()]
     },
-    plugins: [new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
-    }), // Extract css into its own file
-    // ...(scripts.extractCss
-    //   ? [
-    //       new MiniCssExtractPlugin({
-    //         filename: BalmJS.file.assetsPath(getCssFilename()),
-    //         chunkFilename: BalmJS.file.assetsPath(getCssFilename())
-    //       })
-    //     ]
-    //   : []),
-    // View the bundle analyzer report
+    plugins: [// Extract css into its own file
+    ...(scripts.extractCss ? [new MiniCssExtractPlugin({
+      filename: BalmJS.file.assetsPath(getCssFilename()),
+      chunkFilename: BalmJS.file.assetsPath(getCssFilename())
+    })] : []), // View the bundle analyzer report
     ...(bundleAnalyzerReport ? [new webpackBundleAnalyzer.BundleAnalyzerPlugin()] : [])],
     devtool: shouldUseSourceMap ? 'source-map' : false
   });

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/css.js

@@ -1,4 +1,4 @@
-// import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { cssRegex, cssModuleRegex, sassRegex, sassModuleRegex } from '../config/regex.js';
 
 // common function to get style loaders
@@ -6,15 +6,12 @@ function getStyleLoaders(styleLoader, cssOptions, preProcessor = '', sassOptions
   const {
     sourceMap
   } = cssOptions;
-  const loaders = [// BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss
-  //   ? {
-  //       loader: MiniCssExtractPlugin.loader,
-  //       options: {
-  //         esModule: BalmJS.config.scripts.useEsModule
-  //       }
-  //     }
-  //   : styleLoader,
-  styleLoader, {
+  const loaders = [BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss ? {
+    loader: MiniCssExtractPlugin.loader,
+    options: {
+      esModule: BalmJS.config.scripts.useEsModule
+    }
+  } : styleLoader, {
     loader: requireModule.resolve('css-loader'),
     options: cssOptions
   }, {

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/globals.js

@@ -6,7 +6,7 @@ import through2 from 'through2';
 import PluginError from 'plugin-error'; // Set env var for ORIGINAL cwd before anything touches it
 
 process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
-const gulpModule = path.join(process.env.BALM || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
+const gulpModule = path.join(process.env.BALM_ROOT || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
 
 if (fs.existsSync(gulpModule)) {
   // Chdir before requiring balm config to make sure

package/lib/config/scripts.js

@@ -68,20 +68,24 @@ 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
+const htmlPluginOptions = {};
+const extractCss = false; // Devtool
 
 const sourceMap = false; // Target
 
@@ -123,7 +127,6 @@ const ie8 = false;
 
 const inputOptions = {};
 const outputOptions = {};
-const watchOptions = {};
 /**
  * Esbuild bundler
  */
@@ -147,12 +150,15 @@ export default {
   babelLoaderOptions,
   postcssLoaderOptions,
   htmlLoaderOptions,
+  imageAssetType,
+  imageInlineSizeLimit,
   extensions,
   alias,
   plugins,
+  nodeEnv,
   injectHtml,
   htmlPluginOptions,
-  // extractCss,
+  extractCss,
   sourceMap,
   target,
   externals,
@@ -165,7 +171,6 @@ export default {
   // rollup
   inputOptions,
   outputOptions,
-  watchOptions,
   // esbuild
   buildOptions,
   useTransform,

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/plugins/sass.js

@@ -1,4 +1,4 @@
-// Reference `gulp-rename@5.1.0`
+// Reference `gulp-sass@5.1.0`
 import { Transform } from 'node:stream';
 import sass from 'sass';
 import replaceExtension from 'replace-ext';
@@ -32,7 +32,7 @@ const filePush = (file, sassObject, callback) => {
       const sourceFileIndex = sassMap.sources.indexOf(sassMapFile); // Prepend the path to all files in the sources array except the file that's being worked on
 
       sassMap.sources = sassMap.sources.map((source, index) => index === sourceFileIndex ? source : node.path.join(sassFileSrcPath, source));
-    } // Remove 'stdin' from souces and replace with filenames!
+    } // Remove 'stdin' from sources and replace with filenames!
 
 
     sassMap.sources = sassMap.sources.filter(src => src !== 'stdin' && src); // Replace the map file with the original filename (but new extension)

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.5.4",
+  "version": "4.7.0",
   "description": "BalmJS compiler core",
   "keywords": [
     "balm",
@@ -41,17 +41,19 @@
     "directory": "packages/balm-core"
   },
   "dependencies": {
-    "ansi-colors": "^4.1.1",
+    "ansi-colors": "^4.1.3",
     "async": "^3.2.3",
-    "autoprefixer": "^10.4.4",
-    "babel-loader": "^8.2.4",
-    "browser-sync": "^2.27.9",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "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",
-    "esbuild": "^0.14.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",
     "gulp-if": "^3.0.0",
@@ -65,47 +67,48 @@
     "html-loader": "^3.1.0",
     "html-minifier": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
-    "http-proxy-middleware": "^2.0.4",
+    "http-proxy-middleware": "^2.0.6",
     "imagemin": "^8.0.1",
     "istextorbinary": "^6.0.0",
     "less": "^4.1.2",
+    "mini-css-extract-plugin": "2.5.2",
     "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.3",
+    "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.1",
+    "rollup": "^2.74.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.50.0",
-    "sass-loader": "^12.6.0",
-    "ssh2": "^1.9.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.12.1",
+    "terser": "^5.13.1",
     "terser-webpack-plugin": "^5.3.1",
     "through2": "^4.0.2",
     "through2-concurrent": "^2.0.0",
-    "tslib": "^2.3.1",
+    "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.2"
+    "workbox-build": "^6.5.3"
   },
   "devDependencies": {
-    "@swc/core": "^1.2.0",
+    "@swc/core": "^1.2",
     "@types/express": "^4.17.13",
-    "@types/node": "^17.0.23",
-    "@types/uglify-js": "^3.13.1",
+    "@types/node": "^17",
+    "@types/uglify-js": "^3.13.2",
     "@types/webpack": "^5.28.0"
   },
   "optionalDependencies": {
@@ -115,7 +118,7 @@
     "imagemin-svgo": "^9.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   },
-  "gitHead": "d2febf04626afb74e03159a62d279ac6bd630461"
+  "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/bootstrap/check_config.js

@@ -28,8 +28,8 @@ function checkConfig() {
     upgradeRenamed('3.16.0', 'scripts', 'inject', 'useCache');
     upgradeDeprecated('3.17.0', 'styles', 'darkSass');
     upgradeDeprecated('3.19.0', 'scripts', 'useCache');
+    upgradeDeprecated('4.0.0', 'scripts', 'libraryTarget');
     upgradeDeprecated('4.5.0', 'scripts', 'excludeUrlResource');
     upgradeDeprecated('4.5.0', 'scripts', 'urlLoaderOptions');
-    upgradeDeprecated('4.5.0', 'scripts', 'extractCss');
 }
 export default checkConfig;

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$/
@@ -41,7 +44,7 @@ function getSplitChunks() {
             ? `${scripts.vendorName}.${CHUNK.hash}.js`
             : `${scripts.vendorName}.js`;
         cacheGroups = {
-            defaultVendors: {
+            allVendors: {
                 name: 'vendors',
                 chunks: 'all',
                 test: /[\\/](node_modules|bower_components)[\\/]/,
@@ -52,13 +55,13 @@ function getSplitChunks() {
     else if (BalmJS.vendors.length) {
         cacheGroups = {};
         for (const vendor of BalmJS.vendors) {
-            const cacheGroupKey = vendor.key;
+            const name = vendor.key;
             const cacheGroupModules = vendor.value.join('|');
             const vendorFilename = scripts.useCache
-                ? `${cacheGroupKey}.${CHUNK.hash}.js`
-                : `${cacheGroupKey}.js`;
-            cacheGroups[cacheGroupKey] = {
-                name: cacheGroupKey,
+                ? `${name}.${CHUNK.hash}.js`
+                : `${name}.js`;
+            cacheGroups[`${name}Scripts`] = {
+                name,
                 chunks: 'initial',
                 test: new RegExp(`[\\\\/](${cacheGroupModules})[\\\\/].*(?<!\\.css)$`),
                 filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${vendorFilename}`),
@@ -66,6 +69,17 @@ function getSplitChunks() {
             };
         }
     }
+    if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
+        for (const entry of BalmJS.entries) {
+            const name = entry.key;
+            cacheGroups[`${name}Styles`] = {
+                type: 'css/mini-extract',
+                name,
+                chunks: (chunk) => chunk.name === name,
+                enforce: true
+            };
+        }
+    }
     return Object.keys(cacheGroups).length ? { cacheGroups } : false;
 }
 function getCommonConfig(webpack, scripts) {

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

@@ -1,8 +1,12 @@
 import TerserPlugin from 'terser-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpackBundleAnalyzer from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';
 import getCommonConfig from './common.js';
+import { CHUNK } from '../../../config/constants.js';
 const bundleAnalyzerReport = process.env.npm_config_report || false;
+const getCssFilename = () => `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
 function getProdConfig(webpack, scripts) {
     const shouldUseSourceMap = scripts.sourceMap;
     const terserOptions = scripts.minifyOptions;
@@ -16,13 +20,19 @@ function getProdConfig(webpack, scripts) {
                 new TerserPlugin({
                     terserOptions,
                     extractComments: false
-                })
+                }),
+                new CssMinimizerPlugin()
             ]
         },
         plugins: [
-            new webpack.DefinePlugin({
-                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
-            }),
+            ...(scripts.extractCss
+                ? [
+                    new MiniCssExtractPlugin({
+                        filename: BalmJS.file.assetsPath(getCssFilename()),
+                        chunkFilename: BalmJS.file.assetsPath(getCssFilename())
+                    })
+                ]
+                : []),
             ...(bundleAnalyzerReport
                 ? [new webpackBundleAnalyzer.BundleAnalyzerPlugin()]
                 : [])

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/css.js

@@ -1,8 +1,16 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { cssRegex, cssModuleRegex, sassRegex, sassModuleRegex } from '../config/regex.js';
 function getStyleLoaders(styleLoader, cssOptions, preProcessor = '', sassOptions = {}) {
     const { sourceMap } = cssOptions;
     const loaders = [
-        styleLoader,
+        BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss
+            ? {
+                loader: MiniCssExtractPlugin.loader,
+                options: {
+                    esModule: BalmJS.config.scripts.useEsModule
+                }
+            }
+            : styleLoader,
         {
             loader: requireModule.resolve('css-loader'),
             options: cssOptions

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/globals.js

@@ -5,7 +5,7 @@ import { create } from 'browser-sync';
 import through2 from 'through2';
 import PluginError from 'plugin-error';
 process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
-const gulpModule = path.join(process.env.BALM || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
+const gulpModule = path.join(process.env.BALM_ROOT || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
 if (fs.existsSync(gulpModule)) {
     if (process.cwd() !== process.env.BALM_CWD) {
         process.chdir(process.env.BALM_CWD);

package/tslib/config/scripts.js

@@ -27,11 +27,15 @@ 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;
 const sourceMap = false;
 const target = ['web', 'es5'];
 const externals = '';
@@ -49,7 +53,6 @@ const vendorName = 'vendor';
 const ie8 = false;
 const inputOptions = {};
 const outputOptions = {};
-const watchOptions = {};
 const buildOptions = {};
 const useTransform = false;
 const transformOptions = {};
@@ -67,11 +70,15 @@ export default {
     babelLoaderOptions,
     postcssLoaderOptions,
     htmlLoaderOptions,
+    imageAssetType,
+    imageInlineSizeLimit,
     extensions,
     alias,
     plugins,
+    nodeEnv,
     injectHtml,
     htmlPluginOptions,
+    extractCss,
     sourceMap,
     target,
     externals,
@@ -83,7 +90,6 @@ export default {
     ie8,
     inputOptions,
     outputOptions,
-    watchOptions,
     buildOptions,
     useTransform,
     transformOptions

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();