@wavemaker-ai/angular-codegen 1.0.0-rc.647469

package/angular-app/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/angular-app/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/angular-app/dependency-report.html

@@ -0,0 +1,124 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Angular Dependencies Report</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            padding: 20px;
+            color: #333;
+        }
+        .header {
+            background: #f4f4f4;
+            padding: 20px;
+            margin-bottom: 20px;
+            border-radius: 4px;
+        }
+        .section {
+            margin-bottom: 30px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 12px;
+            text-align: left;
+        }
+        th {
+            background-color: #f8f8f8;
+            font-weight: bold;
+        }
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .dependency-type {
+            font-size: 1.2em;
+            color: #666;
+            font-weight: bold;
+            margin: 20px 0 10px;
+            padding-bottom: 5px;
+            border-bottom: 2px solid #eee;
+        }
+        .transitive {
+            margin-left: 20px;
+            border-left: 3px solid #eee;
+            padding-left: 20px;
+        }
+        .license-count {
+            font-weight: bold;
+            color: #2196F3;
+        }
+        .timestamp {
+            color: #666;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Angular Project Dependencies Report</h1>
+        <p class="timestamp">Generated on: 5/4/2026, 3:25:42 PM</p>
+    </div>
+
+    <div class="section">
+        <h2>Project Dependencies Overview</h2>
+        
+        
+    </div>
+
+    <div class="section">
+        <h2>Transitive Dependencies</h2>
+        
+        <div class="dependency-type">Transitive Dependencies</div>
+        <table>
+            <tr>
+                <th>Package</th>
+                <th>Version</th>
+                <th>License</th>
+                <th>Repository</th>
+            </tr>
+            
+                    <tr>
+                        <td></td>
+                        <td>wavemaker-ai/angular-app</td>
+                        <td>UNKNOWN</td>
+                        <td>N/A</td>
+                    </tr>
+                
+        </table>
+    
+    </div>
+
+    <div class="section">
+        <h2>License Summary</h2>
+        
+        <table>
+            <tr>
+                <th>License</th>
+                <th>Count</th>
+                <th>Packages</th>
+            </tr>
+            
+                    <tr>
+                        <td>UNKNOWN</td>
+                        <td class="license-count">1</td>
+                        <td></td>
+                    </tr>
+                
+        </table>
+    
+    </div>
+</body>
+</html>

package/angular-app/generate-dependency-report.js

@@ -0,0 +1,240 @@
+const checker = require('license-checker');
+const fs = require('fs');
+const path = require('path');
+
+// HTML template as a string
+const htmlTemplate = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Angular Dependencies Report</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            padding: 20px;
+            color: #333;
+        }
+        .header {
+            background: #f4f4f4;
+            padding: 20px;
+            margin-bottom: 20px;
+            border-radius: 4px;
+        }
+        .section {
+            margin-bottom: 30px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 20px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 12px;
+            text-align: left;
+        }
+        th {
+            background-color: #f8f8f8;
+            font-weight: bold;
+        }
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+        .dependency-type {
+            font-size: 1.2em;
+            color: #666;
+            font-weight: bold;
+            margin: 20px 0 10px;
+            padding-bottom: 5px;
+            border-bottom: 2px solid #eee;
+        }
+        .transitive {
+            margin-left: 20px;
+            border-left: 3px solid #eee;
+            padding-left: 20px;
+        }
+        .license-count {
+            font-weight: bold;
+            color: #2196F3;
+        }
+        .timestamp {
+            color: #666;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Angular Project Dependencies Report</h1>
+        <p class="timestamp">Generated on: {{GENERATED_DATE}}</p>
+    </div>
+
+    <div class="section">
+        <h2>Project Dependencies Overview</h2>
+        {{PRODUCTION_DEPENDENCIES}}
+        {{DEVELOPMENT_DEPENDENCIES}}
+    </div>
+
+    <div class="section">
+        <h2>Transitive Dependencies</h2>
+        {{TRANSITIVE_DEPENDENCIES}}
+    </div>
+
+    <div class="section">
+        <h2>License Summary</h2>
+        {{LICENSE_SUMMARY}}
+    </div>
+</body>
+</html>
+`;
+
+// Main function to generate the report
+function generateDependencyReport() {
+    checker.init({
+        start: './',
+        json: true,
+        customPath: {
+            licenses: true,
+            dependencies: true,
+            version: true
+        }
+    }, function(err, packages) {
+        if (err) {
+            console.error("Error:", err);
+            return;
+        }
+
+        const projectData = processPackages(packages);
+        const html = generateHTML(projectData);
+
+        // Write the report to a file
+        fs.writeFileSync('dependency-report.html', html);
+        console.log('Dependency report generated successfully!');
+    });
+}
+
+// Process the packages data
+function processPackages(packages) {
+    const data = {
+        production: {},
+        development: {},
+        transitive: {},
+        licenses: {}
+    };
+
+    // Read package.json to determine prod vs dev dependencies
+    const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+    const prodDeps = packageJson.dependencies || {};
+    const devDeps = packageJson.devDependencies || {};
+
+    Object.entries(packages).forEach(([pkgName, info]) => {
+        const name = pkgName.split('@')[0];
+        const version = pkgName.split('@')[1];
+        const packageInfo = {
+            version,
+            license: info.licenses,
+            description: info.description || '',
+            repository: info.repository || '',
+            publisher: info.publisher || ''
+        };
+
+        // Track license information
+        if (info.licenses) {
+            if (!data.licenses[info.licenses]) {
+                data.licenses[info.licenses] = {
+                    count: 0,
+                    packages: []
+                };
+            }
+            data.licenses[info.licenses].count++;
+            data.licenses[info.licenses].packages.push(name);
+        }
+
+        // Categorize dependencies
+        if (prodDeps[name]) {
+            data.production[name] = packageInfo;
+        } else if (devDeps[name]) {
+            data.development[name] = packageInfo;
+        } else {
+            data.transitive[name] = packageInfo;
+        }
+    });
+
+    return data;
+}
+
+// Generate HTML tables for dependencies
+function generateDependencyTable(dependencies, title) {
+    if (Object.keys(dependencies).length === 0) return '';
+
+    return `
+        <div class="dependency-type">${title}</div>
+        <table>
+            <tr>
+                <th>Package</th>
+                <th>Version</th>
+                <th>License</th>
+                <th>Repository</th>
+            </tr>
+            ${Object.entries(dependencies)
+        .map(([name, info]) => `
+                    <tr>
+                        <td>${name}</td>
+                        <td>${info.version}</td>
+                        <td>${info.license || 'Unknown'}</td>
+                        <td>${info.repository || 'N/A'}</td>
+                    </tr>
+                `).join('')}
+        </table>
+    `;
+}
+
+// Generate license summary table
+function generateLicenseSummary(licenses) {
+    return `
+        <table>
+            <tr>
+                <th>License</th>
+                <th>Count</th>
+                <th>Packages</th>
+            </tr>
+            ${Object.entries(licenses)
+        .map(([license, info]) => `
+                    <tr>
+                        <td>${license}</td>
+                        <td class="license-count">${info.count}</td>
+                        <td>${info.packages.join(', ')}</td>
+                    </tr>
+                `).join('')}
+        </table>
+    `;
+}
+
+// Generate the final HTML
+function generateHTML(data) {
+    let html = htmlTemplate;
+
+    // Replace placeholders with actual content
+    html = html.replace('{{GENERATED_DATE}}', new Date().toLocaleString());
+    html = html.replace('{{PRODUCTION_DEPENDENCIES}}',
+        generateDependencyTable(data.production, 'Production Dependencies'));
+    html = html.replace('{{DEVELOPMENT_DEPENDENCIES}}',
+        generateDependencyTable(data.development, 'Development Dependencies'));
+    html = html.replace('{{TRANSITIVE_DEPENDENCIES}}',
+        generateDependencyTable(data.transitive, 'Transitive Dependencies'));
+    html = html.replace('{{LICENSE_SUMMARY}}',
+        generateLicenseSummary(data.licenses));
+
+    return html;
+}
+
+// Run the report generation
+generateDependencyReport();