@wavemaker/angular-app 12.0.0-next.141221 → 12.0.0-next.47809

package/angular.json

@@ -21,7 +21,7 @@
                         "outputPath": "dist/ng-bundle",
                         "index": {
                             "input": "src/index.html",
-                            "output": "../index.html"
+                            "output": "../../index.html"
                         },
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
@@ -32,13 +32,13 @@
                             "src/assets",
                             {
                                 "glob": "**/*",
-                                "input": "libraries/locales/",
-                                "output": "/locales/"
+                                "input": "libraries/locales/moment-timezone",
+                                "output": "/locales/moment-timezone"
                             },
                             {
                                 "glob": "**/*",
-                                "input": "node_modules/@wavemaker/app-ng-runtime/locales/",
-                                "output": "/locales/"
+                                "input": "node_modules/@wavemaker/app-ng-runtime/locales/moment-timezone",
+                                "output": "/locales/moment-timezone"
                             },
                             {
                                 "glob": "**/*",
@@ -75,7 +75,6 @@
                             }
                         ],
                         "scripts": [
-                            "./node_modules/x2js/x2js.js",
                             "./node_modules/d3/dist/d3.min.js",
                             "./node_modules/@wavemaker/nvd3/build/nv.d3.min.js",
                             "./node_modules/jquery/dist/jquery.min.js",
@@ -94,9 +93,6 @@
                             "./node_modules/@wavemaker/app-ng-runtime/scripts/datatable/datatable.js",
                             "./node_modules/@wavemaker/app-ng-runtime/scripts/swipey/swipey.jquery.plugin.js",
                             "./node_modules/@wavemaker/app-ng-runtime/scripts/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js",
-                            "./node_modules/moment/min/moment.min.js",
-                            "./node_modules/moment-timezone/builds/moment-timezone.min.js",
-                            "./node_modules/fullcalendar/main.min.js",
                             "./node_modules/summernote/dist/summernote-lite.min.js",
                             "./node_modules/hammerjs/hammer.min.js",
                             "./node_modules/iscroll/build/iscroll.js",
@@ -243,9 +239,6 @@
                             "./node_modules/jquery-ui/ui/widgets/sortable.js",
                             "./node_modules/jquery-ui/ui/widgets/droppable.js",
                             "./libraries/scripts/datatable/datatable.js",
-                            "./node_modules/moment/min/moment.min.js",
-                            "./node_modules/moment-timezone/builds/moment-timezone.min.js",
-                            "./node_modules/fullcalendar/main.min.js",
                             "./node_modules/summernote/dist/summernote-lite.min.js",
                             "./node_modules/hammerjs/hammer.min.js",
                             "./node_modules/iscroll/build/iscroll.js",

package/build-scripts/build.js

@@ -6,6 +6,7 @@ if (processArgs.findIndex(arg => arg.startsWith('--max-old-space-size')) !== -1)
     process.env.NODE_OPTIONS = processArgs.pop();
     console.log("Setting node options: ", process.env.NODE_OPTIONS);
 }
+
 const args = processArgs.slice(2);
 const ngBuildArgs = ['build', ...args];
 console.log("\x1b[33m", "Angular build params: ", ngBuildArgs);

package/build-scripts/post-build.js

@@ -6,94 +6,11 @@ const copyFile = util.promisify(fs.copyFile);
 const exec = util.promisify(require('child_process').exec);
 const cheerio = require(`cheerio`);
 const crypto = require(`crypto`);
