@wavemaker-ai/angular-codegen 1.0.0-next.27766

package/angular-app/src/framework/services/app-js-provider.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+import { AppJSProvider } from '@wm/runtime/base';
+
+import { initScript } from '../../app/app.component.script';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppJSProviderService extends AppJSProvider {
+
+    public getAppScriptFn(): Promise<Function> {
+        return Promise.resolve(initScript);
+    }
+}

package/angular-app/src/framework/services/app-variables-provider.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+import { AppVariablesProvider } from '@wm/runtime/base';
+
+import { variables } from '../../app/app.component.variables';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppVariablesProviderService extends AppVariablesProvider {
+
+    public async getAppVariables(): Promise<any> {
+        return Promise.resolve(variables);
+    }
+}

package/angular-app/src/framework/services/component-ref-provider.service.ts

@@ -0,0 +1,70 @@
+import { Injectable, Inject, Type } from '@angular/core';
+
+import { ComponentRefProvider, ComponentType } from '@wm/runtime/base';
+import { LazyComponentRefProviderService } from './lazy-component-ref-provider.service';
+
+interface ComponentCacheEntry {
+    ref: Type<unknown>;
+    componentFactory?: any; // Legacy support for non-standalone components
+}
+
+const componentCache = new Map<ComponentType, Map<string, ComponentCacheEntry>>();
+
+componentCache.set(ComponentType.PAGE, new Map<string, ComponentCacheEntry>());
+componentCache.set(ComponentType.PARTIAL, new Map<string, ComponentCacheEntry>());
+componentCache.set(ComponentType.PREFAB, new Map<string, ComponentCacheEntry>());
+
+@Injectable()
+export class ComponentRefProviderService extends ComponentRefProvider {
+
+    /**
+     * Register a component class for dynamic instantiation
+     * @param name - Component name identifier
+     * @param type - Component type (PAGE, PARTIAL, PREFAB)
+     * @param ref - Component class reference
+     * @param componentFactory - Optional legacy component factory (for backward compatibility)
+     */
+    static registerComponentRef(name: string, type: ComponentType, ref: Type<unknown>, componentFactory?: any): void {
+        componentCache.get(type).set(name, { ref, componentFactory });
+    }
+
+    constructor(@Inject(LazyComponentRefProviderService) private lazyComponentLoader: LazyComponentRefProviderService) {
+        super();
+    }
+
+    /**
+     * Get component class for dynamic instantiation
+     * Returns the component Type which can be used with ViewContainerRef.createComponent()
+     * 
+     * @param componentName - Name of the component to load
+     * @param componentType - Type of component (PAGE, PARTIAL, PREFAB)
+     * @param options - Additional options (e.g., prefab name for partial resolution)
+     * @returns Promise resolving to component Type or null if not found
+     */
+    public async getComponentFactoryRef(componentName: string, componentType: ComponentType, options?: Record<string, unknown>): Promise<Type<unknown> | null> {
+        const cachedEntry = componentCache.get(componentType)?.get(componentName);
+        
+        // Try lazy loading for PARTIAL and PREFAB types if not in cache
+        if (!cachedEntry && (componentType === ComponentType.PARTIAL || componentType === ComponentType.PREFAB)) {
+            const lazyComponent = await this.lazyComponentLoader.getComponentFactoryRef(
+                componentName,
+                componentType,
+                options
+            );
+            if (lazyComponent) {
+                return lazyComponent;
+            }
+        }
+        
+        // Return null if component not found
+        if (!cachedEntry) {
+            console.warn(`Component not found: ${componentName} (type: ${componentType})`);
+            return null;
+        }
+        
+        // Return component class (modern Angular 13+ approach for standalone components)
+        // For legacy components, the componentFactory would be used, but we return the ref
+        // as createComponent() handles both standalone and non-standalone components
+        return cachedEntry.ref;
+    }
+}

package/angular-app/src/framework/services/customwidget-config-provider.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+import { CustomwidgetConfigProvider } from '@wm/runtime/base';
+
+import { getCustomWidgetConfig } from '../util/page-util';
+
+@Injectable()
+export class CustomwidgetConfigProviderService extends CustomwidgetConfigProvider {
+
+    public getConfig(widgetname: string): Promise<any> {
+        return Promise.resolve(getCustomWidgetConfig(widgetname));
+    }
+}

package/angular-app/src/framework/services/lazy-component-ref-provider.service.ts

