diff --git a/angular.json b/angular.json index 975dafa..dec9f5d 100644 --- a/angular.json +++ b/angular.json @@ -14,6 +14,11 @@ "options": { "tsConfig": "projects/ngqp/core/tsconfig.lib.json", "project": "projects/ngqp/core/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/ngqp/core/tsconfig.lib.prod.json" + } } }, "test": { @@ -48,6 +53,7 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { + "aot": true, "outputPath": "dist/ngqp-demo", "index": "projects/ngqp-demo/src/index.html", "main": "projects/ngqp-demo/src/main.ts", @@ -85,6 +91,10 @@ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], "serviceWorker": true @@ -127,7 +137,7 @@ "defaultProject": "@ngqp/core", "schematics": { "@schematics/angular:component": { - "styleext": "scss" + "style": "scss" } } } \ No newline at end of file diff --git a/package.json b/package.json index f2906b6..f1b83eb 100644 --- a/package.json +++ b/package.json @@ -29,62 +29,59 @@ } }, "dependencies": { - "@angular/animations": "~7.2.11", - "@angular/common": "~7.2.11", - "@angular/compiler": "~7.2.11", - "@angular/core": "~7.2.11", - "@angular/forms": "~7.2.11", - "@angular/platform-browser": "~7.2.11", - "@angular/platform-browser-dynamic": "~7.2.11", - "@angular/pwa": "^0.13.5", - "@angular/router": "~7.2.11", - "@angular/service-worker": "~7.2.11", - "@fortawesome/angular-fontawesome": "^0.3.0", - "@fortawesome/fontawesome-svg-core": "^1.2.12", - "@fortawesome/free-brands-svg-icons": "^5.6.3", - "@fortawesome/free-solid-svg-icons": "^5.6.3", - "@ng-bootstrap/ng-bootstrap": "^4.0.4", + "@angular/animations": "~10.1.6", + "@angular/common": "~10.1.6", + "@angular/compiler": "~10.1.6", + "@angular/core": "~10.1.6", + "@angular/forms": "~10.1.6", + "@angular/platform-browser": "~10.1.6", + "@angular/platform-browser-dynamic": "~10.1.6", + "@angular/router": "~10.1.6", + "@angular/service-worker": "~10.1.6", + "@fortawesome/angular-fontawesome": "^0.7.0", + "@fortawesome/fontawesome-svg-core": "^1.2.32", + "@fortawesome/free-brands-svg-icons": "^5.15.1", + "@fortawesome/free-solid-svg-icons": "^5.15.1", + "@ng-bootstrap/ng-bootstrap": "^7.0.0", "add": "^2.0.6", - "bootstrap": "^4.3.1", - "core-js": "^2.6.2", - "prismjs": "^1.21.0", + "bootstrap": "^4.5.3", + "core-js": "^3.6.5", + "prismjs": "^1.22.0", "rxjs": "~6.3.3", - "tslib": "^1.9.0", - "yarn": "^1.22.0", - "zone.js": "~0.8.29" + "tslib": "^2.0.0", + "yarn": "^1.22.10", + "zone.js": "~0.10.2" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.13.5", - "@angular-devkit/build-ng-packagr": "~0.13.5", - "@angular/cli": "~7.3.6", - "@angular/compiler-cli": "~7.2.11", - "@angular/language-service": "~7.2.11", - "@commitlint/cli": "^7.5.2", - "@commitlint/config-conventional": "^7.5.0", - "@commitlint/travis-cli": "^7.5.2", - "@compodoc/compodoc": "^1.1.10", - "@types/jasmine": "~2.8.8", - "@types/jasminewd2": "~2.0.3", - "@types/node": "~10.12.18", - "@types/prismjs": "^1.9.0", - "angular-cli-ghpages": "^0.5.3", - "codecov": "^3.7.1", - "codelyzer": "~4.5.0", - "husky": "^1.3.1", - "jasmine-core": "~2.99.1", - "jasmine-spec-reporter": "~4.2.1", - "karma": "~3.1.1", - "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "~2.0.1", - "karma-jasmine": "~1.1.2", - "karma-jasmine-html-reporter": "^1.4.0", - "ng-packagr": "^4.6.0", - "protractor": "~5.4.2", - "standard-version": "^8.0.2", - "ts-node": "~7.0.0", - "tsickle": ">=0.29.0", - "tslib": "^1.9.0", - "tslint": "~5.12.1", - "typescript": "~3.2.4" + "@angular-devkit/build-angular": "~0.1001.7", + "@angular-devkit/build-ng-packagr": "~0.1001.7", + "@angular/cli": "~10.1.7", + "@angular/compiler-cli": "~10.1.6", + "@angular/language-service": "~10.1.6", + "@commitlint/cli": "^11.0.0", + "@commitlint/config-conventional": "^11.0.0", + "@commitlint/travis-cli": "^11.0.0", + "@compodoc/compodoc": "^1.1.11", + "@types/jasmine": "~3.5.14", + "@types/jasminewd2": "~2.0.8", + "@types/node": "^12.11.1", + "@types/prismjs": "^1.16.1", + "angular-cli-ghpages": "^0.6.2", + "codecov": "^3.8.0", + "codelyzer": "^5.1.2", + "husky": "^4.3.0", + "jasmine-core": "~3.5.0", + "jasmine-spec-reporter": "~5.0.0", + "karma": "~5.0.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage-istanbul-reporter": "~3.0.2", + "karma-jasmine": "~4.0.0", + "karma-jasmine-html-reporter": "^1.5.0", + "ng-packagr": "^10.1.0", + "protractor": "~7.0.0", + "standard-version": "^9.0.0", + "ts-node": "~9.0.0", + "tslint": "~6.1.0", + "typescript": "~4.0.3" } -} +} \ No newline at end of file diff --git a/projects/ngqp-demo/browserslist b/projects/ngqp-demo/.browserslistrc similarity index 100% rename from projects/ngqp-demo/browserslist rename to projects/ngqp-demo/.browserslistrc diff --git a/projects/ngqp-demo/src/app/docs-items/configuration/query-param-group/query-param-group-configuration-docs.component.ts b/projects/ngqp-demo/src/app/docs-items/configuration/query-param-group/query-param-group-configuration-docs.component.ts index 19d8e30..246cc89 100644 --- a/projects/ngqp-demo/src/app/docs-items/configuration/query-param-group/query-param-group-configuration-docs.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/configuration/query-param-group/query-param-group-configuration-docs.component.ts @@ -10,7 +10,7 @@ export class QueryParamGroupConfigurationDocsComponent { public readonly DocsPage = DocsPage; - public readonly configSnippet = require('!raw-loader!./snippets/qpg-config.example.ts'); - public readonly preserveFragmentConfigSnippet = require('!raw-loader!./snippets/qpg-config-preserveFragment.example.ts'); + public readonly configSnippet = require('!raw-loader!./snippets/qpg-config.example.ts').default; + public readonly preserveFragmentConfigSnippet = require('!raw-loader!./snippets/qpg-config-preserveFragment.example.ts').default; } \ No newline at end of file diff --git a/projects/ngqp-demo/src/app/docs-items/configuration/query-param-module/query-param-module-configuration-docs.component.ts b/projects/ngqp-demo/src/app/docs-items/configuration/query-param-module/query-param-module-configuration-docs.component.ts index f12f0b9..ad146ca 100644 --- a/projects/ngqp-demo/src/app/docs-items/configuration/query-param-module/query-param-module-configuration-docs.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/configuration/query-param-module/query-param-module-configuration-docs.component.ts @@ -10,8 +10,8 @@ export class QueryParamModuleConfigurationDocsComponent { public readonly DocsPage = DocsPage; - public readonly withConfigSnippet = require('!raw-loader!./snippets/qpm-with-config.example.ts'); - public readonly replaceUrlConfigSnippet = require('!raw-loader!./snippets/qpm-config-replaceUrl.example.ts'); - public readonly preserveFragmentConfigSnippet = require('!raw-loader!./snippets/qpm-config-preserveFragment.example.ts'); + public readonly withConfigSnippet = require('!raw-loader!./snippets/qpm-with-config.example.ts').default; + public readonly replaceUrlConfigSnippet = require('!raw-loader!./snippets/qpm-config-replaceUrl.example.ts').default; + public readonly preserveFragmentConfigSnippet = require('!raw-loader!./snippets/qpm-config-preserveFragment.example.ts').default; } \ No newline at end of file diff --git a/projects/ngqp-demo/src/app/docs-items/examples/add-remove-parameter/add-remove-parameter-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/add-remove-parameter/add-remove-parameter-example.component.ts index 11373d5..6dc77bb 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/add-remove-parameter/add-remove-parameter-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/add-remove-parameter/add-remove-parameter-example.component.ts @@ -11,8 +11,8 @@ export class AddRemoveParameterExampleComponent { public paramGroup: QueryParamGroup; - public markup = require('!raw-loader!./add-remove-parameter-example.component.html'); - public typescript = require('!raw-loader!./add-remove-parameter-example.component.ts'); + public markup = require('!raw-loader!./add-remove-parameter-example.component.html').default; + public typescript = require('!raw-loader!./add-remove-parameter-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({}); diff --git a/projects/ngqp-demo/src/app/docs-items/examples/combine-with-example/combine-with-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/combine-with-example/combine-with-example.component.ts index 8eff31c..0c20d1e 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/combine-with-example/combine-with-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/combine-with-example/combine-with-example.component.ts @@ -12,8 +12,8 @@ export class CombineWithExampleComponent { public paramGroup: QueryParamGroup; public fruits: string[] = [ 'Apple', 'Banana', 'Strawberry', 'Raspberry', 'Mango', 'Passion Fruit', 'Orange' ]; - public markup = require('!raw-loader!./combine-with-example.component.html'); - public typescript = require('!raw-loader!./combine-with-example.component.ts'); + public markup = require('!raw-loader!./combine-with-example.component.html').default; + public typescript = require('!raw-loader!./combine-with-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/control-value-accessor-directive-example/control-value-accessor-directive-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/control-value-accessor-directive-example/control-value-accessor-directive-example.component.ts index e749c85..39bcbdf 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/control-value-accessor-directive-example/control-value-accessor-directive-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/control-value-accessor-directive-example/control-value-accessor-directive-example.component.ts @@ -11,8 +11,8 @@ export class ControlValueAccessorDirectiveExampleComponent { public paramGroup: QueryParamGroup; - public markup = require('!raw-loader!./control-value-accessor-directive-example.component.html'); - public typescript = require('!raw-loader!./control-value-accessor-directive-example.component.ts'); + public markup = require('!raw-loader!./control-value-accessor-directive-example.component.html').default; + public typescript = require('!raw-loader!./control-value-accessor-directive-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/debounce-time-example/debounce-time-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/debounce-time-example/debounce-time-example.component.ts index 1d9e5ee..6514a74 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/debounce-time-example/debounce-time-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/debounce-time-example/debounce-time-example.component.ts @@ -11,8 +11,8 @@ export class DebounceTimeExampleComponent { public paramGroup: QueryParamGroup; - public markup = require('!raw-loader!./debounce-time-example.component.html'); - public typescript = require('!raw-loader!./debounce-time-example.component.ts'); + public markup = require('!raw-loader!./debounce-time-example.component.html').default; + public typescript = require('!raw-loader!./debounce-time-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/empty-on-example/empty-on-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/empty-on-example/empty-on-example.component.ts index cd5419a..f7e91bd 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/empty-on-example/empty-on-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/empty-on-example/empty-on-example.component.ts @@ -11,8 +11,8 @@ export class EmptyOnExampleComponent { public paramGroup: QueryParamGroup; - public markup = require('!raw-loader!./empty-on-example.component.html'); - public typescript = require('!raw-loader!./empty-on-example.component.ts'); + public markup = require('!raw-loader!./empty-on-example.component.html').default; + public typescript = require('!raw-loader!./empty-on-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/manual-wiring-example/manual-wiring-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/manual-wiring-example/manual-wiring-example.component.ts index 62ff6b4..853cf1e 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/manual-wiring-example/manual-wiring-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/manual-wiring-example/manual-wiring-example.component.ts @@ -14,8 +14,8 @@ export class ManualWiringExampleComponent implements OnDestroy { public paramGroup: QueryParamGroup; public currentPage = 1; - public markup = require('!raw-loader!./manual-wiring-example.component.html'); - public typescript = require('!raw-loader!./manual-wiring-example.component.ts'); + public markup = require('!raw-loader!./manual-wiring-example.component.html').default; + public typescript = require('!raw-loader!./manual-wiring-example.component.ts').default; private componentDestroyed$ = new Subject(); diff --git a/projects/ngqp-demo/src/app/docs-items/examples/multi-example/multi-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/multi-example/multi-example.component.ts index 376360b..9a53cc7 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/multi-example/multi-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/multi-example/multi-example.component.ts @@ -12,8 +12,8 @@ export class MultiExampleComponent { public paramGroup: QueryParamGroup; public fruits: string[] = [ 'Apple', 'Banana', 'Strawberry', 'Raspberry', 'Mango', 'Passion Fruit', 'Orange' ]; - public markup = require('!raw-loader!./multi-example.component.html'); - public typescript = require('!raw-loader!./multi-example.component.ts'); + public markup = require('!raw-loader!./multi-example.component.html').default; + public typescript = require('!raw-loader!./multi-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/partition-example/partition-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/partition-example/partition-example.component.ts index dcc1381..c572503 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/partition-example/partition-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/partition-example/partition-example.component.ts @@ -11,8 +11,8 @@ export class PartitionExampleComponent { public paramGroup: QueryParamGroup; - public markup = require('!raw-loader!./partition-example.component.html'); - public typescript = require('!raw-loader!./partition-example.component.ts'); + public markup = require('!raw-loader!./partition-example.component.html').default; + public typescript = require('!raw-loader!./partition-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/patch-set-value-example/patch-set-value-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/patch-set-value-example/patch-set-value-example.component.ts index 155b6d3..2583ab3 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/patch-set-value-example/patch-set-value-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/patch-set-value-example/patch-set-value-example.component.ts @@ -11,8 +11,8 @@ export class PatchSetValueExampleComponent { public paramGroup: QueryParamGroup; - public markup = require('!raw-loader!./patch-set-value-example.component.html'); - public typescript = require('!raw-loader!./patch-set-value-example.component.ts'); + public markup = require('!raw-loader!./patch-set-value-example.component.html').default; + public typescript = require('!raw-loader!./patch-set-value-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/replace-url-example/replace-url-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/replace-url-example/replace-url-example.component.ts index e674b88..6841a9e 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/replace-url-example/replace-url-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/replace-url-example/replace-url-example.component.ts @@ -12,8 +12,8 @@ export class ReplaceUrlExampleComponent { public replaceParamGroup: QueryParamGroup; public noReplaceParamGroup: QueryParamGroup; - public markup = require('!raw-loader!./replace-url-example.component.html'); - public typescript = require('!raw-loader!./replace-url-example.component.ts'); + public markup = require('!raw-loader!./replace-url-example.component.html').default; + public typescript = require('!raw-loader!./replace-url-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.replaceParamGroup = this.qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/serializer-example/serializer-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/serializer-example/serializer-example.component.ts index 1fbe28c..9b7311b 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/serializer-example/serializer-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/serializer-example/serializer-example.component.ts @@ -11,8 +11,8 @@ export class SerializerExampleComponent { public paramGroup: QueryParamGroup; - public markup = require('!raw-loader!./serializer-example.component.html'); - public typescript = require('!raw-loader!./serializer-example.component.ts'); + public markup = require('!raw-loader!./serializer-example.component.html').default; + public typescript = require('!raw-loader!./serializer-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.paramGroup = qpb.group({ diff --git a/projects/ngqp-demo/src/app/docs-items/examples/standalone-example/standalone-example.component.ts b/projects/ngqp-demo/src/app/docs-items/examples/standalone-example/standalone-example.component.ts index b38b6db..5f42c9c 100644 --- a/projects/ngqp-demo/src/app/docs-items/examples/standalone-example/standalone-example.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/examples/standalone-example/standalone-example.component.ts @@ -11,8 +11,8 @@ export class StandaloneExampleComponent { public param: QueryParam; - public markup = require('!raw-loader!./standalone-example.component.html'); - public typescript = require('!raw-loader!./standalone-example.component.ts'); + public markup = require('!raw-loader!./standalone-example.component.html').default; + public typescript = require('!raw-loader!./standalone-example.component.ts').default; constructor(private qpb: QueryParamBuilder) { this.param = qpb.stringParam('q'); diff --git a/projects/ngqp-demo/src/app/docs-items/programmatic-access/query-param-group/query-param-group-programmatic-access-docs.component.ts b/projects/ngqp-demo/src/app/docs-items/programmatic-access/query-param-group/query-param-group-programmatic-access-docs.component.ts index 080f515..10cccdf 100644 --- a/projects/ngqp-demo/src/app/docs-items/programmatic-access/query-param-group/query-param-group-programmatic-access-docs.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/programmatic-access/query-param-group/query-param-group-programmatic-access-docs.component.ts @@ -10,9 +10,9 @@ export class QueryParamGroupProgrammaticAccessDocsComponent { public readonly DocsPage = DocsPage; - public readonly getSnippet = require('!raw-loader!./snippets/qpg-api-get.example.ts'); - public readonly valueSnippet = require('!raw-loader!./snippets/qpg-api-value.example.ts'); - public readonly valueChangesSnippet = require('!raw-loader!./snippets/qpg-api-valueChanges.example.ts'); + public readonly getSnippet = require('!raw-loader!./snippets/qpg-api-get.example.ts').default; + public readonly valueSnippet = require('!raw-loader!./snippets/qpg-api-value.example.ts').default; + public readonly valueChangesSnippet = require('!raw-loader!./snippets/qpg-api-valueChanges.example.ts').default; } \ No newline at end of file diff --git a/projects/ngqp-demo/src/app/docs-items/programmatic-access/query-param/query-param-programmatic-access-docs.component.ts b/projects/ngqp-demo/src/app/docs-items/programmatic-access/query-param/query-param-programmatic-access-docs.component.ts index 38b8a6d..38e3202 100644 --- a/projects/ngqp-demo/src/app/docs-items/programmatic-access/query-param/query-param-programmatic-access-docs.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/programmatic-access/query-param/query-param-programmatic-access-docs.component.ts @@ -10,8 +10,8 @@ export class QueryParamProgrammaticAccessDocsComponent { public readonly DocsPage = DocsPage; - public readonly valueSnippet = require('!raw-loader!./snippets/qp-api-value.example.ts'); - public readonly valueChangesSnippet = require('!raw-loader!./snippets/qp-api-valueChanges.example.ts'); - public readonly setValueSnippet = require('!raw-loader!./snippets/qp-api-setValue.example.ts'); + public readonly valueSnippet = require('!raw-loader!./snippets/qp-api-value.example.ts').default; + public readonly valueChangesSnippet = require('!raw-loader!./snippets/qp-api-valueChanges.example.ts').default; + public readonly setValueSnippet = require('!raw-loader!./snippets/qp-api-setValue.example.ts').default; } \ No newline at end of file diff --git a/projects/ngqp-demo/src/app/docs-items/usage-guide/usage-guide-docs.component.ts b/projects/ngqp-demo/src/app/docs-items/usage-guide/usage-guide-docs.component.ts index 12dfef4..ceb8bc8 100644 --- a/projects/ngqp-demo/src/app/docs-items/usage-guide/usage-guide-docs.component.ts +++ b/projects/ngqp-demo/src/app/docs-items/usage-guide/usage-guide-docs.component.ts @@ -10,8 +10,8 @@ export class UsageGuideDocsComponent { public DocsPage = DocsPage; - public defineModelSnippet = require('!raw-loader!./snippets/define-model.example.ts'); - public bindModelSnippet = require('!raw-loader!./snippets/bind-model.example.html'); - public usingModelSnippet = require('!raw-loader!./snippets/use-model.example.ts'); + public defineModelSnippet = require('!!raw-loader!./snippets/define-model.example.ts').default; + public bindModelSnippet = require('!!raw-loader!./snippets/bind-model.example.html').default; + public usingModelSnippet = require('!!raw-loader!./snippets/use-model.example.ts').default; } diff --git a/projects/ngqp-demo/src/app/shared/api-docs-link/api-docs-link.component.ts b/projects/ngqp-demo/src/app/shared/api-docs-link/api-docs-link.component.ts index f79a3ff..696a47b 100644 --- a/projects/ngqp-demo/src/app/shared/api-docs-link/api-docs-link.component.ts +++ b/projects/ngqp-demo/src/app/shared/api-docs-link/api-docs-link.component.ts @@ -1,5 +1,14 @@ -import { AfterContentInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core'; +import { + AfterContentInit, AfterViewInit, + ChangeDetectionStrategy, ChangeDetectorRef, + Component, + ElementRef, + Input, + OnInit, + ViewChild +} from '@angular/core'; import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; +import {combineLatest, Subject} from 'rxjs'; export type ApiDocType = 'modules' | 'classes' | 'directives' | 'injectables'; @@ -19,7 +28,7 @@ const LOOKUP: { [ name: string ]: ApiDocType } = { styleUrls: [ './api-docs-link.component.scss' ], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ApiDocsLinkComponent implements AfterContentInit { +export class ApiDocsLinkComponent implements OnInit, AfterViewInit, AfterContentInit { public icon = faExternalLinkAlt; public url: string; @@ -30,12 +39,31 @@ export class ApiDocsLinkComponent implements AfterContentInit { @Input() public apiDocsLink: string; - public ngAfterContentInit(): void { - const [ name, fragment = '' ] = (this.apiDocsLink ? this.apiDocsLink : this.contentNode.nativeElement.innerText) - .split('#'); - const type = this.getTypeByName(name); + private readonly viewInit$ = new Subject(); + private readonly contentInit$ = new Subject(); - this.url = `/api-docs/${type}/${name}.html#${fragment}`; + constructor(private readonly cdRef: ChangeDetectorRef) { + } + + public ngOnInit() { + combineLatest([this.viewInit$, this.contentInit$]).subscribe(() => { + const [ name, fragment = '' ] = (this.apiDocsLink ? this.apiDocsLink : this.contentNode.nativeElement.innerText) + .split('#'); + const type = this.getTypeByName(name); + + this.url = `/api-docs/${type}/${name}.html#${fragment}`; + this.cdRef.detectChanges(); + }); + } + + public ngAfterViewInit() { + this.viewInit$.next(); + this.viewInit$.complete(); + } + + public ngAfterContentInit() { + this.contentInit$.next(); + this.contentInit$.complete(); } private getTypeByName(name: string): ApiDocType { diff --git a/projects/ngqp-demo/src/app/shared/demo-snippet/prism.service.ts b/projects/ngqp-demo/src/app/shared/demo-snippet/prism.service.ts index 2acaae9..d8e834f 100644 --- a/projects/ngqp-demo/src/app/shared/demo-snippet/prism.service.ts +++ b/projects/ngqp-demo/src/app/shared/demo-snippet/prism.service.ts @@ -15,7 +15,7 @@ export class PrismService { return code; } - return prism.highlight(code, prism.languages[ language ]); + return prism.highlight(code, prism.languages[ language ], language); } } diff --git a/projects/ngqp-demo/src/app/shared/docs-fragment/docs-fragment.component.ts b/projects/ngqp-demo/src/app/shared/docs-fragment/docs-fragment.component.ts index e6afa45..18786c2 100644 --- a/projects/ngqp-demo/src/app/shared/docs-fragment/docs-fragment.component.ts +++ b/projects/ngqp-demo/src/app/shared/docs-fragment/docs-fragment.component.ts @@ -1,6 +1,17 @@ -import { AfterContentInit, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, Optional, ViewChild } from '@angular/core'; +import { + AfterContentInit, + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + HostBinding, + Input, OnInit, + Optional, + ViewChild +} from '@angular/core'; import { FragmentsService } from './fragments.service'; import { faLink } from '@fortawesome/free-solid-svg-icons'; +import {combineLatest, Subject} from 'rxjs'; const MAX_LEVEL = 3; @@ -9,7 +20,7 @@ const MAX_LEVEL = 3; templateUrl: './docs-fragment.component.html', styleUrls: ['./docs-fragment.component.scss'], }) -export class DocsFragmentComponent implements AfterContentInit { +export class DocsFragmentComponent implements OnInit, AfterViewInit, AfterContentInit { public faLink = faLink; @@ -20,29 +31,44 @@ export class DocsFragmentComponent implements AfterContentInit { @HostBinding('attr.id') public fragment: string; + private readonly viewInit$ = new Subject(); + private readonly contentInit$ = new Subject(); + constructor( @Optional() private fragmentsService: FragmentsService, private cdRef: ChangeDetectorRef, ) { } - public ngAfterContentInit() { - if (!this.fragmentsService) { - return; - } - - const level = this.getHeadingLevel(this.content.nativeElement.innerHTML); - if (level > MAX_LEVEL) { - return; - } - - this.fragmentsService.addFragment({ - id: this.fragment, - name: this.content.nativeElement.innerText.trim(), - indent: level, + public ngOnInit() { + combineLatest([this.viewInit$, this.contentInit$]).subscribe(() => { + if (!this.fragmentsService) { + return; + } + + const level = this.getHeadingLevel(this.content.nativeElement.innerHTML); + if (level > MAX_LEVEL) { + return; + } + + this.fragmentsService.addFragment({ + id: this.fragment, + name: this.content.nativeElement.innerText.trim(), + indent: level, + }); + + this.cdRef.detectChanges(); }); + } + + public ngAfterViewInit() { + this.viewInit$.next(); + this.viewInit$.complete(); + } - this.cdRef.detectChanges(); + public ngAfterContentInit() { + this.contentInit$.next(); + this.contentInit$.complete(); } private getHeadingLevel(html: string): number { diff --git a/projects/ngqp-demo/src/app/shared/docs-fragment/fragments.service.ts b/projects/ngqp-demo/src/app/shared/docs-fragment/fragments.service.ts index 399c70e..ab6cf88 100644 --- a/projects/ngqp-demo/src/app/shared/docs-fragment/fragments.service.ts +++ b/projects/ngqp-demo/src/app/shared/docs-fragment/fragments.service.ts @@ -1,4 +1,6 @@ -import { Injectable } from '@angular/core'; +import {Injectable, OnDestroy} from '@angular/core'; +import {BehaviorSubject, Subject} from 'rxjs'; +import {takeUntil} from 'rxjs/operators'; export interface Fragment { name: string; @@ -7,12 +9,26 @@ export interface Fragment { } @Injectable() -export class FragmentsService { +export class FragmentsService implements OnDestroy { - public fragments: Fragment[] = []; + public readonly fragments$ = new BehaviorSubject([]); + + private readonly destroy$ = new Subject(); + private fragments: Fragment[]; + + constructor() { + this.fragments$.pipe( + takeUntil(this.destroy$), + ).subscribe(fragments => this.fragments = fragments); + } + + public ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } public addFragment(item: Fragment) { - this.fragments = [...this.fragments, item]; + this.fragments$.next([...this.fragments, item]); } } diff --git a/projects/ngqp-demo/src/app/shared/docs-item/docs-item.component.html b/projects/ngqp-demo/src/app/shared/docs-item/docs-item.component.html index 6f12d56..e067570 100644 --- a/projects/ngqp-demo/src/app/shared/docs-item/docs-item.component.html +++ b/projects/ngqp-demo/src/app/shared/docs-item/docs-item.component.html @@ -12,13 +12,13 @@ -
+
{{ docsPage | docsPageName }}