@wavemaker-ai/angular-app 1.0.0-rc.309

package/build-scripts/optimize-css.gulpfile.js

@@ -0,0 +1,101 @@
+const gulp = require("gulp");
+const filter = require("gulp-filter");
+const purify = require("gulp-purify-css");
+const gzip = require("gulp-gzip");
+const brotli = require("gulp-brotli");
+const rename = require("gulp-rename");
+const clean = require("gulp-clean");
+const { series, parallel } = require("gulp");
+
+// #1 | Optimize CSS
+gulp.task("css", () => {
+    return gulp
+        .src("../dist/ng-bundle/*")
+        .pipe(
+            filter([
+                "**/styles.*.css",
+                "**/wm-styles.css",
+                "!**/wm-styles.*.css",
+                "!**/*.br.*",
+                "!**/*.gzip.*"
+            ])
+        )
+        .pipe(
+            purify(["../dist/ng-bundle/*.js"], {
+                info: true,
+                minify: true,
+                rejected: true,
+                whitelist: []
+            })
+        )
+        .pipe(gulp.dest("../dist/test/"));
+});
+// # 2 | Genereate GZIP files
+gulp.task("css-gzip", () => {
+    return gulp
+        .src("../dist/test/*")
+        .pipe(filter(["**/*.css", "!**/*.br.*", "!**/*.gzip.*"]))
+        .pipe(gzip({ append: false }))
+        .pipe(
+            rename(path => {
+                path.extname = ".gzip" + path.extname;
+            })
+        )
+        .pipe(gulp.dest("../dist/test/"));
+});
+// # 3 | Genereate BROTLI files
+gulp.task("css-br", () => {
+    return gulp
+        .src("../dist/test/*")
+        .pipe(filter(["**/*.css", "!**/*.br.*", "!**/*.gzip.*"]))
+        .pipe(brotli.compress())
+        .pipe(
+            rename(path => {
+                path.extname =
+                    ".br" +
+                    path.basename.substring(
+                        path.basename.lastIndexOf("."),
+                        path.basename.length
+                    );
+                path.basename = path.basename.substring(
+                    0,
+                    path.basename.lastIndexOf(".")
+                );
+            })
+        )
+        .pipe(gulp.dest("../dist/test"));
+});
+// # 4 | Clear ng-build CSS
+gulp.task("clear-ng-css", () => {
+    return gulp
+        .src("../dist/ng-bundle/*")
+        .pipe(filter(["**/styles*.css", "**/wm-styles*.css"]))
+        .pipe(clean({ force: true }));
+});
+// # 5 | Copy optimized CSS
+gulp.task("copy-op-css", () => {
+    return gulp.src("../dist/test/*").pipe(gulp.dest("../dist/ng-bundle/"));
+});
+// #6 | Clear temp folder
+gulp.task("clear-test", () => {
+    return gulp
+        .src("../dist/test/", { read: false })
+        .pipe(clean({ force: true }));
+});
+
+/*
+ ### Order of Tasks ###
+ * Add hash to the wm-styles.css
+ * Optimize the styles generated from ng build
+ * Create compressed files for optimized css
+ * Clear the angular build output css
+ * Copy the optimized css to ng-bundle folder
+ * Clear the temp folder
+ */
+exports.default = series(
+    "css",
+    parallel("css-gzip", "css-br"),
+    "clear-ng-css",
+    "copy-op-css",
+    "clear-test"
+);

package/build-scripts/post-build.js