@@ -0,0 +1,79 @@
+import { Injectable, Type } from '@angular/core';
+import { PartialRefProvider } from '@wm/core';
+import { ComponentType } from '@wm/runtime/base';
+import { partialLazyModules, prefabLazyModules, prefabPartialLazyModules } from '../util/lazy-module-routes';
+
+interface LazyLoadOptions {
+    prefab?: string;
+}
+
+interface LazyModule {
+    loadComponent: () => Promise<Type<unknown>>;
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class LazyComponentRefProviderService extends PartialRefProvider {
+    constructor() {
+        super();
+    }
+
+    /**
+     * Resolve the appropriate lazy module based on component type and options
+     * @private
+     */
+    private getLazyModule(componentName: string, componentType: ComponentType, options?: LazyLoadOptions): LazyModule | undefined {
+        // Prefab-scoped partial (e.g., partial inside a prefab)
+        if (componentType === ComponentType.PARTIAL && options?.prefab) {
+            return prefabPartialLazyModules[`${options.prefab}_${componentName}`];
+        }
+        
+        // Standard partial
+        if (componentType === ComponentType.PARTIAL) {
+            return partialLazyModules[componentName];
+        }
+        
+        // Prefab
+        if (componentType === ComponentType.PREFAB) {
+            return prefabLazyModules[componentName];
+        }
+        
+        return undefined;
+    }
+
+    /**
+     * Lazy load and return a component class
+     * Returns the component Type which can be used with ViewContainerRef.createComponent()
+     * 
+     * @param componentName - Name of the component to lazy load
+     * @param componentType - Type of component (PARTIAL, PREFAB)
+     * @param options - Additional options (e.g., prefab name for partial resolution)
+     * @returns Promise resolving to component Type or null if loading fails
+     */
+    public async getComponentFactoryRef(componentName: string, componentType: ComponentType, options?: LazyLoadOptions): Promise<Type<unknown> | null> {
+        try {
+            const lazyModule = this.getLazyModule(componentName, componentType, options);
+
+            if (!lazyModule) {
+                console.error(`No lazy module found for ${componentName}`);
+                return null;
+            }
+
+            // Dynamically load the component class
+            const componentClass = await lazyModule.loadComponent();
+
+            if (!componentClass) {
+                console.error(`Failed to load component class: ${componentName}`);
+                return null;
+            }
+
+            // Return the component class directly (Angular 13+ standalone component approach)
+            // This can be used directly with ViewContainerRef.createComponent()
+            return componentClass;
+        } catch (error) {
+            console.error(`Error lazy loading component ${componentName}:`, error);
+            return null;
+        }
+    }
+}

package/angular-app/src/framework/services/prefab-config-provider.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+import { PrefabConfigProvider } from '@wm/runtime/base';
+
+import { getPrefabConfig } from '../util/page-util';
+
+@Injectable()
+export class PrefabConfigProviderService extends PrefabConfigProvider {
+
+    public getConfig(prefabName: string): Promise<any> {
+        return Promise.resolve(getPrefabConfig(prefabName));
+    }
+}

package/angular-app/src/framework/util/lazy-module-routes.ts

@@ -0,0 +1,4 @@
+// These three objects will be initialized in the code generation phase.
+export const prefabLazyModules = {};
+export const partialLazyModules = {};
+export const prefabPartialLazyModules = {};

package/angular-app/src/framework/util/page-util.ts

@@ -0,0 +1,7 @@
+const prefabConfigs = new Map<string, any>();
+const customWidgetConfigs = new Map<string, any>();
+
+export const registerPrefabConfig = (prefabName: string, config: any) => prefabConfigs.set(prefabName, config);
+export const getPrefabConfig = prefabName => prefabConfigs.get(prefabName);
+export const registerCustomWidgetConfig = (customWidget: string, config: any) => customWidgetConfigs.set(customWidget, config);
+export const getCustomWidgetConfig = customWidget => customWidgetConfigs.get(customWidget);

package/angular-app/src/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Runtime Angular App</title>
+    <base href="/">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="//localhost:8080/wavemaker/_static_/9.9.9/wmapp/styles/css/wm-style.css">
+    <link rel="stylesheet" href="//localhost:8080/b/themes/material/style.css">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+</head>
+<body class="wm-app"> 
+    <app-root></app-root>
+</body>
+</html>

package/angular-app/src/main.ts

@@ -0,0 +1,70 @@
+import { ApplicationRef, enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { environment } from './environments/environment';
+import initWmProjectProperties from './app/wm-project-properties';
+import { WMAppProperties } from './app/wmProperties';
+import * as fontConfig from './font.config';
+import { appConfig } from './app/app.config';
+import { AppComponent } from '@wm/runtime/base';
+
+// Format Accept-Language header
+const formatAcceptHeader = (languages: string[]): string => {
+  const result: string[] = [];
+  const addedLanguages = new Set<string>(); // To track already added languages
+  let qValue = 1.0;
+
+  languages.forEach((lang: string) => {
+    if (!addedLanguages.has(lang)) {
+      // Add the full language (e.g., en-US or en) if not already added
+      result.push(`${lang}${qValue === 1.0 ? '' : `;q=${qValue.toFixed(1)}`}`);
+      addedLanguages.add(lang);
+      // Decrease qValue for the next language
+      qValue = Math.max(0.1, qValue - 0.1); // Decrease qValue, minimum is 0.1
+    }
+
+    // If language has a region code (e.g., en-US), also add the base language (e.g., en)
+    if (lang.includes('-')) {
+      const baseLang = lang.split('-')[0];
+      if (!addedLanguages.has(baseLang)) {
+        result.push(`${baseLang};q=${qValue.toFixed(1)}`);
+        addedLanguages.add(baseLang);
+
+        // Decrease qValue for the next language
+        qValue = Math.max(0.1, qValue - 0.1);
+      }
+    }
+  });
+
+  return result.join(',');
+};
+
+// Initialize WMAppProperties
+WMAppProperties['preferredLanguage'] = formatAcceptHeader((navigator as any).languages);
+WMAppProperties['fontConfig'] = fontConfig;
+(window as any)._WM_APP_PROPERTIES = WMAppProperties;
+initWmProjectProperties();
+
+if (environment.production) {
+  enableProdMode();
+}
+
+// MEMORY LEAK FIX: Store event listener references for cleanup (though these are one-time bootstrap events)
+const boundDOMContentLoadedHandler = () => {
+  new Promise<Event | void>(resolve => {
+    resolve();
+  }).then(() => bootstrapApplication(AppComponent, appConfig))
+    .then((appRef: ApplicationRef) => {
+      // MEMORY LEAK FIX: Store unload handler reference
+      const boundUnloadHandler = () => {
+        appRef.components.map(c => c?.destroy());
+        // MEMORY LEAK FIX: Remove unload listener after cleanup (though unload is typically final)
+        window.removeEventListener('unload', boundUnloadHandler);
+      };
+      window.addEventListener('unload', boundUnloadHandler);
+    })
+    .catch(err => console.error('Error bootstrapping app:', err));
+  // MEMORY LEAK FIX: Remove DOMContentLoaded listener after execution (one-time event)
+  document.removeEventListener('DOMContentLoaded', boundDOMContentLoadedHandler);
+};
+
+document.addEventListener('DOMContentLoaded', boundDOMContentLoadedHandler);

package/angular-app/src/polyfills.ts

@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

package/angular-app/src/setup-jest.js

@@ -0,0 +1,121 @@
+
+// This file is automatically loaded when running `jest` commands
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+import { ToastrModule } from 'ngx-toastr';
+import { TestBed } from '@angular/core/testing';
+import _ from 'lodash-es';
+import 'jest-canvas-mock';
+
+setupZoneTestEnv();
+
+// Mock global objects if necessary
+global.jQuery = require("jquery");
+global.$ = global.jQuery;
+global._ = _;
+
+
+global.moment = require("moment");
+
+class IntersectionObserver {
+    constructor(callback, options) {
+
+    }
+
+    observe(element) {
+
+    }
+
+    unobserve() {
+        return null;
+    }
+
+    disconnect() {
+        return null;
+    }
+}
+global.IntersectionObserver = IntersectionObserver;
+// jest.setup.js
+
+// Mock MSCSSMatrix
+class MockMSCSSMatrix {
+    constructor() {
+        // Initialize with default values or any necessary properties
+    }
+
+    // Add any methods that your tests might call
+    setMatrixValue(value) {
+        // Mock implementation of setMatrixValue
+    }
+
+    multiply(matrix) {
+        // Mock implementation of multiply
+        return this;
+    }
+
+    // Add other methods as needed
+}
+
+// Attach the mock to the global scope
+global.MSCSSMatrix = MockMSCSSMatrix;
+
+import "jquery-ui/ui/disable-selection.js";
+import "jquery-ui/ui/version.js";
+import "jquery-ui/ui/widget.js";
+import "jquery-ui/ui/scroll-parent.js";
+import "jquery-ui/ui/plugin.js";
+import "jquery-ui/ui/data.js";
+import "jquery-ui/ui/widgets/mouse.js";
+import "jquery-ui/ui/widgets/resizable.js";
+import "jquery-ui/ui/widgets/sortable.js";
+import "jquery-ui/ui/widgets/draggable.js";
+import "jquery-ui/ui/widgets/droppable.js";
+import "projects/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js";
+import "moment-timezone/builds/moment-timezone.min.js";
+import "iscroll/build/iscroll.js";
+import "tabbable/dist/index.umd.min.js";
+import "@wavemaker/focus-trap/dist/focus-trap.umd.min.js";
+import "x2js"
+
+
+
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    imports : [
+      ToastrModule.forRoot(),
+    ],
+  })
+});
+
+// Mock window.location for tests
+// We'll use a simpler approach that doesn't try to redefine read-only properties
+// The tests will handle their own window.location mocking as needed
+// jest.setup.js
+Object.defineProperty(global.HTMLMediaElement.prototype, 'load', {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: jest.fn(),
+});
+
+Object.defineProperty(global.HTMLMediaElement.prototype, 'play', {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: jest.fn().mockResolvedValue(),
+});
+
+Object.defineProperty(global.HTMLMediaElement.prototype, 'pause', {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: jest.fn(),
+});
+
+Object.defineProperty(global.HTMLMediaElement.prototype, 'addTextTrack', {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: jest.fn(),
+});
+
+

