add support for additional static asset file extensions

CHANGELOG.md

@@ -19,6 +19,8 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 * Config option
   for [custom resource asset rule filenames](https://webpack.js.org/configuration/module/#rulegeneratorfilename) using
   the `withAssetResourceRuleFilename()` method.
+* Config option for additional static assets file extensions using the `withAdditionalStaticAssetFileExtensions()`
+  method.
 
 ## [1.10.4] - 29.11.2022
 

README.md

@@ -1,7 +1,6 @@
 [![node >= 16.16.0](https://img.shields.io/badge/node-%3E%3D16.16.0-brightgreen)](https://nodejs.org/)
 [![BSI Studio >= 1.0.0](https://img.shields.io/badge/BSI%20Studio-%3E%3D1.0.0-brightgreen)](https://www.bsi-software.com/cx)
 [![BSI CX >= 1.3.0](https://img.shields.io/badge/BSI%20CX-%3E%3D1.3.0-brightgreen)](https://www.bsi-software.com/cx)
-[![Install size](https://img.shields.io/github/repo-size/bsi-software/bsi-cx-design-build?label=install%20size)](https://github.com/bsi-software/bsi-cx-design-build/releases)
 [![Latest available version](https://img.shields.io/github/v/tag/bsi-software/bsi-cx-design-build?label=npm)](https://github.com/bsi-software/bsi-cx-design-build/releases)
 
 [![Open GitHub issues](https://img.shields.io/github/issues/bsi-software/bsi-cx-design-build)](https://github.com/bsi-software/bsi-cx-design-build/issues)

dist/types.d.ts

@@ -563,6 +563,10 @@ declare module "src/build-config/build-config-interface" {
          * @returns {string | ((pathData: PathData, assetInfo?: AssetInfo) => string)}
          */
         get assetResourceRuleFilename(): string | ((pathData: any, assetInfo?: any) => string);
+        /**
+         * @returns {string[]}
+         */
+        get additionalStaticAssetFileExtensions(): string[];
         /**
          * @returns {{}[]}
          */
@@ -673,6 +677,11 @@ declare module "src/build-config/validated-build-config" {
          * @private
          */
         private _assetResourceRuleFilename;
+        /**
+         * @type {string[]}
+         * @private
+         */
+        private _additionalStaticAssetFileExtensions;
         /**
          * @type {Object[]}
          * @private
@@ -752,6 +761,10 @@ declare module "src/build-config/validated-build-config" {
          * @returns {string | ((pathData: PathData, assetInfo?: AssetInfo) => string)}
          */
         get assetResourceRuleFilename(): string | ((pathData: any, assetInfo?: any) => string);
+        /**
+         * @returns {string[]}
+         */
+        get additionalStaticAssetFileExtensions(): string[];
         /**
          * @returns {Object[]}
          */
@@ -813,6 +826,7 @@ declare module "src/build-config/default-build-config" {
         get additionalFilesToCopy(): any[];
         get copyAssetsFolderPath(): string;
         get assetResourceRuleFilename(): string;
+        get additionalStaticAssetFileExtensions(): any[];
         get designType(): import("src/design-type").DesignType;
         get devServerPort(): string;
         get hashZipFiles(): boolean;
@@ -1049,6 +1063,10 @@ declare module "src/build-config/build-config" {
          * @private
          */
         private _assetResourceRuleFilename;
+        /**
+         * @returns {string[]}
+         */
+        _additionalStaticAssetFileExtensions: any;
         /**
          * @type {{}[]}
          * @private
@@ -1128,6 +1146,10 @@ declare module "src/build-config/build-config" {
          * @returns {string | ((pathData: PathData, assetInfo?: AssetInfo) => string)}
          */
         get assetResourceRuleFilename(): string | ((pathData: any, assetInfo?: any) => string);
+        /**
+         * @returns {string[]}
+         */
+        get additionalStaticAssetFileExtensions(): string[];
         /**
          * @returns {{}[]}
          */
@@ -1281,6 +1303,17 @@ declare module "src/build-config/build-config" {
          * @returns {BuildConfig}
          */
         withAssetResourceRuleFilename(assetResourceRuleFilename: string | ((pathData: any, assetInfo?: any) => string)): BuildConfig;
+        /**
+         * Additional file extensions for static assets. The following file extensions are defined by default: avif, png,
+         * apng, jpg, jpeg, jfif, pjpeg, pjp, webp, gif, bmp, tiff, tif, raw, svg, eot, ttf, woff, woff2, pdf, ico,
+         * cur, mkv, 3gp, mp3, mp4, m4v, m4p, ogv, webm, aac, flac, mpg, mpeg, oga, ogg, wav, json5
+         *
+         * The extensions you define here will be added to the list.
+         *
+         * @param {...string} extensions
+         * @returns {BuildConfig}
+         */
+        withAdditionalStaticAssetFileExtensions(...extensions: string[]): BuildConfig;
         /**
          * Configure additional rules for the Webpack configuration. Be aware, that this can clash with the existing rules.
          *

src/build-config/build-config-interface.js

@@ -104,6 +104,12 @@ export default class BuildConfigInterface {
   get assetResourceRuleFilename() {
   }
 
+  /**
+   * @returns {string[]}
+   */
+  get additionalStaticAssetFileExtensions() {
+  }
+
   /**
    * @returns {{}[]}
    */

src/build-config/build-config-validator.js

@@ -100,6 +100,7 @@ export default class BuildConfigValidator {
     this._validateProperty('staticFileFolderPath', StringType);
     this._validateProperty('copyAssetsFolderPath', StringType);
     this._validateProperty('assetResourceRuleFilename', v => StringType(v) || FunctionType(v), true, false);
+    this._validateProperty('additionalStaticAssetFileExtensions', ArrayType);
     this._validateProperty('webpackPlugins', ArrayType, true, false);
     this._validateProperty('webpackRules', ArrayType, true, false);
   }

src/build-config/build-config.js

@@ -98,6 +98,10 @@ export default class BuildConfig {
    * @private
    */
   _assetResourceRuleFilename = undefined;
+  /**
+   * @returns {string[]}
+   */
+  _additionalStaticAssetFileExtensions = undefined;
   /**
    * @type {{}[]}
    * @private
@@ -226,6 +230,13 @@ export default class BuildConfig {
     return this._assetResourceRuleFilename;
   }
 
+  /**
+   * @returns {string[]}
+   */
+  get additionalStaticAssetFileExtensions() {
+    return this._additionalStaticAssetFileExtensions;
+  }
+
   /**
    * @returns {{}[]}
    */
@@ -452,6 +463,21 @@ export default class BuildConfig {
     return this;
   }
 
+  /**
+   * Additional file extensions for static assets. The following file extensions are defined by default: avif, png,
+   * apng, jpg, jpeg, jfif, pjpeg, pjp, webp, gif, bmp, tiff, tif, raw, svg, eot, ttf, woff, woff2, pdf, ico,
+   * cur, mkv, 3gp, mp3, mp4, m4v, m4p, ogv, webm, aac, flac, mpg, mpeg, oga, ogg, wav, json5
+   *
+   * The extensions you define here will be added to the list.
+   *
+   * @param {...string} extensions
+   * @returns {BuildConfig}
+   */
+  withAdditionalStaticAssetFileExtensions(...extensions) {
+    this._additionalStaticAssetFileExtensions = extensions;
+    return this;
+  }
+
   /**
    * Configure additional rules for the Webpack configuration. Be aware, that this can clash with the existing rules.
    *

src/build-config/default-build-config.js

@@ -20,6 +20,10 @@ export default class DefaultBuildConfig {
     return `${DistFolder.STATIC}/[name]-[contenthash][ext]`;
   }
 
+  get additionalStaticAssetFileExtensions() {
+    return [];
+  }
+
   get designType() {
     return LANDINGPAGE;
   }

src/build-config/validated-build-config.js

@@ -89,6 +89,11 @@ export default class ValidatedBuildConfig {
    * @private
    */
   _assetResourceRuleFilename = undefined;
+  /**
+   * @type {string[]}
+   * @private
+   */
+  _additionalStaticAssetFileExtensions = undefined;
   /**
    * @type {Object[]}
    * @private
@@ -217,6 +222,13 @@ export default class ValidatedBuildConfig {
     return this._assetResourceRuleFilename;
   }
 
+  /**
+   * @returns {string[]}
+   */
+  get additionalStaticAssetFileExtensions() {
+    return this._additionalStaticAssetFileExtensions;
+  }
+
   /**
    * @returns {Object[]}
    */

src/webpack-config-builder.js

@@ -12,7 +12,7 @@ import BsiCxWebpackLegacyDesignPlugin from './bsi-cx-webpack-legacy-design-plugi
 import BsiCxWebpackZipHashPlugin from './bsi-cx-webpack-zip-hash-plugin';
 import Constant from './constant';
 import File from './file';
-import {buildPublicPath, findArraySimilarities, getZipArchiveName, toPosixPath} from './utility';
+import {buildPublicPath, escapeRegex, findArraySimilarities, getZipArchiveName, toPosixPath} from './utility';
 import BsiCxTwigContextWebpackPlugin from './bsi-cx-twig-context-webpack-plugin';
 import BsiLessPropertyPlugin from './bsi-less-property-plugin';
 import BuildContext from './build-context';
@@ -344,7 +344,7 @@ export default class WebpackConfigBuilder {
    * @returns {string[]}
    */
   _getStaticAssetFileExtensions() {
-    return [
+    const defaults = [
       'avif',
       'png',
       'apng',
@@ -384,6 +384,10 @@ export default class WebpackConfigBuilder {
       'wav',
       'json5'
     ];
+
+    const extensions = new Set([...defaults, ...this.config.additionalStaticAssetFileExtensions]);
+
+    return [...extensions.values()].map(ext => ext.startsWith('.') ? ext : `.${ext}`);
   }
 
   /**
@@ -392,8 +396,8 @@ export default class WebpackConfigBuilder {
    * @returns {{}[]}
    */
   _getStaticAssetsRuleConfig() {
-    let fileExtensions = this._getStaticAssetFileExtensions().join('|');
-    let testRegex = new RegExp(`\.(${fileExtensions})$`, 'i');
+    let fileExtensions = this._getStaticAssetFileExtensions().map(escapeRegex).join('|');
+    let testRegex = new RegExp(fileExtensions, 'i');
     let inlineQueryRegex = new RegExp(QueryConstant.INLINE);
 
     return [

test/templates/landingpage/includes/footer.twig

@@ -1,3 +1,4 @@
 <footer data-bsi-dropzone="footer" data-bsi-dropzone-max-number-of-elements="1" data-bsi-dropzone-allowed-elements="content-text">
   {% include '../content-elements/content/text/template.hbs.twig' %}
+  {{ bsi_cx_asset('./file.md') }}
 </footer>

test/webpack.config.js

@@ -11,6 +11,7 @@ module.exports = WebpackConfigBuilder.fromConfigs(
     .withTargetVersion(Version.CX_22_0)
     .withRootPath(path.resolve(__dirname, 'templates', 'landingpage'))
     .withPropertiesFilePath('properties.js')
+    .withAdditionalStaticAssetFileExtensions('md')
     .withWebpackPlugins(new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery'