Skip to content

Commit

Permalink
feat: angular esbuild
Browse files Browse the repository at this point in the history
  • Loading branch information
quentinderoubaix committed Jan 24, 2024
1 parent f116a16 commit 9b4ff86
Show file tree
Hide file tree
Showing 22 changed files with 110 additions and 162 deletions.
23 changes: 12 additions & 11 deletions angular/demo/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,24 @@
"sourceRoot": "src",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist",
"outputPath": {
"base": "dist",
"browser": ""
},
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"browser": "src/main.ts",
"polyfills": ["src/polyfills.ts"],
"tsConfig": "tsconfig.build.json",
"assets": ["src/agnosui-logo.svg", "src/assets"],
"styles": ["src/styles.css", "../../common/demo.scss", "@agnos-ui/style-bootstrap/scss/agnosui.scss"],
"scripts": [],
"inlineStyleLanguage": "scss",
"extraWebpackConfig": "./webpack.cjs"
"loader": {
".txt": "text",
".svg": "text"
}
},
"configurations": {
"coverage": {
Expand Down Expand Up @@ -60,9 +66,7 @@
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
Expand All @@ -72,10 +76,7 @@
"defaultConfiguration": "production"
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"extraWebpackConfig": "./webpack.cjs"
},
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"servePath": "/angular/samples",
Expand Down
26 changes: 18 additions & 8 deletions angular/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,44 @@
"preview": "node scripts/preview.cjs dist --port 4200 --single"
},
"wireit": {
"generate:links": {
"command": "node scripts/regen-links.mjs",
"files": [
"scripts/regen-links.mjs",
"src/app/samples/**"
],
"output": [
"src/app/generated/samples.route.ts"
]
},
"dev": {
"command": "ng serve",
"dependencies": [
"../headless:generate:exports"
"../headless:generate:exports",
"generate:links"
],
"service": true
},
"dev:coverage": {
"command": "node --import @agnos-ui/code-coverage/interceptReadFile ../../node_modules/@angular/cli/bin/ng.js serve",
"dependencies": [
"../../code-coverage:build",
"../headless:generate:exports"
"../headless:generate:exports",
"generate:links"
],
"service": true
},
"build": {
"command": "ng build",
"dependencies": [
"generate:links",
"../lib:build",
"../../style-bootstrap:build"
],
"files": [
"src/**",
"angular.json",
"tsconfig.build.json",
"webpack.cjs"
"tsconfig.build.json"
],
"output": [
"dist/**"
Expand All @@ -46,15 +58,16 @@
"build:coverage": {
"command": "node --import @agnos-ui/code-coverage/interceptReadFile ../../node_modules/@angular/cli/bin/ng.js build --configuration=coverage",
"dependencies": [
"generate:links",
"../lib:build",
"../../style-bootstrap:build",
"../../code-coverage:build"
]
}
},
"dependencies": {
"@agnos-ui/angular-headless": "",
"@agnos-ui/angular": "",
"@agnos-ui/angular-headless": "",
"@agnos-ui/core": "",
"@agnos-ui/style-bootstrap": "",
"@angular/animations": "~17.1.0",
Expand All @@ -77,9 +90,6 @@
"@angular-eslint/template-parser": "^17.2.1",
"@angular/cli": "~17.1.0",
"@angular/compiler-cli": "~17.1.0",
"@types/webpack-env": "^1.18.4",
"ngx-build-plus": "^17.0.0",
"raw-loader": "^4.0.2",
"sirv-cli": "^2.0.2",
"typescript": "~5.3.3"
}
Expand Down
33 changes: 33 additions & 0 deletions angular/demo/scripts/regen-links.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import {glob} from 'glob';
import path from 'path';
import {fileURLToPath} from 'url';
import {writeFile, mkdir, rm} from 'fs/promises';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const files = (
await glob('**/*.route.ts', {
cwd: path.join(__dirname, '../src/app/samples'),
nodir: true,
})
).map((file) => file.slice(0, -9));
files.sort();

const content = `
import type {Route} from '@angular/router';
export const LINKS = ${JSON.stringify(files.map((file) => file.toLowerCase()))};
const importAndNotify = async (importFn: () => Promise<any>) => {
const comp = await importFn();
if (window.parent) {
window.parent.postMessage({type: 'sampleload'});
}
return comp;
}
export const SAMPLE_ROUTES: Route[] = [${files.map(
(file) => `{path: '${file.toLowerCase()}', loadComponent: () => importAndNotify(() => import('../samples/${file}.route'))}`,
)}];
`;

await rm(path.join(__dirname, '../src/app/generated'), {recursive: true, force: true});
await mkdir(path.join(__dirname, '../src/app/generated'));
await writeFile(path.join(__dirname, '../src/app/generated/samples.route.ts'), content);
38 changes: 5 additions & 33 deletions angular/demo/src/app/app.routes.ts
Original file line number Diff line number Diff line change
@@ -1,41 +1,13 @@
import type {Routes} from '@angular/router';
import {links} from './links.component';
import {links} from './links';
import {LINKS, SAMPLE_ROUTES} from './generated/samples.route';

const context = import.meta.webpackContext?.('./', {
regExp: /[^/]*\.route\.ts$/,
mode: 'lazy',
});

const componentRegExp = /samples\/([^/]*)\/([^/]*).route\.ts$/;
function replacePattern(webpackContext: __WebpackModuleApi.RequireContext) {
const directComponents: Record<string, any> = {};
const keys = webpackContext.keys();
for (const key of keys) {
const matches = key.match(componentRegExp);
if (matches) {
directComponents[`${matches[1]}/${matches[2]}`.toLowerCase()] = key;
}
}
return directComponents;
}
const components = replacePattern(context!);
export const ROUTES: Routes = [
{
path: '',
pathMatch: 'full',
loadComponent: () => import('./links.component').then((c) => c.LinksComponent),
providers: [{provide: links, useValue: Object.keys(components)}],
loadComponent: () => import('./links.component'),
providers: [{provide: links, useValue: LINKS}],
},
...Object.entries(components).map(([path, component]) => {
return {
path,
loadComponent: async () => {
const comp = (await context!(component)).default;
if (window.parent) {
window.parent.postMessage({type: 'sampleload'});
}
return comp;
},
};
}),
...SAMPLE_ROUTES,
];
7 changes: 3 additions & 4 deletions angular/demo/src/app/links.component.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {CommonModule} from '@angular/common';
import {Component, inject, InjectionToken} from '@angular/core';

export const links = new InjectionToken<string[]>('app-links');
import {Component, inject} from '@angular/core';
import {links} from './links';

@Component({
standalone: true,
Expand All @@ -18,6 +17,6 @@ export const links = new InjectionToken<string[]>('app-links');
`,
styles: "@import '@agnos-ui/common/samples/links.scss';",
})
export class LinksComponent {
export default class LinksComponent {
links = inject(links);
}
3 changes: 3 additions & 0 deletions angular/demo/src/app/links.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import {InjectionToken} from '@angular/core';

export const links = new InjectionToken<string[]>('app-links');
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {AgnosUIAngularModule} from '@agnos-ui/angular';
import {Component} from '@angular/core';
import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
import BODY from '@agnos-ui/common/samples/accordion/body.txt';

@Component({
standalone: true,
Expand Down
2 changes: 1 addition & 1 deletion angular/demo/src/app/samples/accordion/default.route.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {AgnosUIAngularModule} from '@agnos-ui/angular';
import {Component} from '@angular/core';
import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
import BODY from '@agnos-ui/common/samples/accordion/body.txt';

@Component({
standalone: true,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {AgnosUIAngularModule} from '@agnos-ui/angular';
import {Component} from '@angular/core';
import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
import BODY from '@agnos-ui/common/samples/accordion/body.txt';

@Component({
standalone: true,
Expand Down
10 changes: 5 additions & 5 deletions angular/demo/src/app/samples/alert/alert-icon.component.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import biCheckCircleFill from '!raw-loader!bootstrap-icons/icons/check-circle-fill.svg';
import biDashCircleFill from '!raw-loader!bootstrap-icons/icons/dash-circle-fill.svg';
import biExclamationTriangleFill from '!raw-loader!bootstrap-icons/icons/exclamation-triangle-fill.svg';
import biInfoCircleFill from '!raw-loader!bootstrap-icons/icons/info-circle-fill.svg';
import biLightbulb from '!raw-loader!bootstrap-icons/icons/lightbulb.svg';
import biCheckCircleFill from 'bootstrap-icons/icons/check-circle-fill.svg';
import biDashCircleFill from 'bootstrap-icons/icons/dash-circle-fill.svg';
import biExclamationTriangleFill from 'bootstrap-icons/icons/exclamation-triangle-fill.svg';
import biInfoCircleFill from 'bootstrap-icons/icons/info-circle-fill.svg';
import biLightbulb from 'bootstrap-icons/icons/lightbulb.svg';
import type {AlertWidget} from '@agnos-ui/angular';
import {SlotComponent, SlotDirective} from '@agnos-ui/angular';
import {Component, inject} from '@angular/core';
Expand Down
2 changes: 1 addition & 1 deletion angular/demo/src/app/samples/rating/readonly.route.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {AgnosUIAngularModule} from '@agnos-ui/angular';
import {Component, ViewEncapsulation, inject} from '@angular/core';
import heartFill from '!raw-loader!bootstrap-icons/icons/heart-fill.svg';
import heartFill from 'bootstrap-icons/icons/heart-fill.svg';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
Expand Down
6 changes: 5 additions & 1 deletion angular/demo/src/app/types/raw-loader.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
declare module '!raw-loader!*' {
declare module '*.svg' {
const contents: string;
export = contents;
}
declare module '*.txt' {
const contents: string;
export = contents;
}
2 changes: 1 addition & 1 deletion angular/demo/tsconfig.build.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
"extends": "../tsconfig.json",
"exclude": ["test.ts", "**/*.spec.ts"],
"compilerOptions": {
"types": ["@types/webpack-env"]
"types": ["vite/client"]
}
}
1 change: 1 addition & 0 deletions angular/demo/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"@agnos-ui/angular-headless": ["./angular/headless/src"],
"@agnos-ui/angular": ["./angular/lib/src"],
"@agnos-ui/common/*": ["./common/*"],
"bootstrap-icons/icons/*": ["./node_modules/bootstrap-icons/icons/*"],
},
},
"files": ["src/main.ts", "src/polyfills.ts", "src/environments/environment.prod.ts"],
Expand Down
7 changes: 0 additions & 7 deletions angular/demo/webpack.cjs

This file was deleted.

2 changes: 1 addition & 1 deletion angular/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"module": "es2020",
"module": "esnext",
"lib": ["es2022", "dom", "dom.iterable"],
"useDefineForClassFields": false,
},
Expand Down
4 changes: 2 additions & 2 deletions demo/scripts/includeSamples.plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {existsSync} from 'fs';

const samplePrefix = '@agnos-ui/samples/';
const rawSampleSuffix = '?raw&sample';
const commonImport = /^(!raw-loader!)?@agnos-ui\/common\/samples\/([^?]*)(\?raw)?$/;
const commonImport = /^@agnos-ui\/common\/samples\/([^?]*)(\?raw)?$/;

const importRegExp = /import([^;]+from)?\s*['"]([^'"]+)['"]\s*;/g;
const findDependencies = (fileContent: string) => {
Expand Down Expand Up @@ -72,7 +72,7 @@ export const includeSamples = (): Plugin => {
await addFile(framework, path.basename(depPath), path.join(directory, depPath));
} else if (dependency.match(commonImport)) {
const baseDir = path.join(__dirname, '..', '..', 'common', 'samples');
const cleanedDependency = addExtension(baseDir, dependency.replace(commonImport, './$2'));
const cleanedDependency = addExtension(baseDir, dependency.replace(commonImport, './$1'));
await addFile(framework, path.basename(cleanedDependency), path.join(baseDir, cleanedDependency));
} else {
// TODO: check that the dependency is valid and included in package.json
Expand Down
16 changes: 9 additions & 7 deletions demo/src/lib/stackblitz/angular/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,29 @@
"demo": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-devkit/build-angular:application",
"configurations": {
"development": {
"buildOptimizer": false,
"extractLicenses": false,
"namedChunks": true,
"optimization": false,
"sourceMap": true,
"vendorChunk": true
"sourceMap": true
}
},
"options": {
"assets": [],
"index": "index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"browser": "src/main.ts",
"polyfills": ["src/polyfills.ts"],
"outputPath": "dist/demo",
"scripts": [],
"inlineStyleLanguage": "scss",
"styles": ["@agnos-ui/style-bootstrap/css/agnosui.css"],
"tsConfig": "tsconfig.json"
"tsConfig": "tsconfig.json",
"loader": {
".txt": "text",
".svg": "text"
}
}
},
"serve": {
Expand Down
1 change: 0 additions & 1 deletion demo/src/lib/stackblitz/angular/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
"@angular/platform-browser-dynamic": "~17.1.0",
"@angular/router": "~17.1.0",
"bootstrap-icons": "^1.11.3",
"raw-loader": "^4.0.2",
"rxjs": "^7.8.1",
"tslib": "^2.6.2",
"typescript": "~5.3.3",
Expand Down
6 changes: 5 additions & 1 deletion demo/src/lib/stackblitz/angular/src/raw-loader.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
declare module '!raw-loader!*' {
declare module '*.svg' {
const contents: string;
export = contents;
}
declare module '*.txt' {
const contents: string;
export = contents;
}
Loading

0 comments on commit 9b4ff86

Please sign in to comment.