package/angular-app/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/angular-app/src/tsconfig.app.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "types": [
+            "jquery"
+        ],
+        "allowJs": true
+    },
+    "exclude": [
+        "**/*.spec.ts",
+        "app/extensions/formatters.js",
+        "environments/environment.*.ts",
+        "setup-jest.js",
+        "test.ts"
+    ]
+}

package/angular-app/src/tslint.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "",
+            "kebab-case"
+        ]
+    }
+}

package/angular-app/src/typings.d.ts

@@ -0,0 +1,27 @@
+// Global type declarations for jQuery extensions
+// Using declaration merging to extend existing jQuery types
+
+declare global {
+    interface JQueryStatic {
+        ui?: {
+            widget?: any;
+            [key: string]: any;
+        };
+    }
+
+    interface JQuery {
+        DataTable?(options?: any): any;
+        destroy?(): void;
+        datatable?(method: string, ...args: any[]): any;
+        datatable?(options?: any): any;
+    }
+    
+    // Extend jQuery.fn namespace for DataTable plugin
+    namespace JQueryStatic {
+        interface fn {
+            DataTable?: any;
+        }
+    }
+}
+
+export {};

package/angular-app/src/wm-namespace.js

@@ -0,0 +1,13 @@
+/**
+ * Central WaveMaker npm namespace configuration.
+ *
+ * All source files import WM_NPM_SCOPE from here instead of hardcoding
+ * '@wavemaker'. Override via the WM_NPM_SCOPE environment variable to
+ * switch namespaces at build or runtime.
+ *
+ * Default: '@wavemaker-ai'
+ * Override: WM_NPM_SCOPE=@wavemaker sh build.sh
+ */
+const WM_NPM_SCOPE = process.env.WM_NPM_SCOPE || '@wavemaker-ai';
+
+module.exports = { WM_NPM_SCOPE };