@@ -0,0 +1,217 @@
+const util = require(`util`);
+const fs = require('fs-extra');
+const readFile = util.promisify(fs.readFile);
+const writeFile = util.promisify(fs.writeFile);
+const copyFile = util.promisify(fs.copyFile);
+const exec = util.promisify(require('child_process').exec);
+const cheerio = require(`cheerio`);
+const crypto = require(`crypto`);
+
+let isProdBuild;
+let isDevBuild;
+let $;
+
+const addScriptForWMStylesPath = (wm_styles_path) => {
+    // wm_styles_path will not be present for mobile apps
+    if (wm_styles_path) {
+        let styleType = wm_styles_path.split(".").pop();
+        if(styleType==="css"){
+            $("head").append(
+                `<link rel="stylesheet" type="text/css" href="${wm_styles_path}"/>`
+            );
+        } else {
+            $("body").append(
+                `<script type="text/javascript" defer="true" src="${wm_styles_path}"></script>`
+            );
+        }
+    }
+}
+const addPrintStylesPath = (print_styles_path) => {
+    $("head").append(
+        `<link rel="stylesheet" type="text/css" media="print" href="${print_styles_path}"/>`
+    );
+}
+
+/**
+ * Read the console arguments and prepare the key value pairs.
+ * @returns Object console arguments as key value pairs
+ */
+const getArgs = (customArgs) => {
+    const args = {};
+    let arguments = customArgs || process.argv;
+    arguments.slice(2, process.argv.length)
+        .forEach(arg => {
+            if (arg.slice(0, 2) === '--') {
+                const longArg = arg.split('=');
+                const longArgFlag = longArg[0].slice(2, longArg[0].length);
+                const longArgValue = longArg.length > 2 ? longArg.slice(1, longArg.length).join('=') : longArg[1];
+                args[longArgFlag] = longArgValue;
+            }
+        });
+    return args;
+}
+
+const args = getArgs();
+
+// Files that are moved out of ng-bundle and hence not to be updated.
+const SKIP_UPDATE = ['index.html', 'manifest.json'];
+
+/**
+ * Checks if a file's name has been changed during the build process
+ * and if changed, returns an updated file path.
+ *
+ * @param {string} deployUrl deployment url
+ * @param {string} url an absolute url to check if its filename has changed
+ * @param {object} updatedFileNames a map from old filenames to new filenames
+ * @returns {string} an updated file path
+ */
+const getUpdatedFileName = (deployUrl, url, updatedFileNames) => {
+    const absUrl = url.substring(1); // remove leading '/'
+    if (SKIP_UPDATE.includes(absUrl)) {
+        return absUrl;
+    }
+
+    if (absUrl in updatedFileNames) {
+        return `${deployUrl}${updatedFileNames[absUrl]}` // add the leading '/' back
+    }
+    return `${deployUrl}${url}`;
+}
+
+/**
+ * Checks if a file's content has been changed during the build process
+ * and if changed, returns a new hash to be updated in ngsw.json
+ *
+ * @param {string} url an absolute url to check if its filename has changed
+ * @param {object} updatedFileHashes a map from filenames to file hashes
+ * @returns {string} an updated file hash
+ */
+const getUpdatedFileHashes = (url, oldHash, updatedFileHashes) => {
+    const absUrl = url.substring(1); // remove leading '/'
+    if (absUrl in updatedFileHashes) {
+        return updatedFileHashes[absUrl];
+    }
+    return oldHash;
+}
+
+/**
+ * Get the path of the icon without '/ng-bundle'
+ *
+ * @param {string} iconPath path with '/ng-bundle'
+ * @returns {string} path of the icon without '/ng-bundle'
+ */
+const getIconPath = (iconPath) => {
+    var index = iconPath.indexOf("/", iconPath.indexOf("/") + 1);
+    return iconPath.substring(index + 1);
+}
+
+/**
+ * Updates name, location and content of PWA related assets.
+ *
+ * @param {string} deployUrl deployment url
+ * @param {object} updatedFileNames a map from old filenames to new filenames
+ * @returns {void}
+ */
+const updatePwaAssets = (deployUrl, updatedFileNames, updatedFileHashes) => {
+    const ngswPath = './dist/ngsw.json';
+    const manifestPath = './dist/manifest.json';
+    //this is always from server in case of pwa. Need to fix this to use cdnurl from runtime/build config
+    deployUrl = deployUrl === "_cdnUrl_" ? 'ng-bundle/' : deployUrl;
+
+    // copy service worker and its config to root directory
+    fs.copyFileSync(`./dist/ng-bundle/${global.randomHash}/ngsw-worker.js`, './dist/ngsw-worker.js');
+    fs.copyFileSync(`./dist/ng-bundle/${global.randomHash}/wmsw-worker.js`, './dist/wmsw-worker.js');
+    fs.copyFileSync(`./dist/ng-bundle/${global.randomHash}/ngsw.json`, ngswPath);
+    fs.copyFileSync(`./dist/ng-bundle/${global.randomHash}/manifest.json`, manifestPath);
+
+    // update the icons url in manifest.json
+    const manifest = JSON.parse(fs.readFileSync(manifestPath).toString());
+    const updatedManifest = {
+        ...manifest,
+        icons: manifest.icons.map(icon => ({ ...icon, src: `${deployUrl}${getIconPath(icon.src)}` })),
+    }
+    const manifestContent = JSON.stringify(updatedManifest, null, 4);
+    fs.writeFileSync(manifestPath, manifestContent);
+    updatedFileHashes['manifest.json'] = generateSha1(manifestContent);
+
+    // edit service worker config to include ./ng-bundle to the path of files to be cached
+    // also update the urls to files whose names are modified to include file hash (wm-styles)
+    const ngswData = JSON.parse(fs.readFileSync(ngswPath).toString());
+    ngswData.assetGroups = ngswData.assetGroups.map(group => ({
+        ...group,
+        urls: group.urls.map(url => getUpdatedFileName(deployUrl, url, updatedFileNames))
+    }));
+    ngswData.hashTable = Object.keys(ngswData.hashTable).reduce((prev, current) => ({
+        ...prev,
+        [getUpdatedFileName(deployUrl, current, updatedFileNames)]: getUpdatedFileHashes(current, ngswData.hashTable[current], updatedFileHashes),
+    }), {});
+
+    const ngswContent = JSON.stringify(ngswData, null, 4);
+    fs.writeFileSync(ngswPath, ngswContent);
+}
+
+/**
+ * Generated sha1 hash for the content supplied.
+ *
+ * @param {string} content the content to be hashed
+ * @returns {string} the hash value
+ */
+const generateSha1 = (content) => {
+    const buffer = Buffer.from(content, 'utf8');
+    return crypto.createHash('sha1').update(buffer).digest("hex");
+}
+
+(async () => {
+    try {
+        const angularJson = require(`${process.cwd()}/angular.json`);
+        const build = angularJson['projects']['angular-app']['architect']['build'];
+        let deployUrl = args['deploy-url'] || build['configurations']['production']['deployUrl'];
+        global.randomHash = deployUrl.split('/')[1];
+        let outputPath = global.opPath = args['output-path'] || build['configurations']['production']['outputPath']
+        const contents = await readFile(`./dist/index.html`, `utf8`);
+        $ = cheerio.load(contents);
+        isProdBuild = fs.existsSync(`${process.cwd()}/${outputPath}/wm-styles.css`);
+        isDevBuild = fs.existsSync(`${process.cwd()}/${outputPath}/wm-styles.js`);
+
+        if (isProdBuild) {
+            const isOptimizeCss = $('meta[optimizecss]').length;
+            if (isOptimizeCss) {
+                console.log(`CSS Optimization Selected`);
+                const { stdout, stderr } = await exec(`npm run optimizecss`);
+                console.log(`Optimization Log | ${stdout}`);
+                console.error(`Optimization Error | ${stderr}`);
+            }
+        }
+        // if service worker is enabled the app is a PWA
+        const serviceWorkerEnabled = build['configurations']['production']['serviceWorker'];
+        const updatedFilenames = {}
+        const updatedFileHashes = {}
+        let wm_styles_path;
+
+        if (isDevBuild) {
+            wm_styles_path = `${deployUrl}wm-styles.js`;
+        } else {
+            const fileName = 'wm-styles';
+            const updatedFileName = `${fileName}.css`
+            wm_styles_path = `${deployUrl}${updatedFileName}`;
+        }
+
+        addScriptForWMStylesPath(wm_styles_path);
+        addPrintStylesPath(`${deployUrl}print.css`);
+
+        //this is required to download all the assets
+        $('head').append(`<meta name="deployUrl" content=${deployUrl} />`);
+        $('script[src$="services/application/wmProperties.js"]').remove();
+        $('link[href$="favicon.png"]').attr('href', `${deployUrl}favicon.png`);
+
+        const htmlContent = $.html();
+        await writeFile(`./dist/index.html`, htmlContent);
+
+        if (serviceWorkerEnabled) {
+            // re-generate hash for index.html since its been modified
+            updatedFileHashes['index.html'] = generateSha1(htmlContent);
+            updatePwaAssets(deployUrl, updatedFilenames, updatedFileHashes);
+        }
+    } catch (e) {
+        console.error(`Error in Post ng build Script | ${e}`);
+    }
+})();

