Merge branch 'master' of https://github.com/q2g/q2g-build

Author: thomashaenig

src/builder/extension-builder/extension-builder.ts

@@ -86,15 +86,8 @@ export class ExtensionBuilder extends WebpackBuilder {
         const config = this.webpackService.getConfig();
         const fileName = config.getOutFileName();
         const outDir = config.getOutDirectory();
-
         const plugins = [
-            new LogPlugin(),
-            new CleanWebpackPlugin({
-                cleanAfterEveryBuildPatterns: ["!**/wbfolder.wbl"],
-            }),
-            new CopyWebpackPlugin({
-                patterns: this.getBinaryFiles()
-            }),
+            ...super.loadWebpackPlugins(),
             new QextFilePlugin(this.extensionService.getQextConfiguration()),
             new ZipWebpackPlugin({
                 filename: `${fileName}.zip`,
@@ -105,27 +98,24 @@ export class ExtensionBuilder extends WebpackBuilder {
         if (config.getCi()) {
             plugins.push(this.createDeployPlugin(fileName));
         }
-
         return plugins;
     }
 
-    /**
-     * get binary files which should copy to dist folder
-     *
-     * @private
-     * @returns {Pattern[]}
-     * @memberof ExtensionBuilder
-     */
-    private getBinaryFiles(): Pattern[] {
+    protected getCleanWebpackPluginOptions(): IDataNode {
+        const options = super.getCleanWebpackPluginOptions();
+        return {...options, cleanAfterEveryBuildPatterns: ["!**/wbfolder.wbl"]};
+    }
 
-        const binFiles = [
+    protected getCopyWebpackPluginAssets(): Pattern[] {
+        const copyPaths = super.getCopyWebpackPluginAssets();
+        const binFiles  = [
+            ...copyPaths,
             { from: "wbfolder.wbl", to: "wbfolder.wbl" },
         ];
 
         if (existsSync(resolve(this.webpackService.getConfig().getProjectRoot(), "preview.png"))) {
             binFiles.push({ from: "preview.png", to: "preview.png" });
         }
-
         return binFiles;
     }
 

src/builder/webpack-builder/data/webpack.option.rules.ts

@@ -3,6 +3,10 @@ import { ValidationHelper } from "../../../helper";
 
 export const WebpackOptionRules: IOptionRuleSet  = {
 
+    rootDir: {
+        required: true,
+    },
+
     entryFile: {
         required: true,
     },
@@ -21,6 +25,17 @@ export const WebpackOptionRules: IOptionRuleSet  = {
         validatorFn: ValidationHelper.notEmptyAndNoWhitespace,
     },
 
+    binaries: {
+        required: false,
+        validatorFn: (value) => {
+            const isValid = Array.isArray(value);
+            return {
+                error: isValid ? [] : ["requires an array of relative paths, files"],
+                isValid,
+            };
+        },
+    },
+
     watch: {
         required: false,
     },

src/builder/webpack-builder/loader/image-to-base64.loader.ts

@@ -0,0 +1,50 @@
+import { existsSync, lstatSync, PathLike, readFileSync } from "fs";
+import { basename, extname, resolve } from "path";
+
+/**
+ * get image source data as bas64 format
+ */
+function getSourceData(path: PathLike): string {
+    const base64Source = Buffer.from(readFileSync(path)).toString("base64");
+    const imageType    = extname(basename(path.toString())).toLowerCase();
+
+    switch (imageType.substr(1)) {
+        case "jpg": case "jpeg":
+            return `data:image/jpg;base64,${base64Source}`;
+
+        case "gif":
+            return `data:image/gif;base64,${base64Source}`;
+
+        case "svg":
+            return `data:image/svg+xml;base64,${base64Source}`;
+
+        default:
+            return `data:image/png;base64,${base64Source}`;
+    }
+}
+
+/**
+ * find all matches from html loader,
+ * which one replace an image path with require("..../file");
+ *
+ * and replace by base64 data source
+ */
+export default function imageToBase64Loader(source) {
+
+    /**
+     * get all require imports from <img src=\"" + require("./assets/path/image") + "\" ...>
+     * and extract only image path from it which will converted into base 64 and replace
+     * full match by
+     *
+     * <img src=\"base64SourceString\" ...>
+     */
+    const requiredModules = /<img src=\\"(?:".*?require\(")([^"]+)(?:".*?(?=\\"\s))/g;
+    const replacedSource = source.replace(requiredModules, (match, relativePath) => {
+        const imagePath = resolve(this.context, relativePath);
+        if (existsSync(imagePath) && lstatSync(imagePath).isFile) {
+            return `<img src=\\"${getSourceData(imagePath)}`;
+        }
+        return match;
+    });
+    return replacedSource;
+}

src/builder/webpack-builder/model/webpack-config.model.ts

@@ -10,6 +10,8 @@ import { ConfigModel } from "../../../model/config.model";
  */
 export class WebpackConfigModel extends ConfigModel {
 
+    private binaries: string[] = [];
+
     /**
      * envrionment
      *
@@ -113,6 +115,8 @@ export class WebpackConfigModel extends ConfigModel {
 
     private extensionCi: boolean;
 
+    private rootDir: string;
+
     /**
      * get source directory which where the project is located
      *
@@ -203,6 +207,22 @@ export class WebpackConfigModel extends ConfigModel {
         return this.plugins;
     }
 
+    public setRootDir(path: string) {
+        this.rootDir = path;
+    }
+
+    public getRootDir(): string {
+        return this.rootDir;
+    }
+
+    public setBinaries(paths: string[]) {
+        this.binaries = paths;
+    }
+
+    public getBinaries(): string[] {
+        return this.binaries;
+    }
+
     /**
      * set optimizations for webpack
      *

src/builder/webpack-builder/plugins/index.ts

@@ -1,4 +1,6 @@
 import * as PluginClean from "clean-webpack-plugin";
+import * as WebpackCopyPlugin from "copy-webpack-plugin";
 
+export const CopyWebpackPlugin  = WebpackCopyPlugin;
 export const CleanWebpackPlugin = PluginClean;
 export * from "./log.plugin";

src/builder/webpack-builder/templates/module-rules.config.ts

@@ -11,16 +11,18 @@ const moduleRules: ModuleOptions = {
             { loader: "clean-requirejs-imports.loader" },
             { loader: "sanitize-html-imports.loader" },
         ],
-    }, {
-        test: /text!.*\.html$/,
-        use: [{
-            loader: "raw-loader",
-        }],
     }, {
         test: /.*\.html$/,
-        use: [{
-            loader: "raw-loader",
-        }],
+        use: [
+            {
+                loader: "image-to-base64.loader",
+            },
+            {
+                loader: "html-loader",
+                options: {
+                }
+            },
+        ],
     }, {
         loader: "json-loader",
         test: /\.json/,

src/builder/webpack-builder/webpack-builder.ts

@@ -1,11 +1,12 @@
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import { Pattern } from "copy-webpack-plugin";
 import { basename, resolve } from "path";
 import * as TerserWebpackPlugin from "terser-webpack-plugin";
 import { Compiler, Module, AutomaticPrefetchPlugin, ModuleOptions } from "webpack";
 import { IBuilder, IBuilderEnvironment } from "../../api";
 import { IDataNode } from "../../api/data-node";
 import { WebpackConfigModel } from "./model/webpack-config.model";
-import { LogPlugin } from "./plugins";
+import { CopyWebpackPlugin, LogPlugin } from "./plugins";
 import { WebpackService } from "./service/webpack.service";
 
 /**
@@ -44,12 +45,10 @@ export class WebpackBuilder implements IBuilder {
      * @memberof WebpackBuilder
      */
     public configure(config: any): void {
-
         /** hotfix rewrite entry file to be an object, se we can apply multiple entry files */
         const entryFile = {};
-        entryFile[config.outFileName || basename(config.entryFile, "ts")] = config.entryFile;
+        entryFile[config.outFileName || basename(config.entryFile, "ts")] = resolve(config.rootDir, config.entryFile),
         config.entryFile = entryFile;
-
         this.webpackService.setOptions({
             ...this.initialConfig,
             ...config,
@@ -184,13 +183,13 @@ export class WebpackBuilder implements IBuilder {
      * @memberof WebpackBuilder
      */
     protected loadWebpackPlugins(): AutomaticPrefetchPlugin[] {
-
         /** cast to any to fix typings */
-        const cleanWebpackPlugin: AutomaticPrefetchPlugin = new CleanWebpackPlugin() as any;
-
         const plugins: AutomaticPrefetchPlugin[] = [
             new LogPlugin(),
-            cleanWebpackPlugin,
+            new CleanWebpackPlugin(this.getCleanWebpackPluginOptions()),
+            new CopyWebpackPlugin({
+                patterns: this.getCopyWebpackPluginAssets()
+            }),
         ];
         return plugins;
     }
@@ -206,4 +205,17 @@ export class WebpackBuilder implements IBuilder {
         const moduleRules: any = await import("./templates/module-rules.config");
         return moduleRules.default;
     }
+
+    protected getCleanWebpackPluginOptions(): IDataNode {
+        return {};
+    }
+
+    protected getCopyWebpackPluginAssets(): Pattern[] {
+        const binaries = this.webpackService.getConfig().getBinaries();
+        if (binaries && Array.isArray(binaries)) {
+            const rootDir  = this.webpackService.getConfig().getRootDir();
+            return binaries.map((binary) => ({ from: `${rootDir}/${binary}`, to: binary }));
+        }
+        return [];
+    }
 }