package/angular-app/tsconfig.json

@@ -0,0 +1,94 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+        "baseUrl": "./",
+        "downlevelIteration": true,
+        "outDir": "./dist/out-tsc",
+        "sourceMap": true,
+        "declaration": false,
+        "target": "es2022",
+        "module": "es2022",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "typeRoots": [
+            "node_modules/@types"
+        ],
+        "lib": [
+            "es2022",
+            "dom"
+        ],
+        "paths": {
+            "rxjs/observable/throw": [
+                "node_modules/rxjs-compat/_esm2015/observable/throw"
+            ],
+            "rxjs/observable/*": [
+                "node_modules/rxjs-compat/_esm2015/observable/*"
+            ],
+            "rxjs/Observable": [
+                "node_modules/rxjs-compat/_esm2015/Observable"
+            ],
+            "@wm/build-task": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/build-task/"
+            ],
+            "@wm/core": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/core"
+            ],
+            "@wavemaker-ai/variables": [
+                "node_modules/@wavemaker-ai/variables/"
+            ],
+            "@wavemaker-ai/custom-widgets-m3": [
+                "node_modules/@wavemaker-ai/custom-widgets-m3/"
+            ],
+            "@wm/components/base": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/components/base"
+            ],
+            "@wm/components/basic/*": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/components/basic/*"
+            ],
+            "@wm/components/input/*": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/components/input/*"
+            ],
+            "@wm/components/page": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/components/page/default"
+            ],
+            "@wm/components/dialogs": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/components/dialogs/default"
+            ],
+            "@wm/components/*": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/components/*"
+            ],
+            "@wm/transpiler": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/transpiler"
+            ],
+            "@wm/security": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/security"
+            ],
+            "@swipey": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/swipey"
+            ],
+            "@wm/http": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/http"
+            ],
+            "@wm/oAuth": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/oAuth"
+            ],
+            "@wm/variables": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/variables"
+            ],
+            "@wm/runtime/base": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/runtime/base"
+            ],
+            "@wm/runtime/dynamic": [
+                "node_modules/@wavemaker-ai/app-ng-runtime/runtime/dynamic"
+            ]
+        },
+        "useDefineForClassFields": false
+    },
+    "angularCompilerOptions": {
+        "compilationMode": "full",
+        "strictMetadataEmit": false,
+        "strictTemplates": false
+    }
+}