powerbi-visuals-tools 4.3.2 → 5.0.0

package/src/VisualManager.ts

@@ -0,0 +1,220 @@
+/*
+ *  Power BI Visual CLI
+ *
+ *  Copyright (c) Microsoft Corporation
+ *  All rights reserved.
+ *  MIT License
+ *
+ *  Permission is hereby granted, free of charge, to any person obtaining a copy
+ *  of this software and associated documentation files (the ""Software""), to deal
+ *  in the Software without restriction, including without limitation the rights
+ *  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ *  copies of the Software, and to permit persons to whom the Software is
+ *  furnished to do so, subject to the following conditions:
+ *
+ *  The above copyright notice and this permission notice shall be included in
+ *  all copies or substantial portions of the Software.
+ *
+ *  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ *  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ *  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ *  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ *  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ *  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ *  THE SOFTWARE.
+ */
+
+"use strict";
+
+import webpack, { Compiler, Stats } from "webpack";
+import WebpackDevServer from "webpack-dev-server";
+import childProcess from 'child_process';
+import fs from 'fs-extra';
+import path from 'path';
+
+import ConsoleWriter from './ConsoleWriter.js';
+import VisualGenerator from './VisualGenerator.js';
+import { readJsonFromRoot, readJsonFromVisual } from './utils.js';
+import WebpackWrap, { WebpackOptions } from './WebPackWrap.js';
+import TemplateFetcher from "./TemplateFetcher.js";
+
+interface GenerateOptions {
+    force: boolean;
+    template: string;
+}
+
+const PBIVIZ_FILE = 'pbiviz.json';
+
+/**
+ * Represents an instance of a visual package based on file path
+ */
+export default class VisualManager {
+    public basePath: string;
+    public pbivizConfig;
+    private webpackConfig;
+    private compiler: Compiler;
+    private webpackDevServer: WebpackDevServer;
+
+    constructor(rootPath: string) {
+        this.basePath = rootPath;
+    }
+
+    public prepareVisual() {
+        if (this.doesPBIVIZExists()) {
+            this.pbivizConfig = readJsonFromVisual(PBIVIZ_FILE, this.basePath);
+        } else {
+            throw new Error(PBIVIZ_FILE + ' not found. You must be in the root of a visual project to run this command.')
+        }
+        return this;
+    }
+
+    public async initializeWebpack(webpackOptions: WebpackOptions) {
+        const webpackWrap = new WebpackWrap();
+        this.webpackConfig = await webpackWrap.generateWebpackConfig(this, webpackOptions)
+
+        this.compiler = webpack(this.webpackConfig);
+
+        return this;
+    }
+
+    public generatePackage() {
+        const callback = (err: Error, stats: Stats) => {
+            this.parseCompilationResults(err, stats)
+        }
+        this.compiler.run(callback);
+    }
+
+    public startWebpackServer(generateDropFiles: boolean = false) {
+        ConsoleWriter.blank();
+        ConsoleWriter.info('Starting server...');
+        try {
+            if (generateDropFiles) {
+                this.prepareDropFiles();
+            }
+
+            this.webpackDevServer = new WebpackDevServer({
+                ...this.webpackConfig.devServer,
+                client: false,
+                hot: false,
+                devMiddleware: {
+                    writeToDisk: true    
+                }
+            }, this.compiler);
+
+            (async () => {
+                await this.webpackDevServer.start();
+                ConsoleWriter.info(`Server listening on port ${this.webpackConfig.devServer.port}`);
+            })();
+
+            process.on('SIGINT', this.stopServer);
+            process.on('SIGTERM', this.stopServer);
+        } catch (e) {
+            ConsoleWriter.error(e.message);
+            process.exit(1);
+        }
+    }
+
+    public displayInfo() {
+        if (this.pbivizConfig) {
+            ConsoleWriter.infoTable(this.pbivizConfig);
+        } else {
+            ConsoleWriter.error('Unable to load visual info. Please ensure the package is valid.');
+        }
+    }
+
+    /**
+     * Creates a new visual package
+     */
+    static async createVisual(rootPath: string, visualName: string, generateOptions: GenerateOptions): Promise<VisualManager | void> {
+        ConsoleWriter.info('Creating new visual');
+        if (generateOptions.force) {
+            ConsoleWriter.warning('Running with force flag. Existing files will be overwritten');
+        }
+
+        try {
+            const config = readJsonFromRoot('config.json');
+            if(config.visualTemplates[generateOptions.template]){
+                new TemplateFetcher( generateOptions.template, visualName, undefined )
+                    .fetch();
+                return;
+            }
+            const newVisualPath = await VisualGenerator.generateVisual(rootPath, visualName, generateOptions)
+            await VisualManager.installPackages(newVisualPath).then(() => ConsoleWriter.done('Visual creation complete'))
+
+            return new VisualManager(newVisualPath);
+        } catch (error) {
+            ConsoleWriter.error(['Unable to create visual.\n', error]);
+            process.exit(1);
+        }
+    }
+
+    /**
+     * Install npm dependencies for visual
+     */
+    static installPackages(visualPath: string): Promise<void> {
+        return new Promise(function (resolve, reject) {
+            ConsoleWriter.info('Installing packages...');
+            childProcess.exec(`npm install`, { cwd: visualPath },
+                (err) => {
+                    if (err) {
+                        reject(new Error('Package install failed.'));
+                    } else {
+                        ConsoleWriter.info('Installed packages.');
+                        resolve();
+                    }
+                });
+        });
+    }
+
+    private doesPBIVIZExists() {
+        return fs.existsSync(PBIVIZ_FILE);
+    }
+
+    private prepareDropFiles() {
+        this.webpackConfig.devServer.onBeforeSetupMiddleware = (devServer) => {
+            const { headers, publicPath, static: { directory } } = this.webpackConfig.devServer;
+            const assets = [ 'visual.js`', 'visual.css', 'pbiviz.json' ]
+
+            const setHeaders = (res) => {
+                Object.getOwnPropertyNames(headers)
+                    .forEach(property => res.header(property, headers[property]));
+            };
+            const readFile = (file, res) => {
+                fs.readFile(file).then(function (content) {
+                    res.write(content);
+                    res.end();
+                });
+            };
+
+            assets.forEach(asset => {
+                devServer.app.get(`${publicPath}/${asset}`, function (req, res) {
+                    setHeaders(res);
+                    readFile(path.join(directory, asset), res);
+                });
+            });
+        };
+    }
+
+    private stopServer() {
+        ConsoleWriter.blank();
+        ConsoleWriter.info("Stopping server...");
+        if (this.webpackDevServer) {
+            this.webpackDevServer.close();
+            this.webpackDevServer = null;
+        }
+    }
+
+    private parseCompilationResults(err: Error, stats: Stats) {
+        ConsoleWriter.blank();
+        if (err) {
+            ConsoleWriter.error(`Package wasn't created. ${JSON.stringify(err)}`);
+        }
+        if (stats?.compilation.errors.length) {
+            stats.compilation.errors.forEach(error => ConsoleWriter.error(error.message));
+            ConsoleWriter.error(`Package wasn't created. ${stats.compilation.errors.length} errors found.`);
+        }
+        if (!err && !stats?.compilation.errors.length) {
+            ConsoleWriter.done('Build completed successfully');
+        }
+    }
+}

