Add default custom frontend extension structure

This commit is contained in:
Clemente Raposo 2023-04-21 18:06:38 +01:00
parent ee1592364a
commit 13fa0bcc26
36 changed files with 809 additions and 0 deletions

3
.gitignore vendored
View file

@ -42,6 +42,9 @@ node_modules
# Custom
/extensions/
!extensions/.gitkeep
!extensions/default/app
!extensions/default/backend
!extensions/default/config
# Tests
tests/_output/

View file

@ -306,6 +306,138 @@
}
}
}
},
"default": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "extensions/default",
"sourceRoot": "extensions/default/app/src",
"prefix": "app",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"namedChunks": true,
"commonChunk": false,
"sourceMap": true,
"aot": true,
"outputPath": "extensions/default/public",
"index": "extensions/default/app/src/index.html",
"main": "extensions/default/app/src/main.ts",
"polyfills": "extensions/default/app/src/polyfills.ts",
"tsConfig": "extensions/default/app/tsconfig.app.json",
"assets": [
"extensions/default/app/src/favicon.ico",
"extensions/default/app/src/assets"
],
"styles": [
"extensions/default/app/src/styles.scss"
],
"scripts": [],
"extraWebpackConfig": "extensions/default/app/webpack.config.js"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "extensions/default/app/src/environments/environment.ts",
"with": "extensions/default/app/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
],
"extraWebpackConfig": "extensions/default/app/webpack.prod.config.js"
},
"dev" : {
"outputPath": "public/extensions/default"
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "services:build",
"extraWebpackConfig": "extensions/default/app/webpack.config.js",
"port": 3000
},
"configurations": {
"production": {
"browserTarget": "services:build:production",
"extraWebpackConfig": "extensions/default/app/webpack.prod.config.js"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "services:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"main": "extensions/default/app/src/test.ts",
"polyfills": "extensions/default/app/src/polyfills.ts",
"tsConfig": "extensions/default/app/tsconfig.spec.json",
"karmaConfig": "extensions/default/app/karma.conf.js",
"assets": [
"extensions/default/app/src/favicon.ico",
"extensions/default/app/src/assets"
],
"styles": [
"extensions/default/app/src/styles.scss"
],
"scripts": [],
"extraWebpackConfig": "extensions/default/app/webpack.config.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"extensions/default/app/tsconfig.app.json",
"extensions/default/app/tsconfig.spec.json",
"extensions/default/app/e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "extensions/default/app/e2e/protractor.conf.js",
"devServerTarget": "services:serve"
},
"configurations": {
"production": {
"devServerTarget": "services:serve:production"
}
}
}
}
}
},
"defaultProject": "shell",

View file

@ -0,0 +1,17 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

View file

@ -0,0 +1,37 @@
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
SELENIUM_PROMISE_MANAGER: false,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: StacktraceOption.PRETTY
}
}));
}
};

View file

@ -0,0 +1,23 @@
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', async () => {
await page.navigateTo();
expect(await page.getTitleText()).toEqual('validators app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});

View file

@ -0,0 +1,11 @@
import { browser, by, element } from 'protractor';
export class AppPage {
async navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl);
}
async getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText();
}
}

View file

@ -0,0 +1,13 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"outDir": "../../../out-tsc/e2e",
"module": "commonjs",
"target": "es2018",
"types": [
"jasmine",
"node"
]
}
}

View file

@ -0,0 +1,35 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageReporter: {
dir: require('path').join(__dirname, '../../coverage/validators'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
],
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};

View file

@ -0,0 +1,3 @@
<div>
<h1>Default Extension</h1>
</div>

View file

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
init(): void {
}
}

View file

@ -0,0 +1,21 @@
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {ExtensionModule} from '../extension.module';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
ExtensionModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}

View file

@ -0,0 +1,12 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

View file

@ -0,0 +1,3 @@
export const environment = {
production: true
};

View file

@ -0,0 +1,16 @@
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.

View file