-const opPath = `${process.cwd()}/dist/ng-bundle`;
-const copyCssFiles = (hash, updatedFilenames) => {
-    const filename = 'wm-styles.css';
-    const updatedFilename = `wm-styles.${hash}.css`
-    copyFile(`${opPath}/${filename}`, `${opPath}/${updatedFilename}`);
-    updatedFilenames[filename] = updatedFilename;
-    // copyFile(`${opPath}/wm-styles.br.css`,`${opPath}/wm-styles.${hash}.br.css`);
-    // copyFile(`${opPath}/wm-styles.gzip.css`,`${opPath}/wm-styles.${hash}.gzip.css`);
-};
-const copyMobileCssFiles = (hash, fileName) => {
-    // const name = filePath.split('.css')[0];
-    copyFile(`${opPath}/${fileName}.css`, `${opPath}/${fileName}.${hash}.css`);
-    // copyFile(`${opPath}/wm-styles.br.css`,`${opPath}/wm-styles.${hash}.br.css`);
-    // copyFile(`${opPath}/wm-styles.gzip.css`,`${opPath}/wm-styles.${hash}.gzip.css`);
-};
-const generateHash = async (filepath) => {
-    const cssContent = await readFile(filepath);
-    let hash = crypto.createHash('md5');
-    hash.update(cssContent);
-    return hash.digest('hex');
-};
-const generateHashForScripts = (updatedFilenames) => {
-    //from angular 12(IVY), scripts array in angular json, doesn't allow `@` symbol in the name/value
-    //so removed `@` from wavemaker.com in the file name and adding it back in the post-build.js file
-    const scriptsMap = {};
-    return new Promise(resolve => {
-        fs.readdir(opPath, (err, items) => {
-            const promises = items.map(i => {
-                const nohashIndex = i.indexOf('-NOHASH.js');
-                if (nohashIndex > 0) {
-                    const key = i.substring(0, nohashIndex);
-                    return generateHash(`${opPath}/${i}`).then(hash => {
-                        const filename = `${key}-NOHASH.js`;
-                        const updatedFilename = `${key}.${hash}.js`
-                        scriptsMap[`${key}.js`] = updatedFilename;
-                        updatedFilenames[filename] = updatedFilename;
-                        return Promise.all([
-                            copyFile(`${opPath}/${filename}`, `${opPath}/${updatedFilename}`),
-                            // copyFile(`${opPath}/${key}-NOHASH.br.js`, `${opPath}/${key}.${hash}.br.js`),
-                            // copyFile(`${opPath}/${key}-NOHASH.gzip.js`, `${opPath}/${key}.${hash}.gzip.js`)
-                        ]);
-                    });
-                }
-            });
-            Promise.all(promises).then(() => {
-                return writeFile(`${opPath}/path_mapping.json`, JSON.stringify(scriptsMap, null, 2));
-            }).then(resolve);
-        });
-    });
-};
-let isMobileProject = false;
+
 let isProdBuild;
 let isDevBuild;
 let $;
 