package/src/WebPackWrap.ts

@@ -0,0 +1,299 @@
+"use strict";
+
+import fs from 'fs-extra';
+import os from 'os';
+import path from 'path';
+import webpack from 'webpack';
+import util from 'util';
+const exec = util.promisify(processExec);
+import { exec as processExec } from 'child_process';
+import ExtraWatchWebpackPlugin from 'extra-watch-webpack-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { PowerBICustomVisualsWebpackPlugin } from 'powerbi-visuals-webpack-plugin';
+import ConsoleWriter from './ConsoleWriter.js';
+import { resolveCertificate } from "./CertificateTools.js";
+import lodashCloneDeep from 'lodash.clonedeep';
+import { readJsonFromRoot, readJsonFromVisual } from './utils.js'
+
+const config = readJsonFromRoot('config.json');
+const npmPackage = readJsonFromRoot('package.json');
+
+const visualPlugin = "visualPlugin.ts";
+const encoding = "utf8";
+
+export interface WebpackOptions {
+    devMode: boolean;
+    generateResources: boolean;
+    generatePbiviz: boolean;
+    minifyJS: boolean;
+    minify: boolean;
+    stats: boolean;
+    compression?: number;
+    devtool?: string;
+    devServerPort?: number;
+    fast?: boolean;
+}
+
+export default class WebPackWrap {
+    private pbiviz;
+    private webpackConfig;
+
+    static async prepareFoldersAndFiles(visualPackage) {
+        const tmpFolder = path.join(visualPackage.basePath, ".tmp");
+        const precompileFolder = path.join(visualPackage.basePath, config.build.precompileFolder);
+        const dropFolder = path.join(visualPackage.basePath, config.build.dropFolder);
+        const packageDropFolder = path.join(visualPackage.basePath, config.package.dropFolder);
+        const visualPluginFile = path.join(visualPackage.basePath, config.build.precompileFolder, visualPlugin);
+        await fs.ensureDir(tmpFolder);
+        await fs.ensureDir(precompileFolder);
+        await fs.ensureDir(dropFolder);
+        await fs.ensureDir(packageDropFolder);
+        await fs.createFile(visualPluginFile);
+    }
+
+    static loadAPIPackage() {
+        try {
+            return import("file://" + path.join(process.cwd(), "node_modules", "powerbi-visuals-api", "index.js"));
+        } catch (ex) {
+            return null;
+        }
+    }
+
+    async installAPIpackage() {
+        const apiVersion = this.pbiviz.apiVersion ? `~${this.pbiviz.apiVersion}` : "latest";
+        try {
+            ConsoleWriter.info(`Installing API: ${apiVersion}...`);
+            const {
+                stdout,
+                stderr
+            } = await exec(`npm install --save powerbi-visuals-api@${apiVersion}`);
+            if (stdout) ConsoleWriter.info(stdout);
+            if (stderr) ConsoleWriter.warning(stderr);
+            return true;
+        } catch (ex) {
+            if (ex.message.indexOf("No matching version found for powerbi-visuals-api") !== -1) {
+                throw new Error(`Error: Invalid API version: ${apiVersion}`);
+            }
+            ConsoleWriter.error(`npm install powerbi-visuals-api@${apiVersion} failed`);
+            return false;
+        }
+    }
+
+    enableOptimization() {
+        this.webpackConfig.mode = "production";
+        this.webpackConfig.optimization = {
+            concatenateModules: false,
+            minimize: true
+        };
+    }
+
+    async configureDevServer(visualPackage, port = 8080) {
+        const options = await resolveCertificate();
+
+        this.webpackConfig.devServer = {
+            ...this.webpackConfig.devServer,
+            hot: false,
+            port,
+            static: {
+                directory: path.join(visualPackage.basePath, config.build.dropFolder),
+                publicPath: config.server.assetsRoute
+            },
+            server: {
+                type: 'https',
+                options: {
+                    key: options.key,
+                    cert: options.cert,
+                    pfx: options.pfx,
+                    passphrase: options.passphrase
+                }
+            }
+        };
+    }
+
+    configureVisualPlugin(options, tsconfig, visualPackage) {
+        const visualJSFilePath = tsconfig.compilerOptions.out || tsconfig.compilerOptions.outDir;
+        this.webpackConfig.output.path = path.join(visualPackage.basePath, config.build.dropFolder);
+        this.webpackConfig.output.filename = "[name]";
+        const visualPluginPath = path.join(process.cwd(), config.build.precompileFolder, visualPlugin);
+        this.webpackConfig.watchOptions.ignored.push(visualPluginPath)
+        if (tsconfig.compilerOptions.out) {
+            this.webpackConfig.entry = {
+                "visual.js": visualJSFilePath
+            };
+        } else {
+            this.webpackConfig.entry["visual.js"] = [visualPluginPath];
+            this.webpackConfig.output.library = `${this.pbiviz.visual.guid}${options.devMode ? "_DEBUG" : ""}`;
+            this.webpackConfig.output.libraryTarget = 'var';
+        }
+    }
+
+    async getEnvironmentDetails() {
+        const env = {
+            nodeVersion: process.versions.node,
+            osPlatform: await os.platform(),
+            osVersion: await os.version ?? "undefined",
+            osReleaseVersion: await os.release(),
+            toolsVersion: npmPackage.version
+        };
+        return env;
+    }
+
+    async configureCustomVisualsWebpackPlugin(visualPackage, options, tsconfig) {
+        const pluginConfiguration = lodashCloneDeep(visualPackage.pbivizConfig);
+        //(?=\D*$) - positive look-ahead to find last version symbols and exclude any non-digit symbols after the version.
+        const regexFullVersion = /(?:\d+\.?){1,3}(?=\D*$)/;
+        const regexMinorVersion = /\d+(?:\.\d+)?/;
+        let apiVersionInstalled;
+        try {
+            const subprocess = await exec('npm list powerbi-visuals-api version')
+            apiVersionInstalled = subprocess.stdout.match(regexFullVersion)[0];
+        } catch (err) {
+            ConsoleWriter.warning(`"powerbi-visuals-api" is not installed`);
+        }
+        // if the powerbi-visual-api package wasn't installed
+        // install the powerbi-visual-api, with version from apiVersion in pbiviz.json
+        // or the latest API, if apiVersion is absent in pbiviz.json
+        if (!apiVersionInstalled || !this.pbiviz.apiVersion || this.pbiviz.apiVersion.match(regexMinorVersion)[0] != apiVersionInstalled.match(regexMinorVersion)[0]) {
+            ConsoleWriter.warning(`installed "powerbi-visuals-api" version - "${apiVersionInstalled}", is not match with the version specified in pbviz.json - "${this.pbiviz.apiVersion}".`);
+            await this.installAPIpackage();
+        }
+
+        // pluginConfiguration.env = await this.getEnvironmentDetails();
+
+        const api = await WebPackWrap.loadAPIPackage();
+        pluginConfiguration.apiVersion = api.version;
+        pluginConfiguration.capabilitiesSchema = api.schemas.capabilities;
+        pluginConfiguration.pbivizSchema = api.schemas.pbiviz;
+        pluginConfiguration.stringResourcesSchema = api.schemas.stringResources;
+        pluginConfiguration.dependenciesSchema = api.schemas.dependencies;
+
+
+        pluginConfiguration.customVisualID = `CustomVisual_${this.pbiviz.visual.guid}`.replace(/[^\w\s]/gi, '');
+        pluginConfiguration.devMode = (typeof options.devMode === "undefined") ? true : options.devMode;
+        pluginConfiguration.generatePbiviz = options.generatePbiviz;
+        pluginConfiguration.generateResources = options.generateResources;
+        pluginConfiguration.minifyJS = options.minifyJS;
+        const dependenciesPath = this.pbiviz.dependencies && path.join(process.cwd(), this.pbiviz.dependencies);
+        pluginConfiguration.dependencies = fs.existsSync(dependenciesPath) ? this.pbiviz.dependencies : null;
+        pluginConfiguration.modules = typeof tsconfig.compilerOptions.outDir !== "undefined";
+        pluginConfiguration.visualSourceLocation = path.posix.relative(config.build.precompileFolder, tsconfig.files[0]).replace(/(\.ts)x|\.ts/, "");
+        pluginConfiguration.pluginLocation = path.join(config.build.precompileFolder, "visualPlugin.ts");
+        pluginConfiguration.compression = options.compression;
+        return pluginConfiguration;
+    }
+
+    async appendPlugins(options, visualPackage, tsconfig) {
+        const pluginConfiguration = await this.configureCustomVisualsWebpackPlugin(visualPackage, options, tsconfig);
+
+        let statsFilename = config.build.stats.split("/").pop();
+        const statsLocation = config.build.stats.split("/").slice(0, -1).join(path.sep);
+        statsFilename = statsFilename?.split(".").slice(0, -1).join(".");
+        statsFilename = `${statsFilename}.${options.devMode ? "dev" : "prod"}.html`;
+
+        if (options.stats) {
+            this.webpackConfig.plugins.push(
+                new BundleAnalyzerPlugin({
+                    reportFilename: path.join(statsLocation, statsFilename),
+                    openAnalyzer: false,
+                    analyzerMode: `static`
+                })
+            );
+        }
+        this.webpackConfig.plugins.push(
+            new PowerBICustomVisualsWebpackPlugin(pluginConfiguration),
+            new ExtraWatchWebpackPlugin({
+                files: this.pbiviz.capabilities
+            })
+        );
+
+        if (options.devtool === "source-map" && this.webpackConfig.devServer.port) {
+            this.webpackConfig.plugins.push(
+                new webpack.SourceMapDevToolPlugin({
+                    filename: '[file].map',
+                    publicPath: `https://localhost:${this.webpackConfig.devServer.port}/assets/`
+                })
+            );
+        }
+    }
+
+    async useLoader({
+        fast = false
+    }) {
+        let tsOptions = {};
+        if (fast) {
+            tsOptions = {
+                transpileOnly: false,
+                experimentalWatchApi: false
+            };
+        }
+        this.webpackConfig.module.rules.push({
+            test: /(\.ts)x?$/,
+            use: [
+                {
+                    loader: 'ts-loader',
+                    options: tsOptions
+                }
+            ]
+        });
+    }
+
+    async prepareWebPackConfig(visualPackage, options: WebpackOptions, tsconfig) {
+        this.webpackConfig = Object.assign({}, await import('./webpack.config.js')).default;
+        if (options.minifyJS) {
+            this.enableOptimization();
+        }
+
+        if (options.devtool) {
+            this.webpackConfig.devtool = options.devtool;
+        }
+
+        await this.appendPlugins(options, visualPackage, tsconfig);
+        await this.configureDevServer(visualPackage, options.devServerPort);
+        await this.configureVisualPlugin(options, tsconfig, visualPackage);
+        await this.useLoader({
+            fast: options.fast
+        });
+
+        return this.webpackConfig;
+    }
+
+    async assemblyExternalJSFiles(visualPackage) {
+        const externalJSFilesContent = "";
+        const externalJSFilesPath = path.join(visualPackage.basePath, config.build.precompileFolder, "externalJS.js");
+        await fs.writeFile(
+            externalJSFilesPath,
+            externalJSFilesContent, {
+            encoding: encoding
+        });
+
+        return externalJSFilesPath;
+    }
+
+    async generateWebpackConfig(visualPackage, options: WebpackOptions = {
+        devMode: false,
+        generateResources: false,
+        generatePbiviz: false,
+        minifyJS: true,
+        minify: true,
+        devServerPort: 8080,
+        fast: false,
+        compression: 0,
+        stats: true
+    }) {
+        const tsconfig = readJsonFromVisual('tsconfig.json');
+        this.pbiviz = readJsonFromVisual('pbiviz.json');
+
+        const capabilitiesPath = this.pbiviz.capabilities;
+        visualPackage.pbivizConfig.capabilities = capabilitiesPath;
+
+        const dependenciesPath = this.pbiviz.dependencies && path.join(process.cwd(), this.pbiviz.dependencies);
+        const dependenciesFile = fs.existsSync(dependenciesPath) && JSON.parse(fs.readFileSync(dependenciesPath));
+        visualPackage.pbivizConfig.dependencies = typeof dependenciesFile === 'object' ? dependenciesFile : {};
+
+        await WebPackWrap.prepareFoldersAndFiles(visualPackage);
+
+        const webpackConfig = await this.prepareWebPackConfig(visualPackage, options, tsconfig);
+
+        return webpackConfig;
+    }
+}