@ -0,0 +1,14 @@
import {NgModule} from '@angular/core';
@NgModule({
declarations: [],
imports: [],
providers: []
})
export class ExtensionModule {
constructor() {
}
init(): void {
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 948 B

View file

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Default Extension</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="extensions/default/app/src/favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

View file

@ -0,0 +1,2 @@
import('./bootstrap')
.catch(err => console.error(err));

View file

@ -0,0 +1,63 @@
/**
* 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 Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* 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/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

View file

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

View file

@ -0,0 +1,25 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

View file

@ -0,0 +1,15 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}

View file

@ -0,0 +1,18 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/spec",
"types": [
"jasmine"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}

View file

@ -0,0 +1,152 @@
{
"extends": "tslint:recommended",
"rulesDirectory": [
"codelyzer"
],
"rules": {
"align": {
"options": [
"parameters",
"statements"
]
},
"array-type": false,
"arrow-return-shorthand": true,
"curly": true,
"deprecation": {
"severity": "warning"
},
"eofline": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
"import-spacing": true,
"indent": {
"options": [
"spaces"
]
},
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"quotemark": [
true,
"single"
],
"semicolon": {
"options": [
"always"
]
},
"space-before-function-paren": {
"options": {
"anonymous": "never",
"asyncArrow": "always",
"constructor": "never",
"method": "never",
"named": "never"
}
},
"typedef": [
true,
"call-signature"
],
"typedef-whitespace": {
"options": [
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
]
},
"variable-name": {
"options": [
"ban-keywords",
"check-format",
"allow-pascal-case"
]
},
"whitespace": {
"options": [
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type",
"check-typecast"
]
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
}

View file

@ -0,0 +1,134 @@
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
output: {
publicPath: 'auto',
uniqueName: 'default'
},
optimization: {
runtimeChunk: false
},
plugins: [
new ModuleFederationPlugin({
name: 'default',
filename: 'remoteEntry.js',
library: {
type: 'window',
name: 'default',
},
exposes: {
'./Module': './extensions/default/app/src/extension.module.ts'
},
shared: {
'@angular/core': {
singleton: true,
requiredVersion: '^12.0.0'
},
'@angular/common': {
singleton: true,
requiredVersion: '^12.0.0'
},
'@angular/common/http': {
singleton: true,
requiredVersion: '^12.0.0'
},
'@angular/router': {
singleton: true,
requiredVersion: '^12.0.0'
},
'@angular/animations': {
singleton: true,
requiredVersion: '^12.0.0'
},
'@angular/cdk': {
singleton: true,
requiredVersion: '^12.0.0'
},
'@angular/forms': {
singleton: true,
requiredVersion: '^12.0.0'
},
'@apollo/client': {
singleton: true,
requiredVersion: '^3.3.7'
},
'@apollo/link-error': {
singleton: true,
requiredVersion: '^2.0.0-beta.3'
},
'angular-svg-icon': {
singleton: true,
requiredVersion: '^12.0.0'
},
'apollo-angular': {
singleton: true,
requiredVersion: '^2.2.0'
},
graphql: {
singleton: true,
requiredVersion: '^14.7.0'
},
'graphql-tag': {
singleton: true,
requiredVersion: '^2.11.0'
},
'lodash-es': {
singleton: true,
requiredVersion: '^4.17.20'
},
luxon: {
singleton: true,
requiredVersion: '^1.25.0'
},
'ng-animate': {
singleton: true,
requiredVersion: '^1.0.0'
},
'ngx-chips': {
singleton: true,
requiredVersion: '^2.2.2'
},
'@swimlane/ngx-charts': {
singleton: true,
requiredVersion: '^17.0.0'
},
'@ng-bootstrap/ng-bootstrap': {
singleton: true,
requiredVersion: '^9.0.2'
},
'bn-ng-idle': {
singleton: true,
requiredVersion: '^1.0.1'
},
'rxjs': {
singleton: true,
requiredVersion: '^6.6.3'
},
'rxjs/operators': {
singleton: true,
requiredVersion: '^6.6.3'
},
common: {
singleton: true,
import: 'dist/common',
requiredVersion: false
},
core: {
singleton: true,
import: 'dist/core',
requiredVersion: false
},
}
}),
],
};

View file

@ -0,0 +1 @@
module.exports = require('./webpack.config');

View file

View file

@ -0,0 +1,25 @@
<?php
use Symfony\Component\DependencyInjection\Container;
if (!isset($container)) {
return;
}
/** @var Container $container */
$extensions = $container->getParameter('extensions') ?? [];
$extensions['default'] = [
'remoteEntry' => './extensions/default/remoteEntry.js',
'remoteName' => 'default',
'enabled' => true,
'extension_name' => 'Default',
'extension_uri' => 'https://suitecrm.com',
'description' => 'An example Extension template or for simple instance customisations',
'version' => '1.0.0',
'author' => 'SalesAgility',
'author_uri' => 'https://www.salesagility.com',
'license' => 'GPL3'
];
$container->setParameter('extensions', $extensions);

View file

@ -0,0 +1,7 @@
services:
# default configuration for services in *this* file
_defaults:
autowire: true
autoconfigure: true
public: true
# default configuration for services in *this* file

View file

@ -11,10 +11,12 @@
"build-dev:shell": "ng build shell",
"build-dev:common": "ng build common",
"build-dev:core": "ng build core",
"build-dev:default": "ng build default --configuration dev",
"build": "npm run build:shell",
"build:shell": "ng build shell --configuration production",
"build:common": "ng build common --configuration production",
"build:core": "ng build core --configuration production",
"build:default": "ng build default --configuration production",
"test": "npm run test:shell",
"test:core": "ng test core",
"gen-index": "barrelsby --delete -e '.*\\.spec.*' -q",