-const setMobileProjectType = (angularJson) => {
-    let styles = angularJson['projects']['angular-app']['architect']['build']['options']['styles'];
-    const androidStyles = styles.find((style) => {
-        let isObject = typeof (style) === 'object';
-        if (isObject) {
-            return style.bundleName === 'wm-android-styles';
-        }
-        return false;
-    });
-    isMobileProject = androidStyles ? true : false;
-    return isMobileProject;
-}
-const addMobileSpecificStyles = async (deployUrl) => {
-    if (isDevBuild) {
-        $("body").append(
-            `<script type="text/javascript" defer="true" src="${deployUrl}wm-android-styles.js"></script>`
-        );
-    }
-
-    if (isProdBuild) {
-        let hash = await generateHash(`${opPath}/wm-android-styles.css`);
-        copyMobileCssFiles(hash, 'wm-android-styles');
-        $("head").append(
-            `<link rel="stylesheet" theme="wmtheme" href="${deployUrl}wm-android-styles.${hash}.css" >`
-        );
-        hash = await generateHash(`${opPath}/wm-ios-styles.css`);
-        copyMobileCssFiles(hash, 'wm-ios-styles');
-        $("head").append(
-            `<link rel="stylesheet" theme="wmtheme" href="${deployUrl}wm-ios-styles.${hash}.css" >`
-        );
-    }
-}
-
 const addScriptForWMStylesPath = (wm_styles_path) => {
     // wm_styles_path will not be present for mobile apps
     if (wm_styles_path) {
@@ -201,10 +118,10 @@ const updatePwaAssets = (deployUrl, updatedFileNames, updatedFileHashes) => {
     deployUrl = deployUrl === "_cdnUrl_" ? 'ng-bundle/' : deployUrl;
 
     // copy service worker and its config to root directory
-    fs.copyFileSync('./dist/ng-bundle/ngsw-worker.js', './dist/ngsw-worker.js');
-    fs.copyFileSync('./dist/ng-bundle/wmsw-worker.js', './dist/wmsw-worker.js');
-    fs.copyFileSync('./dist/ng-bundle/ngsw.json', ngswPath);
-    fs.copyFileSync('./dist/ng-bundle/manifest.json', manifestPath);
+    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());
@@ -248,17 +165,12 @@ const generateSha1 = (content) => {
         const angularJson = require(`${process.cwd()}/angular.json`);
         const build = angularJson['projects']['angular-app']['architect']['build'];
         let deployUrl = args['deploy-url'] || build['options']['deployUrl'];
-
+        global.randomHash = deployUrl.split('/')[1];
+        let outputPath = global.opPath = args['output-path'] || build['options']['outputPath']
         const contents = await readFile(`./dist/index.html`, `utf8`);
         $ = cheerio.load(contents);
-        setMobileProjectType(angularJson);
-        if (!isMobileProject) {
-            isProdBuild = fs.existsSync(`${process.cwd()}/dist/ng-bundle/wm-styles.css`);
-            isDevBuild = fs.existsSync(`${process.cwd()}/dist/ng-bundle/wm-styles.js`);
-        } else {
-            isDevBuild = fs.existsSync(`${process.cwd()}/dist/ng-bundle/wm-android-styles.js`);
-            isProdBuild = fs.existsSync(`${process.cwd()}/dist/ng-bundle/wm-android-styles.css`);
-        }
+        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;
@@ -275,18 +187,12 @@ const generateSha1 = (content) => {
         const updatedFileHashes = {}
         let wm_styles_path;
 
-        if (isMobileProject) {
-            await addMobileSpecificStyles(deployUrl);
+        if (isDevBuild) {
+            wm_styles_path = `${deployUrl}wm-styles.js`;
         } else {
-            if (isDevBuild) {
-                wm_styles_path = `${deployUrl}wm-styles.js`;
-            } else {
-                const fileName = 'wm-styles';
-                const hash = await generateHash(`${opPath}/${fileName}.css`);
-                copyCssFiles(hash, updatedFilenames);
-                const updatedFileName = `${fileName}.${hash}.css`
-                wm_styles_path = `${deployUrl}${updatedFileName}`;
-            }
+            const fileName = 'wm-styles';
+            const updatedFileName = `${fileName}.css`
+            wm_styles_path = `${deployUrl}${updatedFileName}`;
         }
 
         addScriptForWMStylesPath(wm_styles_path);
@@ -295,13 +201,11 @@ const generateSha1 = (content) => {
         //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', './ng-bundle/favicon.png');
+        $('link[href$="favicon.png"]').attr('href', `${deployUrl}favicon.png`);
 
         const htmlContent = $.html();
         await writeFile(`./dist/index.html`, htmlContent);
 
-        await generateHashForScripts(updatedFilenames);
-
         if (serviceWorkerEnabled) {
             // re-generate hash for index.html since its been modified
             updatedFileHashes['index.html'] = generateSha1(htmlContent);

package/dependencies/app.component.html

@@ -1,28 +1,40 @@
-<ng-container *ngIf="startApp">
+@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>
-    <div wmContainer partialContainer content="Common" hidden class="ng-hide" *ngIf="isApplicationType"></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">
-                <li class="list-item" *ngFor="let provider of providersConfig">
-                    <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>
-    <div  *ngIf="!isApplicationType" 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>
-    <div  *ngIf="!isApplicationType" 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>
-</ng-container>
+  @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>