package/src/utils.ts

@@ -0,0 +1,41 @@
+import fs from 'fs-extra';
+import https from "https";
+import path from "path";
+import os from "os";
+
+export function download(url, pathToFile) {
+    return new Promise((resolve, reject) => {
+        const fileStream = fs.createWriteStream(pathToFile);
+        https.get(url, (res) => {
+            res.pipe(fileStream);
+            fileStream.on('close', () => resolve(fileStream));
+            res.on('error', (error) => reject(error));
+        })
+            .on('error', (error) => reject(error));
+    });
+}
+
+export function createFolder(folderName): string {
+    const folder = path.join("./", folderName);
+    fs.ensureDirSync(folder);
+    return folder;
+}
+
+export function getRootPath(): string {
+    const isLinux = os.platform() === "linux"
+    const pathToDirectory = import.meta.url.split(isLinux ? "file://" : "file:///")[1];
+    return path.join(pathToDirectory, "../..");
+}
+
+export function readFileFromRoot(filePath: string) {
+    return fs.readFileSync(path.join(getRootPath(), filePath), "utf8")
+}
+
+export function readJsonFromRoot(filePath: string) {
+    return JSON.parse(readFileFromRoot(filePath));
+}
+
+export function readJsonFromVisual(filePath: string, visualPath?: string) {
+    return JSON.parse(fs.readFileSync(path.join(visualPath ?? process.cwd(), filePath), "utf8"));
+}
+