package/build-scripts/update-version.js

@@ -0,0 +1,25 @@
+'use strict';
+const fs = require('fs');
+const yargs = require('yargs');
+const argv = yargs(process.argv).argv;
+const { WM_NPM_SCOPE } = require('../src/wm-namespace.js');
+
+/**
+ * Updates the @wavemaker-ai/app-ng-runtime dependency in the specified package.json file.
+ * @param {string} path - The path to the package.json file to update.
+ */
+
+const updateNgRuntimePackage = (path) => {
+    if (fs.existsSync(path)) {
+        const packageJSON = require('../' + path);
+        packageJSON['dependencies'][`${WM_NPM_SCOPE}/app-ng-runtime`] = argv["publish-version"];
+        fs.writeFileSync(path, JSON.stringify(packageJSON, null, 4));
+    } else {
+        console.log('package.json not found at ' + path);
+    }
+};
+const init = () => {
+    updateNgRuntimePackage('../wavemaker-studio-runtime-integration/package.json');
+};
+
+init();

package/dependencies/app.component.html

@@ -0,0 +1,40 @@
+@if (startApp) {
+    @if(enableSkipToMainContent) {
+        <div id="app-focus-start" tabindex="-1"></div>
+        <a href="javascript:void(0);" class="skip" (click)="skipToAppContent($event)">{{appLocale.LABEL_SKIP_TO_MAIN_CONTENT || 'Skip to main content'}}</a>
+    }
+    <router-outlet></router-outlet>
+  @if (isApplicationType) {
+    <div wmContainer partialContainer content="Common" hidden class="ng-hide"></div>
+  }
+  <app-spinner name="globalspinner" classname="global-spinner" role="alert" aria-live="assertive" [attr.aria-label]="spinner.arialabel || 'Loading'" [show]="spinner.show" [spinnermessages]="spinner.messages"></app-spinner>
+  <div wmDialog name="oAuthLoginDialog" title="Application is requesting you to sign in with"
+    close.event="closeOAuthDialog()">
+    <ng-template #dialogBody>
+      <ul class="list-items">
+        @for (provider of providersConfig; track provider) {
+          <li class="list-item">
+            <button class="btn" (click)="provider.invoke()">{{provider.name}}</button>
+          </li>
+        }
+      </ul>
+    </ng-template>
+  </div>
+  <div wmConfirmDialog name="_app-confirm-dialog" title.bind="title" message.bind="message" oktext.bind="oktext"
+    canceltext.bind="canceltext" closable="false" iconclass.bind="iconclass"
+  escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  @if (!isApplicationType) {
+    <div  wmConfirmDialog name="PrefabConfirmDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"
+      canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"
+    escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  }
+  @if (!isApplicationType) {
+    <div  wmAlertDialog name="PrefabAlertDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"
+      canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"
+    escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>
+  }
+  <div wmAppExt></div>
+  <i id="wm-mobile-display"></i>
+}
+<!--Dummy container to create the component dynamically-->
+<ng-container #dynamicComponent></ng-container>