From 4aa926c726b6e6d2dc0680f9afd45174a0d1cfc6 Mon Sep 17 00:00:00 2001 From: irustm Date: Sun, 20 Jun 2021 20:08:12 +0300 Subject: [PATCH] Improve load svg definitions with webpack --- backend/package-lock.json | 27 +- frontend/angular.json | 7 +- frontend/index-html-transform.js | 10 + frontend/package-lock.json | 14 +- frontend/src/app/app.component.ts | 2 +- .../app/jira-control/jira-control.module.ts | 2 - .../svg-definitions.component.html | 283 ------------------ .../svg-definitions.component.ts | 11 - .../svg-icon/svg-icon.component.html | 4 +- .../svg-icon/svg-icon.component.spec.ts | 19 -- .../svg-icon/svg-icon.component.ts | 7 - .../src/app/project/project.component.html | 1 - frontend/src/assets/svg-definitions.svg | 283 ++++++++++++++++++ 13 files changed, 337 insertions(+), 333 deletions(-) create mode 100644 frontend/index-html-transform.js delete mode 100644 frontend/src/app/jira-control/svg-definitions/svg-definitions.component.html delete mode 100644 frontend/src/app/jira-control/svg-definitions/svg-definitions.component.ts delete mode 100644 frontend/src/app/jira-control/svg-icon/svg-icon.component.spec.ts create mode 100644 frontend/src/assets/svg-definitions.svg diff --git a/backend/package-lock.json b/backend/package-lock.json index 37840831..3e3f8b6f 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -2779,6 +2779,15 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==" }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -4871,6 +4880,12 @@ "flat-cache": "^2.0.1" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -8803,6 +8818,12 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, + "nan": { + "version": "2.14.2", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz", + "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==", + "optional": true + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -11667,7 +11688,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", diff --git a/frontend/angular.json b/frontend/angular.json index 43bcc302..ff02b850 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -42,13 +42,14 @@ "customWebpackConfig": { "path": "./webpack.config.js" }, + "indexTransform": "./index-html-transform.js", "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, - "assets": [ + "assets": [ "src/assets", "src/data", { @@ -128,7 +129,7 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", - "assets": [ + "assets": [ "src/assets" ], "styles": [ @@ -169,4 +170,4 @@ "cli": { "defaultCollection": "@datorama/akita" } -} \ No newline at end of file +} diff --git a/frontend/index-html-transform.js b/frontend/index-html-transform.js new file mode 100644 index 00000000..528123cb --- /dev/null +++ b/frontend/index-html-transform.js @@ -0,0 +1,10 @@ +const fs = require('fs'); + +module.exports = (targetOptions, indexHtml) => { + const i = indexHtml.indexOf(''); + const data = fs.readFileSync('src/assets/svg-definitions.svg', 'utf8') + + return `${indexHtml.slice(0, i)} + ${data} + ${indexHtml.slice(i)}`; +}; diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 14ebe166..0edcad13 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1856,9 +1856,9 @@ } }, "@angular/cdk": { - "version": "11.0.3", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.0.3.tgz", - "integrity": "sha512-hgbJXvZURKBnZawwxUrsZE/3a+HCJh2UhoLIng3cn5Q+WIW/4a37knDl8B9DYKBWrCqeINXNcUHVSKkWc/gjCA==", + "version": "11.2.13", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.13.tgz", + "integrity": "sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==", "requires": { "parse5": "^5.0.0", "tslib": "^2.0.0" @@ -2332,6 +2332,14 @@ "tslib": "^2.0.0" } }, + "@angular/material": { + "version": "11.2.13", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.13.tgz", + "integrity": "sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg==", + "requires": { + "tslib": "^2.0.0" + } + }, "@angular/platform-browser": { "version": "11.0.5", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.0.5.tgz", diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 38113cd5..ad3157e2 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -17,7 +17,7 @@ export class AppComponent implements AfterViewInit { public projectQuery: ProjectQuery, private _cdr: ChangeDetectorRef, private _projectService: ProjectService, - private _googleAnalytics: GoogleAnalyticsService + private _googleAnalytics: GoogleAnalyticsService, ) { this._projectService.setLoading(true); diff --git a/frontend/src/app/jira-control/jira-control.module.ts b/frontend/src/app/jira-control/jira-control.module.ts index df16e7fe..a1067449 100644 --- a/frontend/src/app/jira-control/jira-control.module.ts +++ b/frontend/src/app/jira-control/jira-control.module.ts @@ -1,6 +1,5 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { SvgDefinitionsComponent } from './svg-definitions/svg-definitions.component'; import { SvgIconComponent } from './svg-icon/svg-icon.component'; import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component'; import { ButtonComponent } from './button/button.component'; @@ -9,7 +8,6 @@ import { ReactiveFormsModule } from '@angular/forms'; import { AvatarComponent } from './avatar/avatar.component'; const JiraControlComponents = [ - SvgDefinitionsComponent, SvgIconComponent, BreadcrumbsComponent, ButtonComponent, diff --git a/frontend/src/app/jira-control/svg-definitions/svg-definitions.component.html b/frontend/src/app/jira-control/svg-definitions/svg-definitions.component.html deleted file mode 100644 index 69543b30..00000000 --- a/frontend/src/app/jira-control/svg-definitions/svg-definitions.component.html +++ /dev/null @@ -1,283 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/app/jira-control/svg-definitions/svg-definitions.component.ts b/frontend/src/app/jira-control/svg-definitions/svg-definitions.component.ts deleted file mode 100644 index 16c6c2d0..00000000 --- a/frontend/src/app/jira-control/svg-definitions/svg-definitions.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; - -@Component({ - selector: 'svg-definitions', - templateUrl: './svg-definitions.component.html', - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class SvgDefinitionsComponent { - constructor() {} - -} diff --git a/frontend/src/app/jira-control/svg-icon/svg-icon.component.html b/frontend/src/app/jira-control/svg-icon/svg-icon.component.html index 4f521623..5d779478 100644 --- a/frontend/src/app/jira-control/svg-icon/svg-icon.component.html +++ b/frontend/src/app/jira-control/svg-icon/svg-icon.component.html @@ -4,5 +4,5 @@ [style.fill]="fill" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - - \ No newline at end of file + + diff --git a/frontend/src/app/jira-control/svg-icon/svg-icon.component.spec.ts b/frontend/src/app/jira-control/svg-icon/svg-icon.component.spec.ts deleted file mode 100644 index bdcae0ea..00000000 --- a/frontend/src/app/jira-control/svg-icon/svg-icon.component.spec.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {SvgIconComponent} from '@trungk18/jira-control/svg-icon/svg-icon.component'; - -describe('SvgIconComponent', () => { - let component: SvgIconComponent; - - beforeEach(() => { - component = new SvgIconComponent(); - component.name = 'test'; - component.window = { - location: { - href: '' - } - }; - }); - - it('should be able to get icon url ', () => { - expect(component.iconUrl).toEqual('#test'); - }); -}); diff --git a/frontend/src/app/jira-control/svg-icon/svg-icon.component.ts b/frontend/src/app/jira-control/svg-icon/svg-icon.component.ts index 238d000e..d631d4e8 100644 --- a/frontend/src/app/jira-control/svg-icon/svg-icon.component.ts +++ b/frontend/src/app/jira-control/svg-icon/svg-icon.component.ts @@ -9,11 +9,4 @@ export class SvgIconComponent { @Input() name: string; @Input() size = 16; @Input() fill = 'currentColor'; - window: any = window; - - constructor() {} - - get iconUrl() { - return `${this.window.location.href}#${this.name}`; - } } diff --git a/frontend/src/app/project/project.component.html b/frontend/src/app/project/project.component.html index 7e6ef60f..9c31ee05 100644 --- a/frontend/src/app/project/project.component.html +++ b/frontend/src/app/project/project.component.html @@ -4,4 +4,3 @@ - \ No newline at end of file diff --git a/frontend/src/assets/svg-definitions.svg b/frontend/src/assets/svg-definitions.svg new file mode 100644 index 00000000..d2a94c5c --- /dev/null +++ b/frontend/src/assets/svg-definitions.svg @@ -0,0 +1,283 @@ +