diff --git a/.ng-dev/format.ts b/.ng-dev/format.ts index 3912aef4a2f..a729d4201f6 100644 --- a/.ng-dev/format.ts +++ b/.ng-dev/format.ts @@ -12,7 +12,6 @@ export const format: FormatConfig = { 'clang-format': { 'matchers': [ '**/*.{js,ts}', - '!devtools/**', // TODO: burn down format failures and remove aio and integration exceptions. '!aio/**', '!integration/**', diff --git a/devtools/cypress/integration/comment-nodes.e2e.js b/devtools/cypress/integration/comment-nodes.e2e.js index b05f1c759a3..4e023926744 100644 --- a/devtools/cypress/integration/comment-nodes.e2e.js +++ b/devtools/cypress/integration/comment-nodes.e2e.js @@ -15,6 +15,9 @@ describe('Comment nodes', () => { it('should find comment nodes when the setting is enabled', () => { showComments(); - cy.get('.tree-wrapper').find('.tree-node:contains("#comment")').its('length').should('not.eq', 0); + cy.get('.tree-wrapper') + .find('.tree-node:contains("#comment")') + .its('length') + .should('not.eq', 0); }); }); diff --git a/devtools/cypress/integration/item-tracking.e2e.js b/devtools/cypress/integration/item-tracking.e2e.js index ff7d155b847..49febcac40f 100644 --- a/devtools/cypress/integration/item-tracking.e2e.js +++ b/devtools/cypress/integration/item-tracking.e2e.js @@ -10,24 +10,28 @@ describe('Tracking items from application to component tree', () => { getBody().find('app-todo').contains('Buy milk'); }); - cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').its('length').should('eq', 2); + cy.get('.tree-wrapper') + .find('.tree-node:contains("app-todo[TooltipDirective]")') + .its('length') + .should('eq', 2); }); it('should be able to detect a new todo from user and add it to the tree', () => { cy.enter('#sample-app') - .then((getBody) => { - getBody().find('input.new-todo').type('Buy cookies{enter}'); - }) - .then(() => { - cy.enter('#sample-app').then((getBody) => { - getBody().find('app-todo').contains('Buy milk'); + .then((getBody) => { + getBody().find('input.new-todo').type('Buy cookies{enter}'); + }) + .then(() => { + cy.enter('#sample-app').then((getBody) => { + getBody().find('app-todo').contains('Buy milk'); - getBody().find('app-todo').contains('Build something fun!'); + getBody().find('app-todo').contains('Build something fun!'); - getBody().find('app-todo').contains('Buy cookies'); + getBody().find('app-todo').contains('Buy cookies'); + }); }); - }); - cy.get('.tree-wrapper .tree-node:contains("app-todo[TooltipDirective]")').should('have.length', 3); + cy.get('.tree-wrapper .tree-node:contains("app-todo[TooltipDirective]")') + .should('have.length', 3); }); }); diff --git a/devtools/cypress/integration/node-search.e2e.js b/devtools/cypress/integration/node-search.e2e.js index 1fcdfdedfda..5ae1d590e74 100644 --- a/devtools/cypress/integration/node-search.e2e.js +++ b/devtools/cypress/integration/node-search.e2e.js @@ -3,7 +3,7 @@ function checkSearchedNodesLength(type, length) { } function inputSearchText(text) { - cy.get('.filter-input').type(text, { force: true }); + cy.get('.filter-input').type(text, {force: true}); } function checkComponentName(name) { @@ -75,9 +75,9 @@ describe('Search items in component tree', () => { const amountOfBreadcrumbButtons = 4; const amountOfScrollButtons = 2; cy.get('ng-breadcrumbs') - .find('button') - .its('length') - .should('eq', amountOfScrollButtons + amountOfBreadcrumbButtons); + .find('button') + .its('length') + .should('eq', amountOfScrollButtons + amountOfBreadcrumbButtons); // should display correct text in explorer panel checkComponentName('app-todos'); @@ -90,7 +90,7 @@ describe('Search items in component tree', () => { }); it('should focus search input when search icon is clicked', () => { - cy.get('.filter label .search-icon').click({ force: true }); + cy.get('.filter label .search-icon').click({force: true}); cy.get('.filter label input').should('have.focus'); }); }); diff --git a/devtools/cypress/integration/node-selection.e2e.js b/devtools/cypress/integration/node-selection.e2e.js index 6b7053fe3be..ff145df076f 100644 --- a/devtools/cypress/integration/node-selection.e2e.js +++ b/devtools/cypress/integration/node-selection.e2e.js @@ -9,7 +9,10 @@ describe('node selection', () => { it('should deselect node if it is no longer on the page', () => { cy.get('.tree-wrapper').get('.tree-node.selected').should('not.exist'); - cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').first().click({ force: true }); + cy.get('.tree-wrapper') + .find('.tree-node:contains("app-todo[TooltipDirective]")') + .first() + .click({force: true}); cy.get('.tree-wrapper').find('.tree-node.selected').its('length').should('eq', 1); @@ -27,7 +30,10 @@ describe('node selection', () => { getBody().find('input.new-todo').type('Buy cookies{enter}'); }); - cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').last().click({ force: true }); + cy.get('.tree-wrapper') + .find('.tree-node:contains("app-todo[TooltipDirective]")') + .last() + .click({force: true}); cy.enter('#sample-app').then((getBody) => { getBody().find('app-todo:contains("Buy milk")').find('.destroy').click(); @@ -37,94 +43,87 @@ describe('node selection', () => { }); it('should select nodes with same name', () => { - cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').first().click({ force: true }); + cy.get('.tree-wrapper') + .find('.tree-node:contains("app-todo[TooltipDirective]")') + .first() + .click({force: true}); - cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').last().click({ force: true }); + cy.get('.tree-wrapper') + .find('.tree-node:contains("app-todo[TooltipDirective]")') + .last() + .click({force: true}); cy.get('ng-property-view').last().find('mat-tree-node:contains("todo")').click(); cy.get('ng-property-view') - .last() - .find('mat-tree-node:contains("Build something fun!")') - .its('length') - .should('eq', 1); + .last() + .find('mat-tree-node:contains("Build something fun!")') + .its('length') + .should('eq', 1); }); }); describe('breadcrumb logic', () => { it('should overflow when breadcrumb list is long enough', () => { cy.get('.tree-wrapper') - .find('.tree-node:contains("div[TooltipDirective]")') - .last() - .click({ force: true }) - .then(() => { - cy.get('ng-breadcrumbs') - .find('.breadcrumbs') - .then((breadcrumbsContainer) => { - const hasOverflowX = () => breadcrumbsContainer[0].scrollWidth > breadcrumbsContainer[0].clientWidth; + .find('.tree-node:contains("div[TooltipDirective]")') + .last() + .click({force: true}) + .then(() => { + cy.get('ng-breadcrumbs').find('.breadcrumbs').then((breadcrumbsContainer) => { + const hasOverflowX = () => + breadcrumbsContainer[0].scrollWidth > breadcrumbsContainer[0].clientWidth; expect(hasOverflowX()).to.be.true; }); - }); + }); }); it('should scroll right when right scroll button is clicked', () => { cy.get('.tree-wrapper') - .find('.tree-node:contains("div[TooltipDirective]")') - .last() - .click({ force: true }) - .then(() => { - cy.get('ng-breadcrumbs') - .find('.breadcrumbs') - .then((el) => { - el[0].style.scrollBehavior = 'auto'; - }) - .then((breadcrumbsContainer) => { - const scrollLeft = () => breadcrumbsContainer[0].scrollLeft; - expect(scrollLeft()).to.eql(0); + .find('.tree-node:contains("div[TooltipDirective]")') + .last() + .click({force: true}) + .then(() => { + cy.get('ng-breadcrumbs') + .find('.breadcrumbs') + .then((el) => { + el[0].style.scrollBehavior = 'auto'; + }) + .then((breadcrumbsContainer) => { + const scrollLeft = () => breadcrumbsContainer[0].scrollLeft; + expect(scrollLeft()).to.eql(0); - cy.get('ng-breadcrumbs') - .find('.scroll-button') - .last() - .click() - .then(() => { - expect(scrollLeft()).to.be.greaterThan(0); + cy.get('ng-breadcrumbs').find('.scroll-button').last().click().then(() => { + expect(scrollLeft()).to.be.greaterThan(0); + }); }); - }); - }); + }); }); it('should scroll left when left scroll button is clicked', () => { cy.get('.tree-wrapper') - .find('.tree-node:contains("div[TooltipDirective]")') - .last() - .click({ force: true }) - .then(() => { - cy.get('ng-breadcrumbs') - .find('.breadcrumbs') - .then((el) => { - el[0].style.scrollBehavior = 'auto'; - }) - .then((breadcrumbsContainer) => { - const scrollLeft = () => breadcrumbsContainer[0].scrollLeft; - expect(scrollLeft()).to.eql(0); + .find('.tree-node:contains("div[TooltipDirective]")') + .last() + .click({force: true}) + .then(() => { + cy.get('ng-breadcrumbs') + .find('.breadcrumbs') + .then((el) => { + el[0].style.scrollBehavior = 'auto'; + }) + .then((breadcrumbsContainer) => { + const scrollLeft = () => breadcrumbsContainer[0].scrollLeft; + expect(scrollLeft()).to.eql(0); - cy.get('ng-breadcrumbs') - .find('.scroll-button') - .last() - .click() - .then(() => { - expect(scrollLeft()).to.be.greaterThan(0); + cy.get('ng-breadcrumbs').find('.scroll-button').last().click().then(() => { + expect(scrollLeft()).to.be.greaterThan(0); - cy.get('ng-breadcrumbs') - .find('.scroll-button') - .first() - .click() - .then(() => { + cy.get('ng-breadcrumbs').find('.scroll-button').first().click().then(() => { expect(scrollLeft()).to.eql(0); }); + }); }); - }); - }); + }); }); }); }); diff --git a/devtools/cypress/integration/property-edit.e2e.js b/devtools/cypress/integration/property-edit.e2e.js index 77924e15679..f755434523c 100644 --- a/devtools/cypress/integration/property-edit.e2e.js +++ b/devtools/cypress/integration/property-edit.e2e.js @@ -8,7 +8,10 @@ describe('edit properties of directive in the property view tab', () => { describe('edit app-todo component', () => { beforeEach(() => { // select todo node in component tree - cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').first().click({ force: true }); + cy.get('.tree-wrapper') + .find('.tree-node:contains("app-todo[TooltipDirective]")') + .first() + .click({force: true}); }); it('should be able to enable editMode', () => { @@ -17,13 +20,13 @@ describe('edit properties of directive in the property view tab', () => { }); cy.get('.explorer-panel:contains("app-todo")') - .find('ng-property-view mat-tree-node:contains("editMode")') - .find('ng-property-editor .editor') - .click({ force: true }) - .find('.editor-input') - .clear() - .type('true') - .type('{enter}'); + .find('ng-property-view mat-tree-node:contains("editMode")') + .find('ng-property-editor .editor') + .click({force: true}) + .find('.editor-input') + .clear() + .type('true') + .type('{enter}'); cy.enter('#sample-app').then((getBody) => { getBody().find('app-todo input.edit').should('be.visible'); @@ -33,7 +36,9 @@ describe('edit properties of directive in the property view tab', () => { describe('edit todo property', () => { beforeEach(() => { // expand todo state - cy.get('.explorer-panel:contains("app-todo")').find('ng-property-view mat-tree-node:contains("todo")').click(); + cy.get('.explorer-panel:contains("app-todo")') + .find('ng-property-view mat-tree-node:contains("todo")') + .click(); }); it('should change todo label in app when edited', () => { @@ -44,13 +49,13 @@ describe('edit properties of directive in the property view tab', () => { // find label variable and run through edit logic cy.get('.explorer-panel:contains("app-todo")') - .find('ng-property-view mat-tree-node:contains("label")') - .find('ng-property-editor .editor') - .click() - .find('.editor-input') - .clear() - .type('Buy cookies') - .type('{enter}'); + .find('ng-property-view mat-tree-node:contains("label")') + .find('ng-property-editor .editor') + .click() + .find('.editor-input') + .clear() + .type('Buy cookies') + .type('{enter}'); // assert that the page has been updated cy.enter('#sample-app').then((getBody) => { @@ -66,13 +71,13 @@ describe('edit properties of directive in the property view tab', () => { // find completed variable and run through edit logic cy.get('.explorer-panel:contains("app-todo")') - .find('ng-property-view mat-tree-node:contains("completed")') - .find('ng-property-editor .editor') - .click() - .find('.editor-input') - .clear() - .type('true') - .type('{enter}'); + .find('ng-property-view mat-tree-node:contains("completed")') + .find('ng-property-editor .editor') + .click() + .find('.editor-input') + .clear() + .type('true') + .type('{enter}'); // assert that the page has been updated cy.enter('#sample-app').then((getBody) => { diff --git a/devtools/cypress/integration/property-update.e2e.js b/devtools/cypress/integration/property-update.e2e.js index b7aef865a84..e541ec7e6d5 100644 --- a/devtools/cypress/integration/property-update.e2e.js +++ b/devtools/cypress/integration/property-update.e2e.js @@ -12,17 +12,21 @@ describe('change of the state should reflect in property update', () => { }); // Select the todo item - cy.get('.tree-wrapper').find('.tree-node:contains("app-todo[TooltipDirective]")').first().click({ force: true }); + cy.get('.tree-wrapper') + .find('.tree-node:contains("app-todo[TooltipDirective]")') + .first() + .click({force: true}); // Expand the todo in the property explorer - cy.get('.explorer-panel:contains("app-todo")').find('ng-property-view mat-tree-node:contains("todo")').click(); + cy.get('.explorer-panel:contains("app-todo")') + .find('ng-property-view mat-tree-node:contains("todo")') + .click(); // Verify its value is now completed cy.contains( - '.explorer-panel:contains("app-todo") ' + - 'ng-property-view mat-tree-node:contains("completed") ' + - 'ng-property-editor .editor', - 'true' - ); + '.explorer-panel:contains("app-todo") ' + + 'ng-property-view mat-tree-node:contains("completed") ' + + 'ng-property-editor .editor', + 'true'); }); }); diff --git a/devtools/cypress/integration/view-component-metadata.e2e.js b/devtools/cypress/integration/view-component-metadata.e2e.js index 1900060e426..41e49d87c1b 100644 --- a/devtools/cypress/integration/view-component-metadata.e2e.js +++ b/devtools/cypress/integration/view-component-metadata.e2e.js @@ -1,5 +1,5 @@ const prepareHeaderExpansionPanelForAssertions = (selector) => { - cy.get('.tree-wrapper').find(selector).first().click({ force: true }); + cy.get('.tree-wrapper').find(selector).first().click({force: true}); cy.get('.element-header .component-name').click(); }; @@ -9,34 +9,37 @@ describe('Viewing component metadata', () => { }); describe('viewing TodoComponent', () => { - beforeEach(() => prepareHeaderExpansionPanelForAssertions('.tree-node:contains("app-todo[TooltipDirective]")')); + beforeEach( + () => prepareHeaderExpansionPanelForAssertions( + '.tree-node:contains("app-todo[TooltipDirective]")')); - it('should display view encapsulation', () => { - cy.contains('.meta-data-container .mat-button:first', 'View Encapsulation: Emulated') - }); + it('should display view encapsulation', + () => { + cy.contains('.meta-data-container .mat-button:first', 'View Encapsulation: Emulated')}); - it('should display change detection strategy', () => { - cy.contains('.meta-data-container .mat-button:last', 'Change Detection Strategy: OnPush') - }); + it('should display change detection strategy', + () => {cy.contains( + '.meta-data-container .mat-button:last', 'Change Detection Strategy: OnPush')}); }); describe('viewing DemoAppComponent', () => { - beforeEach(() => prepareHeaderExpansionPanelForAssertions('.tree-node:contains("app-demo-component")')); + beforeEach( + () => + prepareHeaderExpansionPanelForAssertions('.tree-node:contains("app-demo-component")')); - it('should display view encapsulation', () => { - cy.contains('.meta-data-container .mat-button:first', 'View Encapsulation: None') - }); + it('should display view encapsulation', + () => {cy.contains('.meta-data-container .mat-button:first', 'View Encapsulation: None')}); - it('should display change detection strategy', () => { - cy.contains('.meta-data-container .mat-button:last', 'Change Detection Strategy: Default') - }); + it('should display change detection strategy', + () => {cy.contains( + '.meta-data-container .mat-button:last', 'Change Detection Strategy: Default')}); it('should display correct set of inputs', () => { cy.contains('.cy-inputs', '@Inputs'); cy.contains('.cy-inputs mat-tree-node:first span:first', 'inputOne'); cy.contains('.cy-inputs mat-tree-node:last span:first', 'inputTwo'); }); - + it('should display correct set of outputs', () => { cy.contains('.cy-outputs', '@Outputs'); cy.contains('.cy-outputs mat-tree-node:first span:first', 'outputOne'); diff --git a/devtools/e2e/protractor.conf.js b/devtools/e2e/protractor.conf.js index 5c23d8477d9..47977a5833c 100644 --- a/devtools/e2e/protractor.conf.js +++ b/devtools/e2e/protractor.conf.js @@ -2,7 +2,7 @@ // Protractor configuration file, see link for more information // https://github.com/angular/protractor/blob/master/lib/config.ts -const { SpecReporter } = require('jasmine-spec-reporter'); +const {SpecReporter} = require('jasmine-spec-reporter'); /** * @type { import("protractor").Config } @@ -25,6 +25,6 @@ exports.config = { require('ts-node').register({ project: require('path').join(__dirname, './tsconfig.json'), }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}})); }, }; diff --git a/devtools/e2e/src/app.e2e-spec.ts b/devtools/e2e/src/app.e2e-spec.ts index 04e5b97f99f..63426409d99 100644 --- a/devtools/e2e/src/app.e2e-spec.ts +++ b/devtools/e2e/src/app.e2e-spec.ts @@ -1,5 +1,6 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; +import {browser, logging} from 'protractor'; + +import {AppPage} from './app.po'; describe('workspace-project App', () => { let page: AppPage; @@ -15,14 +16,9 @@ describe('workspace-project App', () => { 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) - ); + const logs = await browser.manage().logs().get(logging.Type.BROWSER); + expect(logs).not.toContain(jasmine.objectContaining({ + level: logging.Level.SEVERE, + } as logging.Entry)); }); }); diff --git a/devtools/e2e/src/app.po.ts b/devtools/e2e/src/app.po.ts index 78a2dca4e96..414a15dfb5a 100644 --- a/devtools/e2e/src/app.po.ts +++ b/devtools/e2e/src/app.po.ts @@ -1,4 +1,4 @@ -import { browser, by, element } from 'protractor'; +import {browser, by, element} from 'protractor'; export class AppPage { navigateTo(): Promise { diff --git a/devtools/karma.conf.js b/devtools/karma.conf.js index e0813af37cf..9ee9e131749 100644 --- a/devtools/karma.conf.js +++ b/devtools/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -13,7 +13,7 @@ module.exports = function (config) { require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: false, // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, './coverage/angular-devtools'), diff --git a/devtools/package.json b/devtools/package.json index 2acccf7fe26..2c37f030b52 100644 --- a/devtools/package.json +++ b/devtools/package.json @@ -22,14 +22,7 @@ "start:ci": "bazelisk run src:devserver", "cy:ci": "start-server-and-test start:ci http-get://localhost:4200 cy:run", "test:ci": "bazelisk test //...", - "build:chrome:ci": "bazelisk build projects/shell-chrome/src:prodapp", - "prettier": "prettier --write \"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,tsx,json}\"", - "prettier:fix": "pretty-quick --staged" - }, - "husky": { - "hooks": { - "pre-commit": "yarn prettier:fix" - } + "build:chrome:ci": "bazelisk build projects/shell-chrome/src:prodapp" }, "private": true, "dependencies": { @@ -93,7 +86,6 @@ "document-register-element": "^1.7.2", "history-server": "^1.3.1", "html-insert-assets": "^0.14.2", - "husky": "^4.3.8", "jasmine-core": "~3.10.0", "jasmine-spec-reporter": "~7.0.0", "karma": "~4.1.0", @@ -105,8 +97,6 @@ "karma-sourcemap-loader": "0.3.7", "ng-packagr": "^12.0.0", "ngx-build-plus": "^11.0.0", - "prettier": "^2.0.0", - "pretty-quick": "^3.0.0", "protractor": "~7.0.0", "requirejs": "2.3.6", "rollup": "2.44.0", diff --git a/devtools/projects/demo-no-zone/e2e/protractor.conf.js b/devtools/projects/demo-no-zone/e2e/protractor.conf.js index 504db95d671..47977a5833c 100644 --- a/devtools/projects/demo-no-zone/e2e/protractor.conf.js +++ b/devtools/projects/demo-no-zone/e2e/protractor.conf.js @@ -2,7 +2,7 @@ // Protractor configuration file, see link for more information // https://github.com/angular/protractor/blob/master/lib/config.ts -const { SpecReporter } = require('jasmine-spec-reporter'); +const {SpecReporter} = require('jasmine-spec-reporter'); /** * @type { import("protractor").Config } @@ -19,12 +19,12 @@ exports.config = { jasmineNodeOpts: { showColors: true, defaultTimeoutInterval: 30000, - print: function () {}, + print: function() {}, }, onPrepare() { require('ts-node').register({ project: require('path').join(__dirname, './tsconfig.json'), }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}})); }, }; diff --git a/devtools/projects/demo-no-zone/e2e/src/app.e2e-spec.ts b/devtools/projects/demo-no-zone/e2e/src/app.e2e-spec.ts index 42fc5a6a52e..1756d379576 100644 --- a/devtools/projects/demo-no-zone/e2e/src/app.e2e-spec.ts +++ b/devtools/projects/demo-no-zone/e2e/src/app.e2e-spec.ts @@ -1,5 +1,6 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; +import {browser, logging} from 'protractor'; + +import {AppPage} from './app.po'; describe('workspace-project App', () => { let page: AppPage; @@ -16,10 +17,8 @@ describe('workspace-project App', () => { 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) - ); + expect(logs).not.toContain(jasmine.objectContaining({ + level: logging.Level.SEVERE, + } as logging.Entry)); }); }); diff --git a/devtools/projects/demo-no-zone/e2e/src/app.po.ts b/devtools/projects/demo-no-zone/e2e/src/app.po.ts index 6a185bf10bb..42c7f57e04f 100644 --- a/devtools/projects/demo-no-zone/e2e/src/app.po.ts +++ b/devtools/projects/demo-no-zone/e2e/src/app.po.ts @@ -1,4 +1,4 @@ -import { browser, by, element } from 'protractor'; +import {browser, by, element} from 'protractor'; export class AppPage { navigateTo(): Promise { diff --git a/devtools/projects/demo-no-zone/karma.conf.js b/devtools/projects/demo-no-zone/karma.conf.js index aaea4e49b4e..f1e23191f07 100644 --- a/devtools/projects/demo-no-zone/karma.conf.js +++ b/devtools/projects/demo-no-zone/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -13,7 +13,7 @@ module.exports = function (config) { require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: true, // leave Jasmine Spec Runner output visible in browser + clearContext: true, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage/demo-no-zone'), diff --git a/devtools/projects/demo-no-zone/src/app/app.component.ts b/devtools/projects/demo-no-zone/src/app/app.component.ts index 2c8e3b1c46b..eea4d1141a3 100644 --- a/devtools/projects/demo-no-zone/src/app/app.component.ts +++ b/devtools/projects/demo-no-zone/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, ChangeDetectorRef } from '@angular/core'; +import {ChangeDetectorRef, Component} from '@angular/core'; @Component({ selector: 'app-root', diff --git a/devtools/projects/demo-no-zone/src/app/app.module.ts b/devtools/projects/demo-no-zone/src/app/app.module.ts index 5ce7811a4c0..44f3352474f 100644 --- a/devtools/projects/demo-no-zone/src/app/app.module.ts +++ b/devtools/projects/demo-no-zone/src/app/app.module.ts @@ -1,7 +1,7 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; -import { AppComponent } from './app.component'; +import {AppComponent} from './app.component'; @NgModule({ declarations: [AppComponent], @@ -9,4 +9,5 @@ import { AppComponent } from './app.component'; providers: [], bootstrap: [AppComponent], }) -export class AppModule {} +export class AppModule { +} diff --git a/devtools/projects/demo-no-zone/src/main.ts b/devtools/projects/demo-no-zone/src/main.ts index e4546fb592b..3a015cc02fa 100644 --- a/devtools/projects/demo-no-zone/src/main.ts +++ b/devtools/projects/demo-no-zone/src/main.ts @@ -1,9 +1,9 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import {AppModule} from './app/app.module'; platformBrowserDynamic() - .bootstrapModule(AppModule, { - ngZone: 'noop', - }) - .catch((err) => console.error(err)); + .bootstrapModule(AppModule, { + ngZone: 'noop', + }) + .catch((err) => console.error(err)); diff --git a/devtools/projects/demo-no-zone/src/polyfills.ts b/devtools/projects/demo-no-zone/src/polyfills.ts index cc0bcbbe60c..08d84465f37 100644 --- a/devtools/projects/demo-no-zone/src/polyfills.ts +++ b/devtools/projects/demo-no-zone/src/polyfills.ts @@ -41,9 +41,10 @@ * * 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 + * (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 diff --git a/devtools/projects/demo-no-zone/src/rollup.config.js b/devtools/projects/demo-no-zone/src/rollup.config.js index 87158723b33..e97bbe39d53 100644 --- a/devtools/projects/demo-no-zone/src/rollup.config.js +++ b/devtools/projects/demo-no-zone/src/rollup.config.js @@ -1,4 +1,4 @@ -const { nodeResolve } = require('@rollup/plugin-node-resolve'); +const {nodeResolve} = require('@rollup/plugin-node-resolve'); const commonjs = require('@rollup/plugin-commonjs'); module.exports = { diff --git a/devtools/projects/demo-no-zone/src/test.ts b/devtools/projects/demo-no-zone/src/test.ts index da9049dc632..6689f8bd3ed 100644 --- a/devtools/projects/demo-no-zone/src/test.ts +++ b/devtools/projects/demo-no-zone/src/test.ts @@ -1,8 +1,9 @@ // 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'; + +import {getTestBed} from '@angular/core/testing'; +import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; declare const require: any; diff --git a/devtools/projects/ng-devtools-backend/karma.conf.js b/devtools/projects/ng-devtools-backend/karma.conf.js index b7bf2df0449..f26dbcfad88 100644 --- a/devtools/projects/ng-devtools-backend/karma.conf.js +++ b/devtools/projects/ng-devtools-backend/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -13,7 +13,7 @@ module.exports = function (config) { require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: true, // leave Jasmine Spec Runner output visible in browser + clearContext: true, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage/ng-devtools-backend'), diff --git a/devtools/projects/ng-devtools-backend/src/lib/angular-check.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/angular-check.spec.ts index 53f73d5b0c7..6dfa9400373 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/angular-check.spec.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/angular-check.spec.ts @@ -1,12 +1,7 @@ -import { - appIsAngularInDevMode, - appIsAngularIvy, - appIsAngular, - appIsSupportedAngularVersion, - getAngularVersion, -} from './angular-check'; +import {appIsAngular, appIsAngularInDevMode, appIsAngularIvy, appIsSupportedAngularVersion, getAngularVersion,} from './angular-check'; -const setNgVersion = (version = '12.0.0'): void => document.documentElement.setAttribute('ng-version', version); +const setNgVersion = (version = '12.0.0'): void => + document.documentElement.setAttribute('ng-version', version); const removeNgVersion = (): void => document.documentElement.removeAttribute('ng-version'); describe('angular-check', () => { @@ -54,7 +49,7 @@ describe('angular-check', () => { describe('appIsAngularIvy', () => { it('should not recognize VE apps', () => { (window as any).ng = { - probe(): void {}, + probe(): void{}, }; setNgVersion(); expect(appIsAngularIvy()).toBeFalse(); @@ -82,7 +77,7 @@ describe('angular-check', () => { it('should detect VE apps', () => { (window as any).ng = { - probe(): void {}, + probe(): void{}, }; setNgVersion(); @@ -91,7 +86,7 @@ describe('angular-check', () => { it('should detect Ivy apps', () => { (window as any).ng = { - getComponent(): void {}, + getComponent(): void{}, }; setNgVersion(); expect(appIsAngularInDevMode()).toBeTrue(); diff --git a/devtools/projects/ng-devtools-backend/src/lib/angular-check.ts b/devtools/projects/ng-devtools-backend/src/lib/angular-check.ts index a73c95dfd1b..051e31e9cbb 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/angular-check.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/angular-check.ts @@ -34,10 +34,11 @@ export const appIsSupportedAngularVersion = (): boolean => { * @returns if the app has global ng debug object */ const appHasGlobalNgDebugObject = (): boolean => { - return typeof ng === 'object' && (typeof ng.getComponent === 'function' || typeof ng.probe === 'function'); + return typeof ng === 'object' && + (typeof ng.getComponent === 'function' || typeof ng.probe === 'function'); }; -export const getAngularVersion = (): string | null => { +export const getAngularVersion = (): string|null => { const el = document.querySelector('[ng-version]'); if (!el) { return null; diff --git a/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts b/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts index 529e26ead76..f555d2ee71f 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts @@ -1,35 +1,22 @@ -import { - DirectivePosition, - ElementPosition, - Events, - MessageBus, - DevToolsNode, - DirectiveType, - ComponentType, - ProfilerFrame, - ComponentExplorerViewQuery, -} from 'protocol'; -import { ComponentTreeNode } from './interfaces'; -import { getLatestComponentState, queryDirectiveForest, updateState } from './component-tree'; -import { start as startProfiling, stop as stopProfiling } from './hooks/capture'; -import { serializeDirectiveState } from './state-serializer/state-serializer'; -import { ComponentInspector } from './component-inspector/component-inspector'; -import { setConsoleReference } from './set-console-reference'; -import { unHighlight } from './highlighter'; -import { - getAngularVersion, - appIsAngularInDevMode, - appIsSupportedAngularVersion, - appIsAngularIvy, -} from './angular-check'; -import { debounceTime } from 'rxjs/operators'; -import { disableTimingAPI, enableTimingAPI, initializeOrGetDirectiveForestHooks } from './hooks'; -import { runOutsideAngular } from './utils'; +import {ComponentExplorerViewQuery, ComponentType, DevToolsNode, DirectivePosition, DirectiveType, ElementPosition, Events, MessageBus, ProfilerFrame,} from 'protocol'; +import {debounceTime} from 'rxjs/operators'; + +import {appIsAngularInDevMode, appIsAngularIvy, appIsSupportedAngularVersion, getAngularVersion,} from './angular-check'; +import {ComponentInspector} from './component-inspector/component-inspector'; +import {getLatestComponentState, queryDirectiveForest, updateState} from './component-tree'; +import {unHighlight} from './highlighter'; +import {disableTimingAPI, enableTimingAPI, initializeOrGetDirectiveForestHooks} from './hooks'; +import {start as startProfiling, stop as stopProfiling} from './hooks/capture'; +import {ComponentTreeNode} from './interfaces'; +import {setConsoleReference} from './set-console-reference'; +import {serializeDirectiveState} from './state-serializer/state-serializer'; +import {runOutsideAngular} from './utils'; export const subscribeToClientEvents = (messageBus: MessageBus): void => { messageBus.on('shutdown', shutdownCallback(messageBus)); - messageBus.on('getLatestComponentExplorerView', getLatestComponentExplorerViewCallback(messageBus)); + messageBus.on( + 'getLatestComponentExplorerView', getLatestComponentExplorerViewCallback(messageBus)); messageBus.on('queryNgAvailability', checkForAngularCallback(messageBus)); @@ -54,8 +41,8 @@ export const subscribeToClientEvents = (messageBus: MessageBus): void => // once every 250ms runOutsideAngular(() => { initializeOrGetDirectiveForestHooks() - .profiler.changeDetection$.pipe(debounceTime(250)) - .subscribe(() => messageBus.emit('componentTreeDirty')); + .profiler.changeDetection$.pipe(debounceTime(250)) + .subscribe(() => messageBus.emit('componentTreeDirty')); }); } }; @@ -68,69 +55,73 @@ const shutdownCallback = (messageBus: MessageBus) => () => { messageBus.destroy(); }; -const getLatestComponentExplorerViewCallback = - (messageBus: MessageBus) => (query?: ComponentExplorerViewQuery) => { - // We want to force re-indexing of the component tree. - // Pressing the refresh button means the user saw stuck UI. +const getLatestComponentExplorerViewCallback = (messageBus: MessageBus) => + (query?: ComponentExplorerViewQuery) => { + // We want to force re-indexing of the component tree. + // Pressing the refresh button means the user saw stuck UI. - initializeOrGetDirectiveForestHooks().indexForest(); + initializeOrGetDirectiveForestHooks().indexForest(); - if (!query) { + if (!query) { + messageBus.emit('latestComponentExplorerView', [ + { + forest: prepareForestForSerialization( + initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest()), + }, + ]); + return; + } messageBus.emit('latestComponentExplorerView', [ { - forest: prepareForestForSerialization(initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest()), + forest: prepareForestForSerialization( + initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest()), + properties: getLatestComponentState( + query, initializeOrGetDirectiveForestHooks().getDirectiveForest()), }, ]); - return; - } - messageBus.emit('latestComponentExplorerView', [ - { - forest: prepareForestForSerialization(initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest()), - properties: getLatestComponentState(query, initializeOrGetDirectiveForestHooks().getDirectiveForest()), - }, - ]); - }; + }; -const checkForAngularCallback = (messageBus: MessageBus) => () => checkForAngular(messageBus); +const checkForAngularCallback = (messageBus: MessageBus) => () => + checkForAngular(messageBus); const getRoutesCallback = (messageBus: MessageBus) => () => getRoutes(messageBus); const startProfilingCallback = (messageBus: MessageBus) => () => - startProfiling((frame: ProfilerFrame) => { - messageBus.emit('sendProfilerChunk', [frame]); - }); + startProfiling((frame: ProfilerFrame) => { + messageBus.emit('sendProfilerChunk', [frame]); + }); const stopProfilingCallback = (messageBus: MessageBus) => () => { messageBus.emit('profilerResults', [stopProfiling()]); }; const selectedComponentCallback = (position: ElementPosition) => { - const node = queryDirectiveForest(position, initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest()); - setConsoleReference({ node, position }); + const node = queryDirectiveForest( + position, initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest()); + setConsoleReference({node, position}); }; -const getNestedPropertiesCallback = - (messageBus: MessageBus) => (position: DirectivePosition, propPath: string[]) => { - const emitEmpty = () => messageBus.emit('nestedProperties', [position, { props: {} }, propPath]); - const node = queryDirectiveForest( - position.element, - initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest() - ); - if (!node) { - return emitEmpty(); +const getNestedPropertiesCallback = (messageBus: MessageBus) => ( + position: DirectivePosition, propPath: string[]) => { + const emitEmpty = () => messageBus.emit('nestedProperties', [position, {props: {}}, propPath]); + const node = queryDirectiveForest( + position.element, initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest()); + if (!node) { + return emitEmpty(); + } + const current = + position.directive === undefined ? node.component : node.directives[position.directive]; + if (!current) { + return emitEmpty(); + } + let data = current.instance; + for (const prop of propPath) { + data = data[prop]; + if (!data) { + console.error('Cannot access the properties', propPath, 'of', node); } - const current = position.directive === undefined ? node.component : node.directives[position.directive]; - if (!current) { - return emitEmpty(); - } - let data = current.instance; - for (const prop of propPath) { - data = data[prop]; - if (!data) { - console.error('Cannot access the properties', propPath, 'of', node); - } - } - messageBus.emit('nestedProperties', [position, { props: serializeDirectiveState(data) }, propPath]); - }; + } + messageBus.emit('nestedProperties', [position, {props: serializeDirectiveState(data)}, propPath]); +}; // // Subscribe Helpers @@ -155,7 +146,7 @@ const checkForAngular = (messageBus: MessageBus): void => { } messageBus.emit('ngAvailability', [ - { version: ngVersion.toString(), devMode: appIsAngularInDevMode(), ivy: appIsIvy }, + {version: ngVersion.toString(), devMode: appIsAngularInDevMode(), ivy: appIsIvy}, ]); }; @@ -189,30 +180,31 @@ export interface SerializableComponentInstanceType extends ComponentType { id: number; } -export interface SerializableComponentTreeNode - extends DevToolsNode { +export interface SerializableComponentTreeNode extends + DevToolsNode { children: SerializableComponentTreeNode[]; } // Here we drop properties to prepare the tree for serialization. // We don't need the component instance, so we just traverse the tree // and leave the component name. -const prepareForestForSerialization = (roots: ComponentTreeNode[]): SerializableComponentTreeNode[] => { - return roots.map((node) => { - return { - element: node.element, - component: node.component - ? { +const prepareForestForSerialization = + (roots: ComponentTreeNode[]): SerializableComponentTreeNode[] => { + return roots.map((node) => { + return { + element: node.element, + component: node.component ? { name: node.component.name, isElement: node.component.isElement, id: initializeOrGetDirectiveForestHooks().getDirectiveId(node.component.instance), - } - : null, - directives: node.directives.map((d) => ({ - name: d.name, - id: initializeOrGetDirectiveForestHooks().getDirectiveId(d.instance), - })), - children: prepareForestForSerialization(node.children), - } as SerializableComponentTreeNode; - }); -}; + } : + null, + directives: node.directives.map( + (d) => ({ + name: d.name, + id: initializeOrGetDirectiveForestHooks().getDirectiveId(d.instance), + })), + children: prepareForestForSerialization(node.children), + } as SerializableComponentTreeNode; + }); + }; diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.spec.ts index 250c2e32178..fc039796753 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.spec.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.spec.ts @@ -1,4 +1,4 @@ -import { ComponentInspector } from './component-inspector'; +import {ComponentInspector} from './component-inspector'; describe('ComponentInspector', () => { it('should create instance from class', () => { diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts b/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts index 5876003a1b5..32c62f6f52b 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts @@ -1,11 +1,12 @@ -import { unHighlight, highlight, findComponentAndHost } from '../highlighter'; -import { findNodeInForest } from '../component-tree'; -import { ComponentTreeNode } from '../interfaces'; -import { ElementPosition } from 'protocol'; -import { initializeOrGetDirectiveForestHooks } from '../hooks'; +import {ElementPosition} from 'protocol'; + +import {findNodeInForest} from '../component-tree'; +import {findComponentAndHost, highlight, unHighlight} from '../highlighter'; +import {initializeOrGetDirectiveForestHooks} from '../hooks'; +import {ComponentTreeNode} from '../interfaces'; interface Type extends Function { - new (...args: any[]): T; + new(...args: any[]): T; } export interface ComponentInspectorOptions { onComponentEnter: (id: number) => void; @@ -14,18 +15,16 @@ export interface ComponentInspectorOptions { } export class ComponentInspector { - private _selectedComponent: { component: Type; host: HTMLElement | null }; + private _selectedComponent: {component: Type; host: HTMLElement | null}; private readonly _onComponentEnter; private readonly _onComponentSelect; private readonly _onComponentLeave; - constructor( - componentOptions: ComponentInspectorOptions = { - onComponentEnter: () => {}, - onComponentLeave: () => {}, - onComponentSelect: () => {}, - } - ) { + constructor(componentOptions: ComponentInspectorOptions = { + onComponentEnter: () => {}, + onComponentLeave: () => {}, + onComponentSelect: () => {}, + }) { this.bindMethods(); this._onComponentEnter = componentOptions.onComponentEnter; this._onComponentSelect = componentOptions.onComponentSelect; @@ -49,7 +48,8 @@ export class ComponentInspector { e.preventDefault(); if (this._selectedComponent.component && this._selectedComponent.host) { - this._onComponentSelect(initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)); + this._onComponentSelect( + initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)); } } @@ -64,7 +64,8 @@ export class ComponentInspector { unHighlight(); if (this._selectedComponent.component && this._selectedComponent.host) { highlight(this._selectedComponent.host); - this._onComponentEnter(initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)); + this._onComponentEnter( + initializeOrGetDirectiveForestHooks().getDirectiveId(this._selectedComponent.component)); } } @@ -84,7 +85,7 @@ export class ComponentInspector { highlightByPosition(position: ElementPosition): void { const forest: ComponentTreeNode[] = initializeOrGetDirectiveForestHooks().getDirectiveForest(); - const elementToHighlight: HTMLElement | null = findNodeInForest(position, forest); + const elementToHighlight: HTMLElement|null = findNodeInForest(position, forest); if (elementToHighlight) { highlight(elementToHighlight); } diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts index 1856b646731..9f16123f950 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/component-tree.ts @@ -1,14 +1,7 @@ -import { deeplySerializeSelectedProperties, serializeDirectiveState } from './state-serializer/state-serializer'; +import {ComponentExplorerViewQuery, DirectiveMetadata, DirectivesProperties, ElementPosition, PropertyQueryTypes, UpdatedStateData,} from 'protocol'; -import { - ComponentExplorerViewQuery, - DirectiveMetadata, - DirectivesProperties, - ElementPosition, - PropertyQueryTypes, - UpdatedStateData, -} from 'protocol'; -import { buildDirectiveTree, getLViewFromDirectiveOrElementInstance } from './directive-forest/index'; +import {buildDirectiveTree, getLViewFromDirectiveOrElementInstance} from './directive-forest/index'; +import {deeplySerializeSelectedProperties, serializeDirectiveState} from './state-serializer/state-serializer'; // Need to be kept in sync with Angular framework // We can't directly import it from framework now @@ -19,46 +12,46 @@ enum ChangeDetectionStrategy { Default = 1, } -import { ComponentTreeNode, DirectiveInstanceType, ComponentInstanceType } from './interfaces'; +import {ComponentTreeNode, DirectiveInstanceType, ComponentInstanceType} from './interfaces'; const ngDebug = () => (window as any).ng; -export const getLatestComponentState = ( - query: ComponentExplorerViewQuery, - directiveForest?: ComponentTreeNode[] -): DirectivesProperties | undefined => { - // if a directive forest is passed in we don't have to build the forest again. - directiveForest = directiveForest ?? buildDirectiveForest(); +export const getLatestComponentState = + (query: ComponentExplorerViewQuery, directiveForest?: ComponentTreeNode[]): + DirectivesProperties|undefined => { + // if a directive forest is passed in we don't have to build the forest again. + directiveForest = directiveForest ?? buildDirectiveForest(); - const node = queryDirectiveForest(query.selectedElement, directiveForest); - if (!node) { - return; - } + const node = queryDirectiveForest(query.selectedElement, directiveForest); + if (!node) { + return; + } - const result: DirectivesProperties = {}; + const result: DirectivesProperties = {}; - const populateResultSet = (dir: DirectiveInstanceType | ComponentInstanceType) => { - if (query.propertyQuery.type === PropertyQueryTypes.All) { - result[dir.name] = { - props: serializeDirectiveState(dir.instance), - metadata: getDirectiveMetadata(dir.instance), - }; - } - if (query.propertyQuery.type === PropertyQueryTypes.Specified) { - result[dir.name] = { - props: deeplySerializeSelectedProperties(dir.instance, query.propertyQuery.properties[dir.name] || []), - metadata: getDirectiveMetadata(dir.instance), - }; - } - }; + const populateResultSet = (dir: DirectiveInstanceType|ComponentInstanceType) => { + if (query.propertyQuery.type === PropertyQueryTypes.All) { + result[dir.name] = { + props: serializeDirectiveState(dir.instance), + metadata: getDirectiveMetadata(dir.instance), + }; + } + if (query.propertyQuery.type === PropertyQueryTypes.Specified) { + result[dir.name] = { + props: deeplySerializeSelectedProperties( + dir.instance, query.propertyQuery.properties[dir.name] || []), + metadata: getDirectiveMetadata(dir.instance), + }; + } + }; - node.directives.forEach(populateResultSet); - if (node.component) { - populateResultSet(node.component); - } + node.directives.forEach(populateResultSet); + if (node.component) { + populateResultSet(node.component); + } - return result; -}; + return result; + }; const enum DirectiveMetadataKey { INPUTS = 'inputs', @@ -121,7 +114,7 @@ const getRootLViewsHelper = (element: Element, rootLViews = new Set()): Set const getRoots = () => { const roots = Array.from(document.documentElement.querySelectorAll('[ng-version]')); const isTopLevel = (element: HTMLElement) => { - let parent: HTMLElement | null = element; + let parent: HTMLElement|null = element; while (parent?.parentElement) { parent = parent.parentElement; if (parent.hasAttribute('ng-version')) { @@ -140,39 +133,41 @@ export const buildDirectiveForest = (): ComponentTreeNode[] => { // Based on an ElementID we return a specific component node. // If we can't find any, we return null. -export const queryDirectiveForest = ( - position: ElementPosition, - forest: ComponentTreeNode[] -): ComponentTreeNode | null => { - if (!position.length) { - return null; - } - let node: null | ComponentTreeNode = null; - for (const i of position) { - node = forest[i]; - if (!node) { - return null; - } - forest = node.children; - } - return node; -}; +export const queryDirectiveForest = + (position: ElementPosition, forest: ComponentTreeNode[]): ComponentTreeNode|null => { + if (!position.length) { + return null; + } + let node: null|ComponentTreeNode = null; + for (const i of position) { + node = forest[i]; + if (!node) { + return null; + } + forest = node.children; + } + return node; + }; -export const findNodeInForest = (position: ElementPosition, forest: ComponentTreeNode[]): HTMLElement | null => { - const foundComponent: ComponentTreeNode | null = queryDirectiveForest(position, forest); - return foundComponent ? (foundComponent.nativeElement as HTMLElement) : null; -}; +export const findNodeInForest = + (position: ElementPosition, forest: ComponentTreeNode[]): HTMLElement|null => { + const foundComponent: ComponentTreeNode|null = queryDirectiveForest(position, forest); + return foundComponent ? (foundComponent.nativeElement as HTMLElement) : null; + }; -export const findNodeFromSerializedPosition = (serializedPosition: string): ComponentTreeNode | null => { - const position: number[] = serializedPosition.split(',').map((index) => parseInt(index, 10)); - return queryDirectiveForest(position, buildDirectiveForest()); -}; +export const findNodeFromSerializedPosition = + (serializedPosition: string): ComponentTreeNode|null => { + const position: number[] = serializedPosition.split(',').map((index) => parseInt(index, 10)); + return queryDirectiveForest(position, buildDirectiveForest()); + }; export const updateState = (updatedStateData: UpdatedStateData): void => { const ngd = ngDebug(); const node = queryDirectiveForest(updatedStateData.directiveId.element, buildDirectiveForest()); if (!node) { - console.warn('Could not update the state of component', updatedStateData, 'because the component was not found'); + console.warn( + 'Could not update the state of component', updatedStateData, + 'because the component was not found'); return; } if (updatedStateData.directiveId.directive !== undefined) { @@ -204,5 +199,6 @@ const mutateComponentOrDirective = (updatedStateData: UpdatedStateData, compOrDi // the line below could throw an error. try { parentObjectOfValueToUpdate[valueKey] = updatedStateData.newValue; - } catch {} + } catch { + } }; diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/index.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/index.ts index d6933373736..2a811fd1da8 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/index.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/index.ts @@ -1,12 +1,12 @@ -import { LTreeStrategy } from './ltree'; -import { RTreeStrategy } from './render-tree'; +import {LTreeStrategy} from './ltree'; +import {RTreeStrategy} from './render-tree'; -export { getLViewFromDirectiveOrElementInstance, getDirectiveHostElement, METADATA_PROPERTY_NAME } from './ltree'; +export {getDirectiveHostElement, getLViewFromDirectiveOrElementInstance, METADATA_PROPERTY_NAME} from './ltree'; // The order of the strategies matters. Lower indices have higher priority. const strategies = [new RTreeStrategy(), new LTreeStrategy()]; -let strategy: null | RTreeStrategy | LTreeStrategy = null; +let strategy: null|RTreeStrategy|LTreeStrategy = null; const selectStrategy = (element: Element) => { for (const s of strategies) { diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts index 8e95acf2094..d0e8b4c9919 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts @@ -1,8 +1,9 @@ -import { ComponentTreeNode, DirectiveInstanceType, ComponentInstanceType } from '../interfaces'; -import { isCustomElement } from '../utils'; -import { getDirectiveName } from '../highlighter'; -import { SemVerDSL } from 'semver-dsl'; -import { VERSION } from '../version'; +import {SemVerDSL} from 'semver-dsl'; + +import {getDirectiveName} from '../highlighter'; +import {ComponentInstanceType, ComponentTreeNode, DirectiveInstanceType} from '../interfaces'; +import {isCustomElement} from '../utils'; +import {VERSION} from '../version'; let HEADER_OFFSET = 19; @@ -28,7 +29,7 @@ const isLView = (value: any): boolean => { }; export const METADATA_PROPERTY_NAME = '__ngContext__'; -export const getLViewFromDirectiveOrElementInstance = (dir: any): null | {} => { +export const getLViewFromDirectiveOrElementInstance = (dir: any): null|{} => { if (!dir) { return null; } @@ -67,7 +68,7 @@ export class LTreeStrategy { private _getNode(lView: any, data: any, idx: number): ComponentTreeNode { const directives: DirectiveInstanceType[] = []; - let component: ComponentInstanceType | null = null; + let component: ComponentInstanceType|null = null; const tNode = data[idx]; const node = lView[idx][ELEMENT]; const element = (node.tagName || node.nodeName).toLowerCase(); diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts index 90191da352d..081ed7a634e 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts @@ -1,4 +1,4 @@ -import { RTreeStrategy } from './render-tree'; +import {RTreeStrategy} from './render-tree'; describe('render tree extraction', () => { let treeStrategy: RTreeStrategy; @@ -11,7 +11,7 @@ describe('render tree extraction', () => { componentMap = new Map(); (window as any).ng = { - getDirectiveMetadata(): void {}, + getDirectiveMetadata(): void{}, getComponent(element: Element): any { return componentMap.get(element); }, diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts index bb9a0a60d44..c6e12b1bc37 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts @@ -1,63 +1,60 @@ -import { ComponentTreeNode } from '../interfaces'; -import { isCustomElement } from '../utils'; +import {ComponentTreeNode} from '../interfaces'; +import {isCustomElement} from '../utils'; -const extractViewTree = ( - domNode: Node | Element, - result: ComponentTreeNode[], - getComponent: (element: Element) => {}, - getDirectives: (node: Node) => {}[] -): ComponentTreeNode[] => { - const directives = getDirectives(domNode); - if (!directives.length && !(domNode instanceof Element)) { - return result; - } - const componentTreeNode: ComponentTreeNode = { - children: [], - component: null, - directives: directives.map((dir) => { - return { - instance: dir, - name: dir.constructor.name, +const extractViewTree = + (domNode: Node|Element, result: ComponentTreeNode[], getComponent: (element: Element) => {}, + getDirectives: (node: Node) => {}[]): ComponentTreeNode[] => { + const directives = getDirectives(domNode); + if (!directives.length && !(domNode instanceof Element)) { + return result; + } + const componentTreeNode: ComponentTreeNode = { + children: [], + component: null, + directives: directives.map((dir) => { + return { + instance: dir, + name: dir.constructor.name, + }; + }), + element: domNode.nodeName.toLowerCase(), + nativeElement: domNode, }; - }), - element: domNode.nodeName.toLowerCase(), - nativeElement: domNode, - }; - if (!(domNode instanceof Element)) { - result.push(componentTreeNode); - return result; - } - const component = getComponent(domNode); - if (component) { - componentTreeNode.component = { - instance: component, - isElement: isCustomElement(domNode), - name: domNode.nodeName.toLowerCase(), + if (!(domNode instanceof Element)) { + result.push(componentTreeNode); + return result; + } + const component = getComponent(domNode); + if (component) { + componentTreeNode.component = { + instance: component, + isElement: isCustomElement(domNode), + name: domNode.nodeName.toLowerCase(), + }; + } + if (component || componentTreeNode.directives.length) { + result.push(componentTreeNode); + } + if (componentTreeNode.component || componentTreeNode.directives.length) { + domNode.childNodes.forEach( + (node) => + extractViewTree(node, componentTreeNode.children, getComponent, getDirectives)); + } else { + domNode.childNodes.forEach( + (node) => extractViewTree(node, result, getComponent, getDirectives)); + } + return result; }; - } - if (component || componentTreeNode.directives.length) { - result.push(componentTreeNode); - } - if (componentTreeNode.component || componentTreeNode.directives.length) { - domNode.childNodes.forEach((node) => - extractViewTree(node, componentTreeNode.children, getComponent, getDirectives) - ); - } else { - domNode.childNodes.forEach((node) => extractViewTree(node, result, getComponent, getDirectives)); - } - return result; -}; export class RTreeStrategy { supports(_: any): boolean { return ['getDirectiveMetadata', 'getComponent', 'getDirectives'].every( - (method) => typeof (window as any).ng[method] === 'function' - ); + (method) => typeof (window as any).ng[method] === 'function'); } build(element: Element): ComponentTreeNode[] { - // We want to start from the root element so that we can find components which are attached to the application ref - // and which host elements have been inserted with DOM APIs. + // We want to start from the root element so that we can find components which are attached to + // the application ref and which host elements have been inserted with DOM APIs. while (element.parentElement) { element = element.parentElement; } diff --git a/devtools/projects/ng-devtools-backend/src/lib/highlighter.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/highlighter.spec.ts index 17071615f2a..ecfaffe6b45 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/highlighter.spec.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/highlighter.spec.ts @@ -3,7 +3,7 @@ import * as highlighter from './highlighter'; describe('highlighter', () => { describe('findComponentAndHost', () => { it('should return undefined when no node is provided', () => { - expect(highlighter.findComponentAndHost(undefined)).toEqual({ component: null, host: null }); + expect(highlighter.findComponentAndHost(undefined)).toEqual({component: null, host: null}); }); it('should return same component and host if component exists', () => { diff --git a/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts b/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts index f1648106987..8028ac25e57 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts @@ -4,7 +4,7 @@ let overlayContent: HTMLElement; declare const ng: any; interface Type extends Function { - new (...args: any[]): T; + new(...args: any[]): T; } export const DEV_TOOLS_HIGHLIGHT_NODE_ID = '____ngDevToolsHighlight'; @@ -34,25 +34,26 @@ function init(): void { overlay.appendChild(overlayContent); } -export const findComponentAndHost = (el: Node | undefined): { component: any; host: HTMLElement | null } => { - if (!el) { - return { component: null, host: null }; - } - while (el) { - const component = el instanceof HTMLElement && ng.getComponent(el); - if (component) { - return { component, host: el as HTMLElement }; - } - if (!el.parentElement) { - break; - } - el = el.parentElement; - } - return { component: null, host: null }; -}; +export const findComponentAndHost = + (el: Node|undefined): {component: any; host: HTMLElement | null} => { + if (!el) { + return {component: null, host: null}; + } + while (el) { + const component = el instanceof HTMLElement && ng.getComponent(el); + if (component) { + return {component, host: el as HTMLElement}; + } + if (!el.parentElement) { + break; + } + el = el.parentElement; + } + return {component: null, host: null}; + }; // Todo(aleksanderbodurri): this should not be part of the highlighter, move this somewhere else -export const getDirectiveName = (dir: Type | undefined | null): string => { +export const getDirectiveName = (dir: Type|undefined|null): string => { if (dir) { return dir.constructor.name; } @@ -93,10 +94,11 @@ export function inDoc(node: any): boolean { } const doc = node.ownerDocument.documentElement; const parent = node.parentNode; - return doc === node || doc === parent || !!(parent && parent.nodeType === 1 && doc.contains(parent)); + return doc === node || doc === parent || + !!(parent && parent.nodeType === 1 && doc.contains(parent)); } -export function getComponentRect(el: Node): DOMRect | ClientRect | undefined { +export function getComponentRect(el: Node): DOMRect|ClientRect|undefined { if (!(el instanceof HTMLElement)) { return; } @@ -114,16 +116,15 @@ interface OverlayDimensionsAndPosition { } function showOverlay( - { width = 0, height = 0, top = 0, left = 0 }: OverlayDimensionsAndPosition, - content: any[] = [] -): void { + {width = 0, height = 0, top = 0, left = 0}: OverlayDimensionsAndPosition, + content: any[] = []): void { overlay.style.width = ~~width + 'px'; overlay.style.height = ~~height + 'px'; overlay.style.top = ~~top + 'px'; overlay.style.left = ~~left + 'px'; while (overlayContent.children.length) { - const { children } = overlayContent; + const {children} = overlayContent; overlayContent.removeChild(children[children.length - 1]); } diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts index 1d62e359793..5c7c0d708c1 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts @@ -1,10 +1,12 @@ -import { DirectiveForestHooks } from './hooks'; -import { ElementPosition, ProfilerFrame, ElementProfile, DirectiveProfile, LifecycleProfile } from 'protocol'; -import { runOutsideAngular, isCustomElement } from '../utils'; -import { getDirectiveName } from '../highlighter'; -import { ComponentTreeNode } from '../interfaces'; -import { initializeOrGetDirectiveForestHooks } from '.'; -import { Hooks } from './profiler'; +import {DirectiveProfile, ElementPosition, ElementProfile, LifecycleProfile, ProfilerFrame} from 'protocol'; + +import {getDirectiveName} from '../highlighter'; +import {ComponentTreeNode} from '../interfaces'; +import {isCustomElement, runOutsideAngular} from '../utils'; + +import {initializeOrGetDirectiveForestHooks} from '.'; +import {DirectiveForestHooks} from './hooks'; +import {Hooks} from './profiler'; let inProgress = false; let inChangeDetection = false; @@ -48,15 +50,17 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial => { return { // We flush here because it's possible the current node to overwrite // an existing removed node. - onCreate(directive: any, node: Node, _: number, isComponent: boolean, position: ElementPosition): void { - eventMap.set(directive, { - isElement: isCustomElement(node), - name: getDirectiveName(directive), - isComponent, - lifecycle: {}, - outputs: {}, - }); - }, + onCreate( + directive: any, node: Node, _: number, isComponent: boolean, position: ElementPosition): + void { + eventMap.set(directive, { + isElement: isCustomElement(node), + name: getDirectiveName(directive), + isComponent, + lifecycle: {}, + outputs: {}, + }); + }, onChangeDetectionStart(component: any, node: Node): void { startEvent(timeStartMap, component, 'changeDetection'); if (!inChangeDetection) { @@ -99,25 +103,22 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial => { console.warn('Could not find profile for', component); } }, - onDestroy(directive: any, node: Node, _: number, isComponent: boolean, __: ElementPosition): void { - // Make sure we reflect such directives in the report. - if (!eventMap.has(directive)) { - eventMap.set(directive, { - isElement: isComponent && isCustomElement(node), - name: getDirectiveName(directive), - isComponent, - lifecycle: {}, - outputs: {}, - }); - } - }, + onDestroy(directive: any, node: Node, _: number, isComponent: boolean, __: ElementPosition): + void { + // Make sure we reflect such directives in the report. + if (!eventMap.has(directive)) { + eventMap.set(directive, { + isElement: isComponent && isCustomElement(node), + name: getDirectiveName(directive), + isComponent, + lifecycle: {}, + outputs: {}, + }); + } + }, onLifecycleHookStart( - directive: any, - hookName: keyof LifecycleProfile, - node: Node, - __: number, - isComponent: boolean - ): void { + directive: any, hookName: keyof LifecycleProfile, node: Node, __: number, + isComponent: boolean): void { startEvent(timeStartMap, directive, hookName); if (!eventMap.has(directive)) { eventMap.set(directive, { @@ -129,7 +130,8 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial => { }); } }, - onLifecycleHookEnd(directive: any, hookName: keyof LifecycleProfile, _: Node, __: number, ___: boolean): void { + onLifecycleHookEnd( + directive: any, hookName: keyof LifecycleProfile, _: Node, __: number, ___: boolean): void { const dir = eventMap.get(directive); const startTimestamp = getEventStart(timeStartMap, directive, hookName); if (startTimestamp === undefined) { @@ -143,18 +145,19 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial => { dir.lifecycle[hookName] = (dir.lifecycle[hookName] || 0) + duration; frameDuration += duration; }, - onOutputStart(componentOrDirective: any, outputName: string, node: Node, isComponent: boolean): void { - startEvent(timeStartMap, componentOrDirective, outputName); - if (!eventMap.has(componentOrDirective)) { - eventMap.set(componentOrDirective, { - isElement: isCustomElement(node), - name: getDirectiveName(componentOrDirective), - isComponent, - lifecycle: {}, - outputs: {}, - }); - } - }, + onOutputStart(componentOrDirective: any, outputName: string, node: Node, isComponent: boolean): + void { + startEvent(timeStartMap, componentOrDirective, outputName); + if (!eventMap.has(componentOrDirective)) { + eventMap.set(componentOrDirective, { + isElement: isCustomElement(node), + name: getDirectiveName(componentOrDirective), + isComponent, + lifecycle: {}, + outputs: {}, + }); + } + }, onOutputEnd(componentOrDirective: any, outputName: string): void { const name = outputName; const entry = eventMap.get(componentOrDirective); @@ -163,7 +166,9 @@ const getHooks = (onFrame: (frame: ProfilerFrame) => void): Partial => { return; } if (!entry) { - console.warn('Could not find directive or component in onOutputEnd callback', componentOrDirective, outputName); + console.warn( + 'Could not find directive or component in onOutputEnd callback', componentOrDirective, + outputName); return; } const duration = performance.now() - startTimestamp; @@ -202,32 +207,33 @@ const insertOrMerge = (lastFrame: ElementProfile, profile: DirectiveProfile) => } }; -const insertElementProfile = (frames: ElementProfile[], position: ElementPosition, profile?: DirectiveProfile) => { - if (!profile) { - return; - } - const original = frames; - for (let i = 0; i < position.length - 1; i++) { - const pos = position[i]; - if (!frames[pos]) { - // TODO(mgechev): consider how to ensure we don't hit this case - console.warn('Unable to find parent node for', profile, original); - return; - } - frames = frames[pos].children; - } - const lastIdx = position[position.length - 1]; - let lastFrame: ElementProfile = { - children: [], - directives: [], - }; - if (frames[lastIdx]) { - lastFrame = frames[lastIdx]; - } else { - frames[lastIdx] = lastFrame; - } - insertOrMerge(lastFrame, profile); -}; +const insertElementProfile = + (frames: ElementProfile[], position: ElementPosition, profile?: DirectiveProfile) => { + if (!profile) { + return; + } + const original = frames; + for (let i = 0; i < position.length - 1; i++) { + const pos = position[i]; + if (!frames[pos]) { + // TODO(mgechev): consider how to ensure we don't hit this case + console.warn('Unable to find parent node for', profile, original); + return; + } + frames = frames[pos].children; + } + const lastIdx = position[position.length - 1]; + let lastFrame: ElementProfile = { + children: [], + directives: [], + }; + if (frames[lastIdx]) { + lastFrame = frames[lastIdx]; + } else { + frames[lastIdx] = lastFrame; + } + insertOrMerge(lastFrame, profile); + }; const prepareInitialFrame = (source: string, duration: number) => { const frame: ProfilerFrame = { @@ -238,7 +244,7 @@ const prepareInitialFrame = (source: string, duration: number) => { const directiveForestHooks = initializeOrGetDirectiveForestHooks(); const directiveForest = directiveForestHooks.getIndexedDirectiveForest(); const traverse = (node: ComponentTreeNode, children = frame.directives) => { - let position: ElementPosition | undefined; + let position: ElementPosition|undefined; if (node.component) { position = directiveForestHooks.getDirectivePosition(node.component.instance); } else { diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/hooks.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/hooks.ts index fc1ef378968..7fbdf9d2c3a 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/hooks/hooks.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/hooks.ts @@ -1,7 +1,9 @@ -import { ComponentTreeNode } from '../interfaces'; -import { ElementPosition } from 'protocol'; -import { IdentityTracker, IndexedNode } from './identity-tracker'; -import { Profiler, selectProfilerStrategy } from './profiler'; +import {ElementPosition} from 'protocol'; + +import {ComponentTreeNode} from '../interfaces'; + +import {IdentityTracker, IndexedNode} from './identity-tracker'; +import {Profiler, selectProfilerStrategy} from './profiler'; /** * Class to hook into directive forest. @@ -18,7 +20,7 @@ export class DirectiveForestHooks { profiler: Profiler = selectProfilerStrategy(); - getDirectivePosition(dir: any): ElementPosition | undefined { + getDirectivePosition(dir: any): ElementPosition|undefined { const result = this._tracker.getDirectivePosition(dir); if (result === undefined) { console.warn('Unable to find position of', dir); @@ -26,7 +28,7 @@ export class DirectiveForestHooks { return result; } - getDirectiveId(dir: any): number | undefined { + getDirectiveId(dir: any): number|undefined { const result = this._tracker.getDirectiveId(dir); if (result === undefined) { console.warn('Unable to find ID of', result); @@ -47,7 +49,7 @@ export class DirectiveForestHooks { } indexForest(): void { - const { newNodes, removedNodes, indexedForest, directiveForest } = this._tracker.index(); + const {newNodes, removedNodes, indexedForest, directiveForest} = this._tracker.index(); this._indexedForest = indexedForest; this._forest = directiveForest; this.profiler.onIndexForest(newNodes, removedNodes); diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts index 08a13a0637e..89bb0f36304 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts @@ -1,9 +1,10 @@ -import { ComponentTreeNode, DirectiveInstanceType, ComponentInstanceType } from '../interfaces'; -import { ElementPosition, DevToolsNode } from 'protocol'; -import { buildDirectiveForest } from '../component-tree'; +import {DevToolsNode, ElementPosition} from 'protocol'; + +import {buildDirectiveForest} from '../component-tree'; +import {ComponentInstanceType, ComponentTreeNode, DirectiveInstanceType} from '../interfaces'; export declare interface Type extends Function { - new (...args: any[]): T; + new(...args: any[]): T; } interface TreeNode { @@ -13,8 +14,7 @@ interface TreeNode { } export type NodeArray = { - directive: any; - isComponent: boolean; + directive: any; isComponent: boolean; }[]; export class IdentityTracker { @@ -35,11 +35,11 @@ export class IdentityTracker { return IdentityTracker._instance; } - getDirectivePosition(dir: any): ElementPosition | undefined { + getDirectivePosition(dir: any): ElementPosition|undefined { return this._currentDirectivePosition.get(dir); } - getDirectiveId(dir: any): number | undefined { + getDirectiveId(dir: any): number|undefined { return this._currentDirectiveId.get(dir); } @@ -48,9 +48,7 @@ export class IdentityTracker { } index(): { - newNodes: NodeArray; - removedNodes: NodeArray; - indexedForest: IndexedNode[]; + newNodes: NodeArray; removedNodes: NodeArray; indexedForest: IndexedNode[]; directiveForest: ComponentTreeNode[]; } { const directiveForest = buildDirectiveForest(); @@ -61,22 +59,19 @@ export class IdentityTracker { indexedForest.forEach((root) => this._index(root, null, newNodes, allNodes)); this._currentDirectiveId.forEach((_: number, dir: any) => { if (!allNodes.has(dir)) { - removedNodes.push({ directive: dir, isComponent: !!this.isComponent.get(dir) }); + removedNodes.push({directive: dir, isComponent: !!this.isComponent.get(dir)}); // We can't clean these up because during profiling // they might be requested for removed components // this._currentDirectiveId.delete(dir); // this._currentDirectivePosition.delete(dir); } }); - return { newNodes, removedNodes, indexedForest, directiveForest }; + return {newNodes, removedNodes, indexedForest, directiveForest}; } private _index( - node: IndexedNode, - parent: TreeNode | null, - newNodes: { directive: any; isComponent: boolean }[], - allNodes: Set - ): void { + node: IndexedNode, parent: TreeNode|null, newNodes: {directive: any; isComponent: boolean}[], + allNodes: Set): void { if (node.component) { allNodes.add(node.component.instance); this.isComponent.set(node.component.instance, true); @@ -93,7 +88,7 @@ export class IdentityTracker { private _indexNode(directive: any, position: ElementPosition, newNodes: NodeArray): void { this._currentDirectivePosition.set(directive, position); if (!this._currentDirectiveId.has(directive)) { - newNodes.push({ directive, isComponent: !!this.isComponent.get(directive) }); + newNodes.push({directive, isComponent: !!this.isComponent.get(directive)}); this._currentDirectiveId.set(directive, this._directiveIdCounter++); } } @@ -110,21 +105,17 @@ export interface IndexedNode extends DevToolsNode>( - node: T, - idx: number, - parentPosition: number[] = [] -): IndexedNode => { + node: T, idx: number, parentPosition: number[] = []): IndexedNode => { const position = parentPosition.concat([idx]); return { position, element: node.element, component: node.component, - directives: node.directives.map((d) => ({ position, ...d })), + directives: node.directives.map((d) => ({position, ...d})), children: node.children.map((n, i) => indexTree(n, i, position)), nativeElement: node.nativeElement, } as IndexedNode; }; export const indexForest = >( - forest: T[] -): IndexedNode[] => forest.map((n, i) => indexTree(n, i)); + forest: T[]): IndexedNode[] => forest.map((n, i) => indexTree(n, i)); diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts index eeabdb2135a..5b1aa6483aa 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/index.ts @@ -1,12 +1,15 @@ -import { getDirectiveName } from '../highlighter'; -import { DirectiveForestHooks } from './hooks'; -import { LifecycleProfile } from 'protocol'; +import {LifecycleProfile} from 'protocol'; + +import {getDirectiveName} from '../highlighter'; + +import {DirectiveForestHooks} from './hooks'; const markName = (s: string, method: Method) => `🅰️ ${s}#${method}`; -const supportsPerformance = globalThis.performance && typeof globalThis.performance.getEntriesByName === 'function'; +const supportsPerformance = + globalThis.performance && typeof globalThis.performance.getEntriesByName === 'function'; -type Method = keyof LifecycleProfile | 'changeDetection' | string; +type Method = keyof LifecycleProfile|'changeDetection'|string; const recordMark = (s: string, method: Method) => { if (supportsPerformance) { diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/index.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/index.ts index 7ec522570b8..d56b8d02f29 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/index.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/index.ts @@ -1,8 +1,8 @@ -import { NgProfiler } from './native'; -import { PatchingProfiler } from './polyfill'; -import { Profiler } from './shared'; +import {NgProfiler} from './native'; +import {PatchingProfiler} from './polyfill'; +import {Profiler} from './shared'; -export { Profiler, Hooks } from './shared'; +export {Hooks, Profiler} from './shared'; /** * Factory method for creating profiler object. diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts index d86a0fcc8f1..7512c2ab8f1 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts @@ -1,8 +1,10 @@ -import { ɵProfilerEvent } from '@angular/core'; -import { getDirectiveHostElement } from '../../directive-forest'; -import { runOutsideAngular } from '../../utils'; -import { IdentityTracker, NodeArray } from '../identity-tracker'; -import { getLifeCycleName, Hooks, Profiler } from './shared'; +import {ɵProfilerEvent} from '@angular/core'; + +import {getDirectiveHostElement} from '../../directive-forest'; +import {runOutsideAngular} from '../../utils'; +import {IdentityTracker, NodeArray} from '../identity-tracker'; + +import {getLifeCycleName, Hooks, Profiler} from './shared'; type ProfilerCallback = (event: ɵProfilerEvent, instanceOrLView: {}, hookOrListener: any) => void; @@ -10,7 +12,7 @@ type ProfilerCallback = (event: ɵProfilerEvent, instanceOrLView: {}, hookOrList export class NgProfiler extends Profiler { private _tracker = IdentityTracker.getInstance(); private _callbacks: ProfilerCallback[] = []; - private _lastDirectiveInstance: {} | null = null; + private _lastDirectiveInstance: {}|null = null; constructor(config: Partial = {}) { super(config); @@ -26,9 +28,9 @@ export class NgProfiler extends Profiler { private _initialize(): void { const ng = (window as any).ng; - ng.ɵsetProfiler((event: ɵProfilerEvent, instanceOrLView: {}, hookOrListener: any) => - this._callbacks.forEach((cb) => cb(event, instanceOrLView, hookOrListener)) - ); + ng.ɵsetProfiler( + (event: ɵProfilerEvent, instanceOrLView: {}, hookOrListener: any) => + this._callbacks.forEach((cb) => cb(event, instanceOrLView, hookOrListener))); } private _setProfilerCallback(callback: ProfilerCallback): void { @@ -41,7 +43,7 @@ export class NgProfiler extends Profiler { onIndexForest(newNodes: NodeArray, removedNodes: NodeArray): void { newNodes.forEach((node) => { - const { directive, isComponent } = node; + const {directive, isComponent} = node; const position = this._tracker.getDirectivePosition(directive); const id = this._tracker.getDirectiveId(directive); @@ -49,7 +51,7 @@ export class NgProfiler extends Profiler { }); removedNodes.forEach((node) => { - const { directive, isComponent } = node; + const {directive, isComponent} = node; const position = this._tracker.getDirectivePosition(directive); const id = this._tracker.getDirectiveId(directive); @@ -94,11 +96,9 @@ export class NgProfiler extends Profiler { } this._onChangeDetectionStart( - this._lastDirectiveInstance, - getDirectiveHostElement(this._lastDirectiveInstance), - this._tracker.getDirectiveId(this._lastDirectiveInstance), - this._tracker.getDirectivePosition(this._lastDirectiveInstance) - ); + this._lastDirectiveInstance, getDirectiveHostElement(this._lastDirectiveInstance), + this._tracker.getDirectiveId(this._lastDirectiveInstance), + this._tracker.getDirectivePosition(this._lastDirectiveInstance)); } [ɵProfilerEvent.TemplateUpdateEnd](context: any, _hookOrListener: any): void { @@ -111,11 +111,9 @@ export class NgProfiler extends Profiler { } this._onChangeDetectionEnd( - this._lastDirectiveInstance, - getDirectiveHostElement(this._lastDirectiveInstance), - this._tracker.getDirectiveId(this._lastDirectiveInstance), - this._tracker.getDirectivePosition(this._lastDirectiveInstance) - ); + this._lastDirectiveInstance, getDirectiveHostElement(this._lastDirectiveInstance), + this._tracker.getDirectiveId(this._lastDirectiveInstance), + this._tracker.getDirectivePosition(this._lastDirectiveInstance)); } [ɵProfilerEvent.LifecycleHookStart](directive: any, hook: any): void { diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts index 2edd013f861..15a3571bbac 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts @@ -1,11 +1,8 @@ -import { - getDirectiveHostElement, - getLViewFromDirectiveOrElementInstance, - METADATA_PROPERTY_NAME, -} from '../../directive-forest'; -import { runOutsideAngular } from '../../utils'; -import { IdentityTracker, NodeArray } from '../identity-tracker'; -import { getLifeCycleName, Profiler } from './shared'; +import {getDirectiveHostElement, getLViewFromDirectiveOrElementInstance, METADATA_PROPERTY_NAME,} from '../../directive-forest'; +import {runOutsideAngular} from '../../utils'; +import {IdentityTracker, NodeArray} from '../identity-tracker'; + +import {getLifeCycleName, Profiler} from './shared'; const hookTViewProperties = [ 'preOrderHooks', @@ -20,7 +17,10 @@ const hookTViewProperties = [ // Only used in older Angular versions prior to the introduction of `getDirectiveMetadata` const componentMetadata = (instance: any) => instance?.constructor?.ɵcmp; -/** Implementation of Profiler that uses monkey patching of directive templates and lifecycle methods to fire profiler hooks. */ +/** + * Implementation of Profiler that uses monkey patching of directive templates and lifecycle + * methods to fire profiler hooks. + */ export class PatchingProfiler extends Profiler { private _patched = new Map void>(); private _undoLifecyclePatch: (() => void)[] = []; @@ -74,7 +74,7 @@ export class PatchingProfiler extends Profiler { if (original.patched) { return; } - declarations.tView.template = function (_: any, component: any): void { + declarations.tView.template = function(_: any, component: any): void { if (!self._inChangeDetection) { self._inChangeDetection = true; runOutsideAngular(() => { @@ -114,7 +114,7 @@ export class PatchingProfiler extends Profiler { } if (typeof el === 'function') { const self = this; - current[idx] = function (): any { + current[idx] = function(): any { // We currently don't want to notify the consumer // for execution of lifecycle hooks of services and pipes. // These two abstractions don't have `__ngContext__`, and diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts index 42930709225..af2c08a3e05 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/shared.ts @@ -1,45 +1,34 @@ -import { ElementPosition, LifecycleProfile } from 'protocol'; -import { Subject } from 'rxjs'; -import { NodeArray } from '../identity-tracker'; +import {ElementPosition, LifecycleProfile} from 'protocol'; +import {Subject} from 'rxjs'; -type CreationHook = ( - componentOrDirective: any, - node: Node, - id: number, - isComponent: boolean, - position: ElementPosition -) => void; +import {NodeArray} from '../identity-tracker'; -type LifecycleStartHook = ( - componentOrDirective: any, - hook: keyof LifecycleProfile | 'unknown', - node: Node, - id: number, - isComponent: boolean -) => void; +type CreationHook = + (componentOrDirective: any, node: Node, id: number, isComponent: boolean, + position: ElementPosition) => void; -type LifecycleEndHook = ( - componentOrDirective: any, - hook: keyof LifecycleProfile | 'unknown', - node: Node, - id: number, - isComponent: boolean -) => void; +type LifecycleStartHook = + (componentOrDirective: any, hook: keyof LifecycleProfile|'unknown', node: Node, id: number, + isComponent: boolean) => void; -type ChangeDetectionStartHook = (component: any, node: Node, id: number, position: ElementPosition) => void; +type LifecycleEndHook = + (componentOrDirective: any, hook: keyof LifecycleProfile|'unknown', node: Node, id: number, + isComponent: boolean) => void; -type ChangeDetectionEndHook = (component: any, node: Node, id: number, position: ElementPosition) => void; +type ChangeDetectionStartHook = + (component: any, node: Node, id: number, position: ElementPosition) => void; -type DestroyHook = ( - componentOrDirective: any, - node: Node, - id: number, - isComponent: boolean, - position: ElementPosition -) => void; +type ChangeDetectionEndHook = (component: any, node: Node, id: number, position: ElementPosition) => + void; -type OutputStartHook = (componentOrDirective: any, outputName: string, node: Node, isComponent: boolean) => void; -type OutputEndHook = (componentOrDirective: any, outputName: string, node: Node, isComponent: boolean) => void; +type DestroyHook = + (componentOrDirective: any, node: Node, id: number, isComponent: boolean, + position: ElementPosition) => void; + +type OutputStartHook = + (componentOrDirective: any, outputName: string, node: Node, isComponent: boolean) => void; +type OutputEndHook = + (componentOrDirective: any, outputName: string, node: Node, isComponent: boolean) => void; export interface Hooks { onCreate: CreationHook; @@ -53,7 +42,8 @@ export interface Hooks { } /** - * Class for profiling angular applications. Handles hook subscriptions and emitting change detection events. + * Class for profiling angular applications. Handles hook subscriptions and emitting change + * detection events. */ export abstract class Profiler { protected _inChangeDetection = false; @@ -78,12 +68,8 @@ export abstract class Profiler { } protected _onCreate( - _: any, - __: Node, - id: number | undefined, - ___: boolean, - position: ElementPosition | undefined - ): void { + _: any, __: Node, id: number|undefined, ___: boolean, + position: ElementPosition|undefined): void { if (id === undefined || position === undefined) { return; } @@ -91,12 +77,8 @@ export abstract class Profiler { } protected _onDestroy( - _: any, - __: Node, - id: number | undefined, - ___: boolean, - position: ElementPosition | undefined - ): void { + _: any, __: Node, id: number|undefined, ___: boolean, + position: ElementPosition|undefined): void { if (id === undefined || position === undefined) { return; } @@ -104,11 +86,7 @@ export abstract class Profiler { } protected _onChangeDetectionStart( - _: any, - __: Node, - id: number | undefined, - position: ElementPosition | undefined - ): void { + _: any, __: Node, id: number|undefined, position: ElementPosition|undefined): void { if (id === undefined || position === undefined) { return; } @@ -116,11 +94,7 @@ export abstract class Profiler { } protected _onChangeDetectionEnd( - _: any, - __: Node, - id: number | undefined, - position: ElementPosition | undefined - ): void { + _: any, __: Node, id: number|undefined, position: ElementPosition|undefined): void { if (id === undefined || position === undefined) { return; } @@ -128,12 +102,8 @@ export abstract class Profiler { } protected _onLifecycleHookStart( - _: any, - __: keyof LifecycleProfile | 'unknown', - ___: Node, - id: number | undefined, - ____: boolean - ): void { + _: any, __: keyof LifecycleProfile|'unknown', ___: Node, id: number|undefined, + ____: boolean): void { if (id === undefined) { return; } @@ -141,26 +111,23 @@ export abstract class Profiler { } protected _onLifecycleHookEnd( - _: any, - __: keyof LifecycleProfile | 'unknown', - ___: Node, - id: number | undefined, - ____: boolean - ): void { + _: any, __: keyof LifecycleProfile|'unknown', ___: Node, id: number|undefined, + ____: boolean): void { if (id === undefined) { return; } this._invokeCallback('onLifecycleHookEnd', arguments); } - protected _onOutputStart(_: any, __: string, ___: Node, id: number | undefined, ____: boolean): void { + protected _onOutputStart(_: any, __: string, ___: Node, id: number|undefined, ____: boolean): + void { if (id === undefined) { return; } this._invokeCallback('onOutputStart', arguments); } - protected _onOutputEnd(_: any, __: string, ___: Node, id: number | undefined, ____: boolean): void { + protected _onOutputEnd(_: any, __: string, ___: Node, id: number|undefined, ____: boolean): void { if (id === undefined) { return; } @@ -190,7 +157,7 @@ const hookNames = [ const hookMethodNames = new Set(hookNames.map((hook) => `ng${hook}`)); -export const getLifeCycleName = (obj: {}, fn: any): keyof LifecycleProfile | 'unknown' => { +export const getLifeCycleName = (obj: {}, fn: any): keyof LifecycleProfile|'unknown' => { const proto = Object.getPrototypeOf(obj); const keys = Object.getOwnPropertyNames(proto); for (const propName of keys) { diff --git a/devtools/projects/ng-devtools-backend/src/lib/index.ts b/devtools/projects/ng-devtools-backend/src/lib/index.ts index 840dc9dd383..4a741c3c390 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/index.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/index.ts @@ -1,5 +1,6 @@ -import { MessageBus, Events } from 'protocol'; -import { subscribeToClientEvents } from './client-event-subscribers'; +import {Events, MessageBus} from 'protocol'; + +import {subscribeToClientEvents} from './client-event-subscribers'; export const initializeMessageBus = (messageBus: MessageBus) => { subscribeToClientEvents(messageBus); diff --git a/devtools/projects/ng-devtools-backend/src/lib/interfaces.ts b/devtools/projects/ng-devtools-backend/src/lib/interfaces.ts index d3063f23dad..943def56a18 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/interfaces.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/interfaces.ts @@ -1,4 +1,4 @@ -import { DevToolsNode } from 'protocol'; +import {DevToolsNode} from 'protocol'; export interface DebuggingAPI { getComponent(node: Node): any; @@ -16,6 +16,7 @@ export interface ComponentInstanceType { isElement: boolean; } -export interface ComponentTreeNode extends DevToolsNode { +export interface ComponentTreeNode extends + DevToolsNode { children: ComponentTreeNode[]; } diff --git a/devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts index fd0137feb8c..dd5b4712ed0 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts @@ -1,4 +1,4 @@ -import { parseRoutes } from './router-tree'; +import {parseRoutes} from './router-tree'; describe('parseRoutes', () => { it('should work without any routes', () => { @@ -104,7 +104,7 @@ describe('parseRoutes', () => { }, { handler: 'component-two', - data: [Object({ key: 'name', value: 'component-two' })], + data: [Object({key: 'name', value: 'component-two'})], hash: null, specificity: null, name: 'component-two', diff --git a/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts index 4cbcb7a497a..a89b0706ef6 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts @@ -1,4 +1,4 @@ -import { Route } from 'protocol'; +import {Route} from 'protocol'; // todo(aleksanderbodurri): type these properly type AngularRoute = any; @@ -23,7 +23,7 @@ export function parseRoutes(router: Router): Route { return root; } -function assignChildrenToParent(parentPath: string | null, children: Routes): Route[] { +function assignChildrenToParent(parentPath: string|null, children: Routes): Route[] { return children.map((child: AngularRoute) => { const childName = childRouteName(child); const childDescendents: [any] = (child as any)._loadedConfig?.routes || child.children; diff --git a/devtools/projects/ng-devtools-backend/src/lib/set-console-reference.ts b/devtools/projects/ng-devtools-backend/src/lib/set-console-reference.ts index e21438b919e..190129ad8c9 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/set-console-reference.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/set-console-reference.ts @@ -1,9 +1,10 @@ -import { arrayEquals } from 'shared-utils'; -import { ElementPosition } from 'protocol'; -import { ComponentTreeNode } from './interfaces'; +import {ElementPosition} from 'protocol'; +import {arrayEquals} from 'shared-utils'; + +import {ComponentTreeNode} from './interfaces'; interface ConsoleReferenceNode { - node: ComponentTreeNode | null; + node: ComponentTreeNode|null; position: ElementPosition; } @@ -26,9 +27,8 @@ const _setConsoleReference = (referenceNode: ConsoleReferenceNode) => { }; const prepareCurrentReferencesForInsertion = (referenceNode: ConsoleReferenceNode) => { - const foundIndex = nodesForConsoleReference.findIndex((nodeToLookFor) => - arrayEquals(nodeToLookFor.position, referenceNode.position) - ); + const foundIndex = nodesForConsoleReference.findIndex( + (nodeToLookFor) => arrayEquals(nodeToLookFor.position, referenceNode.position)); if (foundIndex !== -1) { nodesForConsoleReference.splice(foundIndex, 1); } else if (nodesForConsoleReference.length === CAPACITY) { @@ -37,12 +37,12 @@ const prepareCurrentReferencesForInsertion = (referenceNode: ConsoleReferenceNod }; const assignConsoleReferencesFrom = (referenceNodes: ConsoleReferenceNode[]) => { - referenceNodes.forEach((referenceNode, index) => - setDirectiveKey(referenceNode.node, getConsoleReferenceWithIndexOf(index)) - ); + referenceNodes.forEach( + (referenceNode, index) => + setDirectiveKey(referenceNode.node, getConsoleReferenceWithIndexOf(index))); }; -const setDirectiveKey = (node: ComponentTreeNode | null, key: string) => { +const setDirectiveKey = (node: ComponentTreeNode|null, key: string) => { Object.defineProperty(window, key, { get: () => { if (node?.component) { @@ -58,4 +58,4 @@ const setDirectiveKey = (node: ComponentTreeNode | null, key: string) => { }; const getConsoleReferenceWithIndexOf = (consoleReferenceIndex: number) => - `${CONSOLE_REFERENCE_PREFIX}${consoleReferenceIndex}`; + `${CONSOLE_REFERENCE_PREFIX}${consoleReferenceIndex}`; diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts index 7792fe9cb69..6e64561c988 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts @@ -1,20 +1,21 @@ -import { Descriptor, NestedProp, PropType } from 'protocol'; -import { getKeys } from './object-utils'; +import {Descriptor, NestedProp, PropType} from 'protocol'; + +import {getKeys} from './object-utils'; // todo(aleksanderbodurri) pull this out of this file const METADATA_PROPERTY_NAME = '__ngContext__'; export interface CompositeType { - type: Extract; + type: Extract; prop: any; } export interface TerminalType { - type: Exclude; + type: Exclude; prop: any; } -export type PropertyData = TerminalType | CompositeType; +export type PropertyData = TerminalType|CompositeType; export type Formatter = { [key in PropType]: (data: any) => Result; @@ -25,7 +26,7 @@ interface LevelOptions { level?: number; } -const serializable: { [key in PropType]: boolean } = { +const serializable: {[key in PropType]: boolean} = { [PropType.Boolean]: true, [PropType.String]: true, [PropType.Null]: true, @@ -57,7 +58,7 @@ const typeToDescriptorPreview: Formatter = { [PropType.Unknown]: (_: any) => 'unknown', }; -type Key = string | number; +type Key = string|number; const ignoreList: Set = new Set([METADATA_PROPERTY_NAME, '__ngSimpleChanges__']); const shallowPropTypeToTreeMetaData = { @@ -107,7 +108,7 @@ const shallowPropTypeToTreeMetaData = { }, }; -const isEditable = (instance: any, propName: string | number, propData: TerminalType) => { +const isEditable = (instance: any, propName: string|number, propData: TerminalType) => { if (typeof propName === 'symbol') { return false; } @@ -124,7 +125,7 @@ const isEditable = (instance: any, propName: string | number, propData: Terminal return shallowPropTypeToTreeMetaData[propData.type].editable; }; -const hasValue = (obj: {}, prop: string | number) => { +const hasValue = (obj: {}, prop: string|number) => { const descriptor = Object.getOwnPropertyDescriptor(obj, prop); if (!descriptor?.get && typeof descriptor?.value === 'undefined') { return false; @@ -132,133 +133,123 @@ const hasValue = (obj: {}, prop: string | number) => { return true; }; -const getPreview = (instance: {}, propName: string | number, propData: TerminalType | CompositeType) => { - return hasValue(instance, propName) ? typeToDescriptorPreview[propData.type](propData.prop) : SETTER_FIELD_PREVIEW; -}; +const getPreview = + (instance: {}, propName: string|number, propData: TerminalType|CompositeType) => { + return hasValue(instance, propName) ? typeToDescriptorPreview[propData.type](propData.prop) : + SETTER_FIELD_PREVIEW; + }; const SETTER_FIELD_PREVIEW = '[setter]'; -export const createShallowSerializedDescriptor = ( - instance: any, - propName: string | number, - propData: TerminalType -): Descriptor => { - const { type } = propData; +export const createShallowSerializedDescriptor = + (instance: any, propName: string|number, propData: TerminalType): Descriptor => { + const {type} = propData; - const shallowSerializedDescriptor: Descriptor = { - type, - expandable: shallowPropTypeToTreeMetaData[type].expandable, - editable: isEditable(instance, propName, propData), - preview: getPreview(instance, propName, propData), - }; + const shallowSerializedDescriptor: Descriptor = { + type, + expandable: shallowPropTypeToTreeMetaData[type].expandable, + editable: isEditable(instance, propName, propData), + preview: getPreview(instance, propName, propData), + }; - if (propData.prop !== undefined && serializable[type]) { - shallowSerializedDescriptor.value = propData.prop; - } + if (propData.prop !== undefined && serializable[type]) { + shallowSerializedDescriptor.value = propData.prop; + } - return shallowSerializedDescriptor; -}; + return shallowSerializedDescriptor; + }; -export const createLevelSerializedDescriptor = ( - instance: {}, - propName: string | number, - propData: CompositeType, - levelOptions: LevelOptions, - continuation: (instance: any, propName: string | number, level?: number, max?: number) => void -): Descriptor => { - const { type, prop } = propData; +export const createLevelSerializedDescriptor = + (instance: {}, propName: string|number, propData: CompositeType, levelOptions: LevelOptions, + continuation: (instance: any, propName: string|number, level?: number, max?: number) => void): + Descriptor => { + const {type, prop} = propData; - const levelSerializedDescriptor: Descriptor = { - type, - editable: false, - expandable: getKeys(prop).length > 0, - preview: getPreview(instance, propName, propData), - }; + const levelSerializedDescriptor: Descriptor = { + type, + editable: false, + expandable: getKeys(prop).length > 0, + preview: getPreview(instance, propName, propData), + }; - if (levelOptions.level !== undefined && levelOptions.currentLevel < levelOptions.level) { - const value = getLevelDescriptorValue(propData, levelOptions, continuation); - if (value !== undefined) { - levelSerializedDescriptor.value = value; - } - } + if (levelOptions.level !== undefined && levelOptions.currentLevel < levelOptions.level) { + const value = getLevelDescriptorValue(propData, levelOptions, continuation); + if (value !== undefined) { + levelSerializedDescriptor.value = value; + } + } - return levelSerializedDescriptor; -}; + return levelSerializedDescriptor; + }; -export const createNestedSerializedDescriptor = ( - instance: {}, - propName: string | number, - propData: CompositeType, - levelOptions: LevelOptions, - nodes: NestedProp[], - nestedSerializer: (instance: any, propName: string, nodes: NestedProp[], currentLevel: number, level?: number) => void -): Descriptor => { - const { type, prop } = propData; +export const createNestedSerializedDescriptor = + (instance: {}, propName: string|number, propData: CompositeType, levelOptions: LevelOptions, + nodes: NestedProp[], + nestedSerializer: ( + instance: any, propName: string, nodes: NestedProp[], currentLevel: number, + level?: number) => void): Descriptor => { + const {type, prop} = propData; - const nestedSerializedDescriptor: Descriptor = { - type, - editable: false, - expandable: getKeys(prop).length > 0, - preview: getPreview(instance, propName, propData), - }; + const nestedSerializedDescriptor: Descriptor = { + type, + editable: false, + expandable: getKeys(prop).length > 0, + preview: getPreview(instance, propName, propData), + }; - if (nodes && nodes.length) { - const value = getNestedDescriptorValue(propData, levelOptions, nodes, nestedSerializer); - if (value !== undefined) { - nestedSerializedDescriptor.value = value; - } - } - return nestedSerializedDescriptor; -}; - -const getNestedDescriptorValue = ( - propData: CompositeType, - levelOptions: LevelOptions, - nodes: NestedProp[], - nestedSerializer: ( - instance: any, - propName: string | number, - nodes: NestedProp[], - currentLevel: number, - level?: number - ) => void -) => { - const { type, prop } = propData; - const { currentLevel } = levelOptions; - - switch (type) { - case PropType.Array: - return nodes.map((nestedProp) => nestedSerializer(prop, nestedProp.name, nestedProp.children, currentLevel + 1)); - case PropType.Object: - return nodes.reduce((accumulator, nestedProp) => { - if (prop.hasOwnProperty(nestedProp.name) && !ignoreList.has(nestedProp.name)) { - accumulator[nestedProp.name] = nestedSerializer(prop, nestedProp.name, nestedProp.children, currentLevel + 1); + if (nodes && nodes.length) { + const value = getNestedDescriptorValue(propData, levelOptions, nodes, nestedSerializer); + if (value !== undefined) { + nestedSerializedDescriptor.value = value; } - return accumulator; - }, {}); - } -}; + } + return nestedSerializedDescriptor; + }; -const getLevelDescriptorValue = ( - propData: CompositeType, - levelOptions: LevelOptions, - continuation: (instance: any, propName: string | number, level?: number, max?: number) => void -) => { - const { type, prop } = propData; - const { currentLevel, level } = levelOptions; +const getNestedDescriptorValue = + (propData: CompositeType, levelOptions: LevelOptions, nodes: NestedProp[], + nestedSerializer: ( + instance: any, propName: string|number, nodes: NestedProp[], currentLevel: number, + level?: number) => void) => { + const {type, prop} = propData; + const {currentLevel} = levelOptions; - switch (type) { - case PropType.Array: - return prop.map((_: any, idx: number) => continuation(prop, idx, currentLevel + 1, level)); - case PropType.Object: - return getKeys(prop).reduce((accumulator, propName) => { - if (!ignoreList.has(propName)) { - accumulator[propName] = continuation(prop, propName, currentLevel + 1, level); - } - return accumulator; - }, {}); - } -}; + switch (type) { + case PropType.Array: + return nodes.map( + (nestedProp) => + nestedSerializer(prop, nestedProp.name, nestedProp.children, currentLevel + 1)); + case PropType.Object: + return nodes.reduce((accumulator, nestedProp) => { + if (prop.hasOwnProperty(nestedProp.name) && !ignoreList.has(nestedProp.name)) { + accumulator[nestedProp.name] = + nestedSerializer(prop, nestedProp.name, nestedProp.children, currentLevel + 1); + } + return accumulator; + }, {}); + } + }; + +const getLevelDescriptorValue = + (propData: CompositeType, levelOptions: LevelOptions, + continuation: (instance: any, propName: string|number, level?: number, max?: number) => + void) => { + const {type, prop} = propData; + const {currentLevel, level} = levelOptions; + + switch (type) { + case PropType.Array: + return prop.map( + (_: any, idx: number) => continuation(prop, idx, currentLevel + 1, level)); + case PropType.Object: + return getKeys(prop).reduce((accumulator, propName) => { + if (!ignoreList.has(propName)) { + accumulator[propName] = continuation(prop, propName, currentLevel + 1, level); + } + return accumulator; + }, {}); + } + }; const truncate = (str: string, max = 20): string => { if (str.length > max) { diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.spec.ts index 95dda329af9..2e4818694ab 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.spec.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.spec.ts @@ -1,5 +1,6 @@ -import { deeplySerializeSelectedProperties } from './state-serializer'; -import { PropType } from 'protocol'; +import {PropType} from 'protocol'; + +import {deeplySerializeSelectedProperties} from './state-serializer'; const QUERY_1_1 = []; @@ -173,27 +174,26 @@ describe('deeplySerializeSelectedProperties', () => { it('should work with getters', () => { const result = deeplySerializeSelectedProperties( - { - get foo(): any { - return { - baz: { - qux: 3, - }, - }; - }, - }, - [ { - name: 'foo', - children: [ - { - name: 'baz', - children: [], - }, - ], + get foo(): any { + return { + baz: { + qux: 3, + }, + }; + }, }, - ] - ); + [ + { + name: 'foo', + children: [ + { + name: 'baz', + children: [], + }, + ], + }, + ]); expect(result).toEqual({ foo: { type: PropType.Object, @@ -214,17 +214,16 @@ describe('deeplySerializeSelectedProperties', () => { it('should getters should be readonly', () => { const result = deeplySerializeSelectedProperties( - { - get foo(): number { - return 42; + { + get foo(): number { + return 42; + }, + get bar(): number { + return 42; + }, + set bar(val: number) {}, }, - get bar(): number { - return 42; - }, - set bar(val: number) {}, - }, - [] - ); + []); expect(result).toEqual({ foo: { type: PropType.Number, @@ -247,52 +246,51 @@ describe('deeplySerializeSelectedProperties', () => { it('should return the precise path requested', () => { const result = deeplySerializeSelectedProperties( - { - state: { - nested: { - props: { - foo: 1, - bar: 2, - }, - [Symbol(3)](): number { - return 1.618; - }, - get foo(): number { - return 42; + { + state: { + nested: { + props: { + foo: 1, + bar: 2, + }, + [Symbol(3)](): number { + return 1.618; + }, + get foo(): number { + return 42; + }, }, }, }, - }, - [ - { - name: 'state', - children: [ - { - name: 'nested', - children: [ - { - name: 'props', - children: [ - { - name: 'foo', - children: [], - }, - { - name: 'bar', - children: [], - }, - ], - }, - { - name: 'foo', - children: [], - }, - ], - }, - ], - }, - ] - ); + [ + { + name: 'state', + children: [ + { + name: 'nested', + children: [ + { + name: 'props', + children: [ + { + name: 'foo', + children: [], + }, + { + name: 'bar', + children: [], + }, + ], + }, + { + name: 'foo', + children: [], + }, + ], + }, + ], + }, + ]); expect(result).toEqual({ state: { type: PropType.Object, @@ -344,14 +342,13 @@ describe('deeplySerializeSelectedProperties', () => { it('should not show setters at all when associated getters or values are unavailable', () => { const result = deeplySerializeSelectedProperties( - { - set foo(_: any) {}, - get bar(): number { - return 1; + { + set foo(_: any) {}, + get bar(): number { + return 1; + }, }, - }, - [] - ); + []); expect(result).toEqual({ foo: { type: PropType.Undefined, diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts index 65fd008b05f..3417040e4cd 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts @@ -1,11 +1,7 @@ -import { Descriptor, NestedProp, PropType } from 'protocol'; -import { - createLevelSerializedDescriptor, - createNestedSerializedDescriptor, - createShallowSerializedDescriptor, - PropertyData, -} from './serialized-descriptor-factory'; -import { getKeys } from './object-utils'; +import {Descriptor, NestedProp, PropType} from 'protocol'; + +import {getKeys} from './object-utils'; +import {createLevelSerializedDescriptor, createNestedSerializedDescriptor, createShallowSerializedDescriptor, PropertyData,} from './serialized-descriptor-factory'; // todo(aleksanderbodurri) pull this out of this file const METADATA_PROPERTY_NAME = '__ngContext__'; @@ -51,91 +47,80 @@ const getPropType = (prop: any): PropType => { return PropType.Unknown; }; -const nestedSerializer = ( - instance: any, - propName: string | number, - nodes: NestedProp[], - currentLevel = 0, - level = MAX_LEVEL -): Descriptor => { - const serializableInstance = instance[propName]; - const propData: PropertyData = { prop: serializableInstance, type: getPropType(serializableInstance) }; +const nestedSerializer = + (instance: any, propName: string|number, nodes: NestedProp[], currentLevel = 0, + level = MAX_LEVEL): Descriptor => { + const serializableInstance = instance[propName]; + const propData: + PropertyData = {prop: serializableInstance, type: getPropType(serializableInstance)}; - if (currentLevel < level) { - return levelSerializer(instance, propName, currentLevel, level, nestedSerializerContinuation(nodes, level)); - } + if (currentLevel < level) { + return levelSerializer( + instance, propName, currentLevel, level, nestedSerializerContinuation(nodes, level)); + } - switch (propData.type) { - case PropType.Array: - case PropType.Object: - return createNestedSerializedDescriptor( - instance, - propName, - propData, - { level, currentLevel }, - nodes, - nestedSerializer - ); - default: - return createShallowSerializedDescriptor(instance, propName, propData); - } -}; + switch (propData.type) { + case PropType.Array: + case PropType.Object: + return createNestedSerializedDescriptor( + instance, propName, propData, {level, currentLevel}, nodes, nestedSerializer); + default: + return createShallowSerializedDescriptor(instance, propName, propData); + } + }; -const nestedSerializerContinuation = - (nodes: NestedProp[], level: number) => (instance: any, propName: string, nestedLevel: number) => { - const idx = nodes.findIndex((v) => v.name === propName); - if (idx < 0) { - // The property is not specified in the query. - return nestedSerializer(instance, propName, [], nestedLevel, level); - } - return nestedSerializer(instance, propName, nodes[idx].children, nestedLevel, level); - }; +const nestedSerializerContinuation = (nodes: NestedProp[], level: number) => + (instance: any, propName: string, nestedLevel: number) => { + const idx = nodes.findIndex((v) => v.name === propName); + if (idx < 0) { + // The property is not specified in the query. + return nestedSerializer(instance, propName, [], nestedLevel, level); + } + return nestedSerializer(instance, propName, nodes[idx].children, nestedLevel, level); + }; -const levelSerializer = ( - instance: any, - propName: string | number, - currentLevel = 0, - level = MAX_LEVEL, - continuation = levelSerializer -): Descriptor => { - const serializableInstance = instance[propName]; - const propData: PropertyData = { prop: serializableInstance, type: getPropType(serializableInstance) }; +const levelSerializer = + (instance: any, propName: string|number, currentLevel = 0, level = MAX_LEVEL, + continuation = levelSerializer): Descriptor => { + const serializableInstance = instance[propName]; + const propData: + PropertyData = {prop: serializableInstance, type: getPropType(serializableInstance)}; - switch (propData.type) { - case PropType.Array: - case PropType.Object: - return createLevelSerializedDescriptor(instance, propName, propData, { level, currentLevel }, continuation); - default: - return createShallowSerializedDescriptor(instance, propName, propData); - } -}; + switch (propData.type) { + case PropType.Array: + case PropType.Object: + return createLevelSerializedDescriptor( + instance, propName, propData, {level, currentLevel}, continuation); + default: + return createShallowSerializedDescriptor(instance, propName, propData); + } + }; -export const serializeDirectiveState = (instance: object, levels = MAX_LEVEL): { [key: string]: Descriptor } => { - const result = {}; - getKeys(instance).forEach((prop) => { - if (typeof prop === 'string' && ignoreList.has(prop)) { - return; - } - result[prop] = levelSerializer(instance, prop, null, 0, levels); - }); - return result; -}; +export const serializeDirectiveState = + (instance: object, levels = MAX_LEVEL): {[key: string]: Descriptor} => { + const result = {}; + getKeys(instance).forEach((prop) => { + if (typeof prop === 'string' && ignoreList.has(prop)) { + return; + } + result[prop] = levelSerializer(instance, prop, null, 0, levels); + }); + return result; + }; -export const deeplySerializeSelectedProperties = ( - instance: any, - props: NestedProp[] -): { [name: string]: Descriptor } => { - const result = {}; - getKeys(instance).forEach((prop) => { - if (ignoreList.has(prop)) { - return; - } - const idx = props.findIndex((v) => v.name === prop); - if (idx < 0) { - result[prop] = levelSerializer(instance, prop); - } else { - result[prop] = nestedSerializer(instance, prop, props[idx].children); - } - }); - return result; -}; +export const deeplySerializeSelectedProperties = + (instance: any, props: NestedProp[]): {[name: string]: Descriptor} => { + const result = {}; + getKeys(instance).forEach((prop) => { + if (ignoreList.has(prop)) { + return; + } + const idx = props.findIndex((v) => v.name === prop); + if (idx < 0) { + result[prop] = levelSerializer(instance, prop); + } else { + result[prop] = nestedSerializer(instance, prop, props[idx].children); + } + }); + return result; + }; diff --git a/devtools/projects/ng-devtools-backend/src/public-api.ts b/devtools/projects/ng-devtools-backend/src/public-api.ts index d5dc6967978..9855cb8c4d0 100644 --- a/devtools/projects/ng-devtools-backend/src/public-api.ts +++ b/devtools/projects/ng-devtools-backend/src/public-api.ts @@ -3,4 +3,4 @@ */ export * from './lib'; -export { findNodeFromSerializedPosition } from './lib/component-tree'; +export {findNodeFromSerializedPosition} from './lib/component-tree'; diff --git a/devtools/projects/ng-devtools-backend/src/test.ts b/devtools/projects/ng-devtools-backend/src/test.ts index 7a74f36c9b8..1ce190c07a7 100644 --- a/devtools/projects/ng-devtools-backend/src/test.ts +++ b/devtools/projects/ng-devtools-backend/src/test.ts @@ -2,8 +2,9 @@ import 'zone.js/dist/zone'; import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; + +import {getTestBed} from '@angular/core/testing'; +import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; declare const require: any; diff --git a/devtools/projects/ng-devtools/karma.conf.js b/devtools/projects/ng-devtools/karma.conf.js index 858868f6761..e367d32b11a 100644 --- a/devtools/projects/ng-devtools/karma.conf.js +++ b/devtools/projects/ng-devtools/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -13,7 +13,7 @@ module.exports = function (config) { require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: true, // leave Jasmine Spec Runner output visible in browser + clearContext: true, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage/ng-devtools'), diff --git a/devtools/projects/ng-devtools/src/lib/application-operations/index.ts b/devtools/projects/ng-devtools/src/lib/application-operations/index.ts index 6bd2bbce99d..912f1096cdb 100644 --- a/devtools/projects/ng-devtools/src/lib/application-operations/index.ts +++ b/devtools/projects/ng-devtools/src/lib/application-operations/index.ts @@ -1,4 +1,4 @@ -import { DirectivePosition, ElementPosition } from 'protocol'; +import {DirectivePosition, ElementPosition} from 'protocol'; export abstract class ApplicationOperations { abstract viewSource(position: ElementPosition): void; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts index 9e2982689cd..2b279c19036 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts @@ -1,13 +1,15 @@ /// -import { AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { Events, MessageBus, Route } from 'protocol'; -import { DirectiveExplorerComponent } from './directive-explorer/directive-explorer.component'; -import { ApplicationEnvironment } from '../application-environment/index'; -import { MatSlideToggleChange } from '@angular/material/slide-toggle'; -import { TabUpdate } from './tab-update/index'; -import { Theme, ThemeService } from '../theme-service'; -import { Subscription } from 'rxjs'; -import { MatTabNav } from '@angular/material/tabs'; +import {AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {MatSlideToggleChange} from '@angular/material/slide-toggle'; +import {MatTabNav} from '@angular/material/tabs'; +import {Events, MessageBus, Route} from 'protocol'; +import {Subscription} from 'rxjs'; + +import {ApplicationEnvironment} from '../application-environment/index'; +import {Theme, ThemeService} from '../theme-service'; + +import {DirectiveExplorerComponent} from './directive-explorer/directive-explorer.component'; +import {TabUpdate} from './tab-update/index'; @Component({ selector: 'ng-devtools-tabs', @@ -15,11 +17,11 @@ import { MatTabNav } from '@angular/material/tabs'; styleUrls: ['./devtools-tabs.component.scss'], }) export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit { - @Input() angularVersion: string | undefined = undefined; + @Input() angularVersion: string|undefined = undefined; @ViewChild(DirectiveExplorerComponent) directiveExplorer: DirectiveExplorerComponent; - @ViewChild('navBar', { static: true }) navbar: MatTabNav; + @ViewChild('navBar', {static: true}) navbar: MatTabNav; - activeTab: 'Components' | 'Profiler' | 'Router Tree' = 'Components'; + activeTab: 'Components'|'Profiler'|'Router Tree' = 'Components'; inspectorRunning = false; routerTreeEnabled = false; @@ -31,14 +33,13 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit { routes: Route[] = []; constructor( - public tabUpdate: TabUpdate, - public themeService: ThemeService, - private _messageBus: MessageBus, - private _applicationEnvironment: ApplicationEnvironment - ) {} + public tabUpdate: TabUpdate, public themeService: ThemeService, + private _messageBus: MessageBus, + private _applicationEnvironment: ApplicationEnvironment) {} ngOnInit(): void { - this._currentThemeSubscription = this.themeService.currentTheme.subscribe((theme) => (this.currentTheme = theme)); + this._currentThemeSubscription = + this.themeService.currentTheme.subscribe((theme) => (this.currentTheme = theme)); this._messageBus.on('updateRouterTree', (routes) => { this.routes = routes || []; @@ -62,7 +63,7 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit { return this._applicationEnvironment.environment.LATEST_SHA.slice(0, 8); } - changeTab(tab: 'Profiler' | 'Components' | 'Router Tree'): void { + changeTab(tab: 'Profiler'|'Components'|'Router Tree'): void { this.activeTab = tab; this.tabUpdate.notify(); if (tab === 'Router Tree') { @@ -90,6 +91,7 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit { } toggleTimingAPI(change: MatSlideToggleChange): void { - change.checked ? this._messageBus.emit('enableTimingAPI') : this._messageBus.emit('disableTimingAPI'); + change.checked ? this._messageBus.emit('enableTimingAPI') : + this._messageBus.emit('disableTimingAPI'); } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts index f051358f6c6..283ca2448df 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.module.ts @@ -1,18 +1,17 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { DevToolsTabsComponent } from './devtools-tabs.component'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; +import {MatIconModule} from '@angular/material/icon'; +import {MatMenuModule} from '@angular/material/menu'; +import {MatSlideToggleModule} from '@angular/material/slide-toggle'; +import {MatTabsModule} from '@angular/material/tabs'; +import {MatTooltipModule} from '@angular/material/tooltip'; -import { MatTabsModule } from '@angular/material/tabs'; -import { MatIconModule } from '@angular/material/icon'; - -import { DirectiveExplorerModule } from './directive-explorer/directive-explorer.module'; -import { ProfilerModule } from './profiler/profiler.module'; -import { RouterTreeModule } from './router-tree/router-tree.module'; -import { MatMenuModule } from '@angular/material/menu'; -import { MatButtonModule } from '@angular/material/button'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatSlideToggleModule } from '@angular/material/slide-toggle'; -import { TabUpdate } from './tab-update/index'; +import {DevToolsTabsComponent} from './devtools-tabs.component'; +import {DirectiveExplorerModule} from './directive-explorer/directive-explorer.module'; +import {ProfilerModule} from './profiler/profiler.module'; +import {RouterTreeModule} from './router-tree/router-tree.module'; +import {TabUpdate} from './tab-update/index'; @NgModule({ declarations: [DevToolsTabsComponent], @@ -31,4 +30,5 @@ import { TabUpdate } from './tab-update/index'; providers: [TabUpdate], exports: [DevToolsTabsComponent], }) -export class DevToolsTabModule {} +export class DevToolsTabModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts index 5f1dcaa9671..3180068e98b 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts @@ -1,7 +1,9 @@ -import { DevToolsTabsComponent } from './devtools-tabs.component'; -import { ApplicationEnvironment } from '../application-environment/index'; -import { Events, MessageBus } from 'protocol'; -import { TabUpdate } from './tab-update/index'; +import {Events, MessageBus} from 'protocol'; + +import {ApplicationEnvironment} from '../application-environment/index'; + +import {DevToolsTabsComponent} from './devtools-tabs.component'; +import {TabUpdate} from './tab-update/index'; describe('DevtoolsTabsComponent', () => { let messageBusMock: MessageBus; @@ -15,11 +17,7 @@ describe('DevtoolsTabsComponent', () => { mockThemeService = {}; comp = new DevToolsTabsComponent( - new TabUpdate(), - mockThemeService as any, - messageBusMock, - applicationEnvironmentMock - ); + new TabUpdate(), mockThemeService as any, messageBusMock, applicationEnvironmentMock); }); it('should create instance from class', () => { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts index 4e244ade210..b570170869c 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts @@ -1,90 +1,84 @@ -import { DefaultIterableDiffer } from '@angular/core'; +// tslint:disable-next-line:deprecation +import {DefaultIterableDiffer} from '@angular/core'; export interface MovedRecord { currentIndex: number; previousIndex: number; } -export const diff = ( - differ: DefaultIterableDiffer, - a: T[], - b: T[] -): { - newItems: T[]; - removedItems: T[]; - movedItems: T[]; -} => { - differ.diff(a); - differ.diff(b); +export const diff = (differ: DefaultIterableDiffer, a: T[], b: T[]): + {newItems: T[]; removedItems: T[]; movedItems: T[];} => { + differ.diff(a); + differ.diff(b); - const alreadySet: boolean[] = []; - const movedItems: T[] = []; + const alreadySet: boolean[] = []; + const movedItems: T[] = []; - // We first have to set the moved items to their correct positions. - // Keep in mind that the track by function may not guarantee - // that we haven't changed any of the items' props. - differ.forEachMovedItem(record => { - if (record.currentIndex === null) { - return; - } - if (record.previousIndex === null) { - return; - } - // We want to preserve the reference so that a default - // track by function used by the CDK, for instance, can - // recognize that this item's identity hasn't changed. - // At the same time, since we don't have the guarantee - // that we haven't already set the previousIndex while - // iterating, we need to check that. If we have, we assign - // this array item to a new object. We don't want to risk - // changing the properties of an object we'll use in the future. - if (!alreadySet[record.previousIndex]) { - a[record.currentIndex] = a[record.previousIndex]; - } else { - a[record.currentIndex] = {} as T; - } - Object.keys(b[record.currentIndex]).forEach(prop => { - // TypeScript's type inference didn't follow the check from above. - if (record.currentIndex === null) { - return; + // We first have to set the moved items to their correct positions. + // Keep in mind that the track by function may not guarantee + // that we haven't changed any of the items' props. + differ.forEachMovedItem(record => { + if (record.currentIndex === null) { + return; + } + if (record.previousIndex === null) { + return; + } + // We want to preserve the reference so that a default + // track by function used by the CDK, for instance, can + // recognize that this item's identity hasn't changed. + // At the same time, since we don't have the guarantee + // that we haven't already set the previousIndex while + // iterating, we need to check that. If we have, we assign + // this array item to a new object. We don't want to risk + // changing the properties of an object we'll use in the future. + if (!alreadySet[record.previousIndex]) { + a[record.currentIndex] = a[record.previousIndex]; + } else { + a[record.currentIndex] = {} as T; + } + Object.keys(b[record.currentIndex]).forEach(prop => { + // TypeScript's type inference didn't follow the check from above. + if (record.currentIndex === null) { + return; + } + a[record.currentIndex][prop] = b[record.currentIndex][prop]; + }); + if (!alreadySet[record.previousIndex]) { + // tslint:disable-next-line: no-non-null-assertion + a[record.previousIndex] = null!; + } + alreadySet[record.currentIndex] = true; + movedItems.push(a[record.currentIndex]); + }); + + // Now we can set the new items and remove the deleted ones. + const newItems: T[] = []; + const removedItems: T[] = []; + differ.forEachAddedItem(record => { + if (record.currentIndex !== null && record.previousIndex === null) { + a[record.currentIndex] = record.item; + alreadySet[record.currentIndex] = true; + newItems.push(record.item); + } + }); + + differ.forEachRemovedItem(record => { + if (record.previousIndex === null) { + return; + } + if (record.currentIndex === null && !alreadySet[record.previousIndex]) { + // tslint:disable-next-line: no-non-null-assertion + a[record.previousIndex] = null!; + } + removedItems.push(record.item); + }); + + for (let i = a.length - 1; i >= 0; i--) { + if (a[i] === null) { + a.splice(i, 1); + } } - a[record.currentIndex][prop] = b[record.currentIndex][prop]; - }); - if (!alreadySet[record.previousIndex]) { - // tslint:disable-next-line: no-non-null-assertion - a[record.previousIndex] = null!; - } - alreadySet[record.currentIndex] = true; - movedItems.push(a[record.currentIndex]); - }); - // Now we can set the new items and remove the deleted ones. - const newItems: T[] = []; - const removedItems: T[] = []; - differ.forEachAddedItem(record => { - if (record.currentIndex !== null && record.previousIndex === null) { - a[record.currentIndex] = record.item; - alreadySet[record.currentIndex] = true; - newItems.push(record.item); - } - }); - - differ.forEachRemovedItem(record => { - if (record.previousIndex === null) { - return; - } - if (record.currentIndex === null && !alreadySet[record.previousIndex]) { - // tslint:disable-next-line: no-non-null-assertion - a[record.previousIndex] = null!; - } - removedItems.push(record.item); - }); - - for (let i = a.length - 1; i >= 0; i--) { - if (a[i] === null) { - a.splice(i, 1); - } - } - - return { newItems, removedItems, movedItems }; -}; + return {newItems, removedItems, movedItems}; + }; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts index 766f1023379..67895f8fa54 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts @@ -1,35 +1,15 @@ -import { - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - NgZone, - OnDestroy, - OnInit, - Output, - ViewChild, -} from '@angular/core'; -import { - MessageBus, - Events, - DevToolsNode, - ComponentExplorerViewQuery, - ComponentExplorerView, - ElementPosition, - PropertyQuery, - PropertyQueryTypes, - DirectivePosition, -} from 'protocol'; -import { IndexedNode } from './directive-forest/index-forest'; -import { ApplicationOperations } from '../../application-operations/index'; -import { ElementPropertyResolver } from './property-resolver/element-property-resolver'; -import { FlatNode } from './directive-forest/component-data-source'; -import { FlatNode as PropertyFlatNode } from './property-resolver/element-property-resolver'; -import { DirectiveForestComponent } from './directive-forest/directive-forest.component'; -import { constructPathOfKeysToPropertyValue } from './property-resolver/directive-property-resolver'; -import { BreadcrumbsComponent } from './directive-forest/breadcrumbs/breadcrumbs.component'; -import { SplitComponent } from '../../../lib/vendor/angular-split/public_api'; +import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild,} from '@angular/core'; +import {ComponentExplorerView, ComponentExplorerViewQuery, DevToolsNode, DirectivePosition, ElementPosition, Events, MessageBus, PropertyQuery, PropertyQueryTypes,} from 'protocol'; + +import {SplitComponent} from '../../../lib/vendor/angular-split/public_api'; +import {ApplicationOperations} from '../../application-operations/index'; + +import {BreadcrumbsComponent} from './directive-forest/breadcrumbs/breadcrumbs.component'; +import {FlatNode} from './directive-forest/component-data-source'; +import {DirectiveForestComponent} from './directive-forest/directive-forest.component'; +import {IndexedNode} from './directive-forest/index-forest'; +import {constructPathOfKeysToPropertyValue} from './property-resolver/directive-property-resolver'; +import {ElementPropertyResolver, FlatNode as PropertyFlatNode} from './property-resolver/element-property-resolver'; const sameDirectives = (a: IndexedNode, b: IndexedNode) => { if ((a.component && !b.component) || (!a.component && b.component)) { @@ -64,40 +44,36 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy { @ViewChild(DirectiveForestComponent) directiveForest: DirectiveForestComponent; @ViewChild(BreadcrumbsComponent) breadcrumbs: BreadcrumbsComponent; - @ViewChild(SplitComponent, { static: true, read: ElementRef }) splitElementRef: ElementRef; - @ViewChild('directiveForestSplitArea', { static: true, read: ElementRef }) directiveForestSplitArea: ElementRef; + @ViewChild(SplitComponent, {static: true, read: ElementRef}) splitElementRef: ElementRef; + @ViewChild('directiveForestSplitArea', {static: true, read: ElementRef}) + directiveForestSplitArea: ElementRef; - currentSelectedElement: IndexedNode | null = null; + currentSelectedElement: IndexedNode|null = null; forest: DevToolsNode[]; - splitDirection: 'horizontal' | 'vertical' = 'horizontal'; - parents: FlatNode[] | null = null; + splitDirection: 'horizontal'|'vertical' = 'horizontal'; + parents: FlatNode[]|null = null; - private _resizeObserver = new ResizeObserver((entries) => - this._ngZone.run(() => { - const resizedEntry = entries[0]; + private _resizeObserver = new ResizeObserver((entries) => this._ngZone.run(() => { + const resizedEntry = entries[0]; - if (resizedEntry.target === this.splitElementRef.nativeElement) { - this.splitDirection = resizedEntry.contentRect.width <= 500 ? 'vertical' : 'horizontal'; - } + if (resizedEntry.target === this.splitElementRef.nativeElement) { + this.splitDirection = resizedEntry.contentRect.width <= 500 ? 'vertical' : 'horizontal'; + } - if (!this.breadcrumbs) { - return; - } + if (!this.breadcrumbs) { + return; + } - this.breadcrumbs.updateScrollButtonVisibility(); - }) - ); + this.breadcrumbs.updateScrollButtonVisibility(); + })); - private _clickedElement: IndexedNode | null = null; + private _clickedElement: IndexedNode|null = null; private _refreshRetryTimeout: any = null; constructor( - private _appOperations: ApplicationOperations, - private _messageBus: MessageBus, - private _propResolver: ElementPropertyResolver, - private _cdr: ChangeDetectorRef, - private _ngZone: NgZone - ) {} + private _appOperations: ApplicationOperations, private _messageBus: MessageBus, + private _propResolver: ElementPropertyResolver, private _cdr: ChangeDetectorRef, + private _ngZone: NgZone) {} ngOnInit(): void { this.subscribeToBackendEvents(); @@ -111,7 +87,7 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy { this._resizeObserver.unobserve(this.directiveForestSplitArea.nativeElement); } - handleNodeSelection(node: IndexedNode | null): void { + handleNodeSelection(node: IndexedNode|null): void { if (node) { // We want to guarantee that we're not reusing any of the previous properties. // That's possible if the user has selected an NgForOf and after that @@ -141,7 +117,8 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy { } refresh(): void { - const success = this._messageBus.emit('getLatestComponentExplorerView', [this._constructViewQuery()]); + const success = + this._messageBus.emit('getLatestComponentExplorerView', [this._constructViewQuery()]); // If the event was not throttled, we no longer need to retry. if (success) { clearTimeout(this._refreshRetryTimeout); @@ -176,7 +153,7 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy { this._messageBus.emit('removeHighlightOverlay'); } - private _constructViewQuery(): ComponentExplorerViewQuery | undefined { + private _constructViewQuery(): ComponentExplorerViewQuery|undefined { if (!this._clickedElement) { return; } @@ -191,11 +168,8 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy { // We check if we're dealing with the same instance (i.e., if we have the same // set of directives and component on it), if we do, we want to get the same // set of properties which are already expanded. - if ( - !this._clickedElement || - !this.currentSelectedElement || - !sameDirectives(this._clickedElement, this.currentSelectedElement) - ) { + if (!this._clickedElement || !this.currentSelectedElement || + !sameDirectives(this._clickedElement, this.currentSelectedElement)) { return { type: PropertyQueryTypes.All, }; @@ -218,12 +192,13 @@ export class DirectiveExplorerComponent implements OnInit, OnDestroy { this.directiveForest.handleSelect(node); } - handleSetParents(parents: FlatNode[] | null): void { + handleSetParents(parents: FlatNode[]|null): void { this.parents = parents; this._cdr.detectChanges(); } - inspect({ node, directivePosition }: { node: PropertyFlatNode; directivePosition: DirectivePosition }): void { + inspect({node, directivePosition}: + {node: PropertyFlatNode; directivePosition: DirectivePosition}): void { const objectPath = constructPathOfKeysToPropertyValue(node.prop); this._appOperations.inspect(directivePosition, objectPath); } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts index 8596b335dae..1fcd6d31083 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.module.ts @@ -1,17 +1,18 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MatIconModule } from '@angular/material/icon'; +import {ScrollingModule} from '@angular/cdk/scrolling'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCardModule} from '@angular/material/card'; +import {MatIconModule} from '@angular/material/icon'; +import {MatSnackBarModule} from '@angular/material/snack-bar'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {MatTreeModule} from '@angular/material/tree'; -import { DirectiveExplorerComponent } from './directive-explorer.component'; -import { MatTreeModule } from '@angular/material/tree'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; -import { MatSnackBarModule } from '@angular/material/snack-bar'; -import { PropertyTabModule } from './property-tab/property-tab.module'; -import { DirectiveForestModule } from './directive-forest/directive-forest.module'; -import { ScrollingModule } from '@angular/cdk/scrolling'; -import { AngularSplitModule } from '../../vendor/angular-split/public_api'; -import { MatTooltipModule } from '@angular/material/tooltip'; +import {AngularSplitModule} from '../../vendor/angular-split/public_api'; + +import {DirectiveExplorerComponent} from './directive-explorer.component'; +import {DirectiveForestModule} from './directive-forest/directive-forest.module'; +import {PropertyTabModule} from './property-tab/property-tab.module'; @NgModule({ declarations: [DirectiveExplorerComponent], @@ -30,4 +31,5 @@ import { MatTooltipModule } from '@angular/material/tooltip'; MatTooltipModule, ], }) -export class DirectiveExplorerModule {} +export class DirectiveExplorerModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts index 0e0d06a99a2..68a54308323 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts @@ -1,8 +1,10 @@ -import { DirectiveExplorerComponent } from './directive-explorer.component'; -import { PropertyQueryTypes } from 'protocol'; -import { IndexedNode } from './directive-forest/index-forest'; +import {PropertyQueryTypes} from 'protocol'; + +import {DirectiveExplorerComponent} from './directive-explorer.component'; +import {IndexedNode} from './directive-forest/index-forest'; + import SpyObj = jasmine.SpyObj; -import { ElementPropertyResolver } from './property-resolver/element-property-resolver'; +import {ElementPropertyResolver} from './property-resolver/element-property-resolver'; describe('DirectiveExplorerComponent', () => { let messageBusMock: any; @@ -12,17 +14,14 @@ describe('DirectiveExplorerComponent', () => { let ngZone: any; beforeEach(() => { - applicationOperationsSpy = jasmine.createSpyObj('_appOperations', ['viewSource', 'selectDomElement']); + applicationOperationsSpy = + jasmine.createSpyObj('_appOperations', ['viewSource', 'selectDomElement']); messageBusMock = jasmine.createSpyObj('messageBus', ['on', 'once', 'emit', 'destroy']); cdr = jasmine.createSpyObj('_cdr', ['detectChanges']); ngZone = jasmine.createSpyObj('_ngZone', ['run']); comp = new DirectiveExplorerComponent( - applicationOperationsSpy, - messageBusMock, - new ElementPropertyResolver(messageBusMock), - cdr, - ngZone - ); + applicationOperationsSpy, messageBusMock, new ElementPropertyResolver(messageBusMock), cdr, + ngZone); }); it('should create instance from class', () => { @@ -32,7 +31,8 @@ describe('DirectiveExplorerComponent', () => { it('subscribe to backend events', () => { comp.subscribeToBackendEvents(); expect(messageBusMock.on).toHaveBeenCalledTimes(2); - expect(messageBusMock.on).toHaveBeenCalledWith('latestComponentExplorerView', jasmine.any(Function)); + expect(messageBusMock.on) + .toHaveBeenCalledWith('latestComponentExplorerView', jasmine.any(Function)); expect(messageBusMock.on).toHaveBeenCalledWith('componentTreeDirty', jasmine.any(Function)); }); @@ -44,18 +44,24 @@ describe('DirectiveExplorerComponent', () => { it('should emit getLatestComponentExplorerView event with null view query', () => { comp.refresh(); - expect(messageBusMock.emit).toHaveBeenCalledWith('getLatestComponentExplorerView', [undefined]); + expect(messageBusMock.emit).toHaveBeenCalledWith('getLatestComponentExplorerView', [ + undefined + ]); }); - it('should emit getLatestComponentExplorerView event on refresh with view query no properties', () => { - const currentSelectedElement = jasmine.createSpyObj('currentSelectedElement', ['position', 'children']); - currentSelectedElement.position = [0]; - currentSelectedElement.children = []; - comp.currentSelectedElement = currentSelectedElement; - comp.refresh(); - expect(comp.currentSelectedElement).toBeTruthy(); - expect(messageBusMock.emit).toHaveBeenCalledWith('getLatestComponentExplorerView', [undefined]); - }); + it('should emit getLatestComponentExplorerView event on refresh with view query no properties', + () => { + const currentSelectedElement = + jasmine.createSpyObj('currentSelectedElement', ['position', 'children']); + currentSelectedElement.position = [0]; + currentSelectedElement.children = []; + comp.currentSelectedElement = currentSelectedElement; + comp.refresh(); + expect(comp.currentSelectedElement).toBeTruthy(); + expect(messageBusMock.emit).toHaveBeenCalledWith('getLatestComponentExplorerView', [ + undefined + ]); + }); }); describe('node selection event', () => { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts index 516af78f110..ec11acf6ab8 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts @@ -1,18 +1,8 @@ -import { - AfterViewInit, - Component, - ElementRef, - EventEmitter, - HostListener, - Input, - OnChanges, - OnInit, - Output, - ViewChild, -} from '@angular/core'; -import { Subject } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; -import { FlatNode } from '../component-data-source'; +import {AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, ViewChild,} from '@angular/core'; +import {Subject} from 'rxjs'; +import {debounceTime} from 'rxjs/operators'; + +import {FlatNode} from '../component-data-source'; @Component({ selector: 'ng-breadcrumbs', @@ -33,7 +23,8 @@ export class BreadcrumbsComponent implements OnInit, AfterViewInit, OnChanges { updateScrollButtonVisibility$ = new Subject(); ngOnInit(): void { - this.updateScrollButtonVisibility$.pipe(debounceTime(100)).subscribe(() => this.updateScrollButtonVisibility()); + this.updateScrollButtonVisibility$.pipe(debounceTime(100)) + .subscribe(() => this.updateScrollButtonVisibility()); } ngAfterViewInit(): void { @@ -55,7 +46,7 @@ export class BreadcrumbsComponent implements OnInit, AfterViewInit, OnChanges { } updateScrollButtonVisibility(): void { - const { clientWidth, scrollWidth, scrollLeft } = this.breadcrumbsScrollContent.nativeElement; + const {clientWidth, scrollWidth, scrollLeft} = this.breadcrumbsScrollContent.nativeElement; this.showScrollLeftButton = scrollLeft > 0; this.showScrollRightButton = scrollLeft + clientWidth < scrollWidth; } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts index 5d8f03af271..08c3533b8b2 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.module.ts @@ -1,13 +1,15 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { BreadcrumbsComponent } from './breadcrumbs.component'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; -import { MatIconModule } from '@angular/material/icon'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCardModule} from '@angular/material/card'; +import {MatIconModule} from '@angular/material/icon'; + +import {BreadcrumbsComponent} from './breadcrumbs.component'; @NgModule({ declarations: [BreadcrumbsComponent], imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule], exports: [BreadcrumbsComponent], }) -export class BreadcrumbsModule {} +export class BreadcrumbsModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts index d1d50d6e545..503626e9a61 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/component-data-source.spec.ts @@ -1,6 +1,7 @@ -import { FlatTreeControl } from '@angular/cdk/tree'; -import { ComponentDataSource, FlatNode } from '.'; -import { DevToolsNode } from 'protocol'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {DevToolsNode} from 'protocol'; + +import {ComponentDataSource, FlatNode} from '.'; const tree1: DevToolsNode = { element: 'app', @@ -174,10 +175,8 @@ const tree4: DevToolsNode = { describe('ComponentDataSource', () => { let dataSource: ComponentDataSource; - const treeControl = new FlatTreeControl( - (node) => node.level, - (node) => node.expandable - ); + const treeControl = + new FlatTreeControl((node) => node.level, (node) => node.expandable); beforeEach(() => (dataSource = new ComponentDataSource(treeControl))); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts index e51d8ba5468..16c21334fa5 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source/index.ts @@ -1,12 +1,13 @@ -import { DevToolsNode } from 'protocol'; -import { CollectionViewer, DataSource } from '@angular/cdk/collections'; -import { BehaviorSubject, merge, Observable } from 'rxjs'; -import { MatTreeFlattener } from '@angular/material/tree'; -import { FlatTreeControl } from '@angular/cdk/tree'; -import { map } from 'rxjs/operators'; -import { DefaultIterableDiffer, TrackByFunction } from '@angular/core'; -import { IndexedNode, indexForest } from '../index-forest'; -import { diff } from '../../../diffing'; +import {CollectionViewer, DataSource} from '@angular/cdk/collections'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {DefaultIterableDiffer, TrackByFunction} from '@angular/core'; +import {MatTreeFlattener} from '@angular/material/tree'; +import {DevToolsNode} from 'protocol'; +import {BehaviorSubject, merge, Observable} from 'rxjs'; +import {map} from 'rxjs/operators'; + +import {diff} from '../../../diffing'; +import {IndexedNode, indexForest} from '../index-forest'; /** Flat node with expandable and level information */ export interface FlatNode { @@ -22,18 +23,17 @@ export interface FlatNode { const expandable = (node: IndexedNode) => !!node.children && node.children.length > 0; -const trackBy: TrackByFunction = (_: number, item: FlatNode) => `${item.id}#${item.expandable}`; +const trackBy: TrackByFunction = (_: number, item: FlatNode) => + `${item.id}#${item.expandable}`; const getId = (node: IndexedNode) => { let prefix = ''; if (node.component) { prefix = node.component.id.toString(); } - const dirIds = node.directives - .map((d) => d.id) - .sort((a, b) => { - return a - b; - }); + const dirIds = node.directives.map((d) => d.id).sort((a, b) => { + return a - b; + }); return prefix + '-' + dirIds.join('-'); }; @@ -67,29 +67,27 @@ export class ComponentDataSource extends DataSource { private _nodeToFlat = new WeakMap(); private _treeFlattener = new MatTreeFlattener( - (node: IndexedNode, level: number) => { - if (this._nodeToFlat.has(node)) { - return this._nodeToFlat.get(node); - } - const flatNode: FlatNode = { - expandable: expandable(node), - id: getId(node), - // We can compare the nodes in the navigation functions above - // based on this identifier directly, since it's a reference type - // and the reference is preserved after transformation. - position: node.position, - name: node.component ? node.component.name : node.element, - directives: node.directives.map((d) => d.name).join(', '), - original: node, - level, - }; - this._nodeToFlat.set(node, flatNode); - return flatNode; - }, - (node) => (node ? node.level : -1), - (node) => (node ? node.expandable : false), - (node) => (node ? node.children : []) - ); + (node: IndexedNode, level: number) => { + if (this._nodeToFlat.has(node)) { + return this._nodeToFlat.get(node); + } + const flatNode: FlatNode = { + expandable: expandable(node), + id: getId(node), + // We can compare the nodes in the navigation functions above + // based on this identifier directly, since it's a reference type + // and the reference is preserved after transformation. + position: node.position, + name: node.component ? node.component.name : node.element, + directives: node.directives.map((d) => d.name).join(', '), + original: node, + level, + }; + this._nodeToFlat.set(node, flatNode); + return flatNode; + }, + (node) => (node ? node.level : -1), (node) => (node ? node.expandable : false), + (node) => (node ? node.children : [])); constructor(private _treeControl: FlatTreeControl) { super(); @@ -103,21 +101,20 @@ export class ComponentDataSource extends DataSource { return this._expandedData.value; } - getFlatNodeFromIndexedNode(indexedNode: IndexedNode): FlatNode | undefined { + getFlatNodeFromIndexedNode(indexedNode: IndexedNode): FlatNode|undefined { return this._nodeToFlat.get(indexedNode); } - update( - forest: DevToolsNode[], - showCommentNodes: boolean - ): { newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[] } { + update(forest: DevToolsNode[], showCommentNodes: boolean): + {newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[]} { if (!forest) { - return { newItems: [], movedItems: [], removedItems: [] }; + return {newItems: [], movedItems: [], removedItems: []}; } let indexedForest = indexForest(forest); - // We filter comment nodes here because we need to preserve the positions within the component tree. + // We filter comment nodes here because we need to preserve the positions within the component + // tree. // // For example: // ``` @@ -126,8 +123,8 @@ export class ComponentDataSource extends DataSource { // ``` // // #comment's position will be [0] and bar's will be [0, 0]. If we trim #comment nodes earlier - // before indexing, bar's position will be [0] which will be inaccurate and will make the backend - // enable to find the corresponding node when we request its properties. + // before indexing, bar's position will be [0] which will be inaccurate and will make the + // backend enable to find the corresponding node when we request its properties. if (!showCommentNodes) { indexedForest = filterCommentNodes(indexedForest); } @@ -141,7 +138,8 @@ export class ComponentDataSource extends DataSource { expandedNodes[item.id] = this._treeControl.isExpanded(item); }); - const { newItems, movedItems, removedItems } = diff(this._differ, this.data, flattenedCollection); + const {newItems, movedItems, removedItems} = + diff(this._differ, this.data, flattenedCollection); this._treeControl.dataNodes = this.data; this._flattenedData.next(this.data); @@ -154,17 +152,18 @@ export class ComponentDataSource extends DataSource { newItems.forEach((i) => (i.newItem = true)); removedItems.forEach((i) => this._nodeToFlat.delete(i.original)); - return { newItems, movedItems, removedItems }; + return {newItems, movedItems, removedItems}; } connect(collectionViewer: CollectionViewer): Observable { - const changes = [collectionViewer.viewChange, this._treeControl.expansionModel.changed, this._flattenedData]; - return merge(...changes).pipe( - map(() => { - this._expandedData.next(this._treeFlattener.expandFlattenedNodes(this.data, this._treeControl) as FlatNode[]); - return this._expandedData.value; - }) - ); + const changes = [ + collectionViewer.viewChange, this._treeControl.expansionModel.changed, this._flattenedData + ]; + return merge(...changes).pipe(map(() => { + this._expandedData.next( + this._treeFlattener.expandFlattenedNodes(this.data, this._treeControl) as FlatNode[]); + return this._expandedData.value; + })); } disconnect(): void {} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts index 0fe1605a0e7..890702aa347 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest-utils.ts @@ -1,5 +1,6 @@ -import { FlatNode } from './component-data-source'; -import { FlatTreeControl } from '@angular/cdk/tree'; +import {FlatTreeControl} from '@angular/cdk/tree'; + +import {FlatNode} from './component-data-source'; export const isChildOf = (childPosition: number[], parentPosition: number[]) => { if (childPosition.length <= parentPosition.length) { @@ -13,12 +14,13 @@ export const isChildOf = (childPosition: number[], parentPosition: number[]) => return true; }; -export const parentCollapsed = (nodeIdx: number, all: FlatNode[], treeControl: FlatTreeControl) => { - const node = all[nodeIdx]; - for (let i = nodeIdx - 1; i >= 0; i--) { - if (isChildOf(node.position, all[i].position) && !treeControl.isExpanded(all[i])) { - return true; - } - } - return false; -}; +export const parentCollapsed = + (nodeIdx: number, all: FlatNode[], treeControl: FlatTreeControl) => { + const node = all[nodeIdx]; + for (let i = nodeIdx - 1; i >= 0; i--) { + if (isChildOf(node.position, all[i].position) && !treeControl.isExpanded(all[i])) { + return true; + } + } + return false; + }; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts index 4a36605ba6b..213e0553ff0 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts @@ -1,23 +1,14 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - EventEmitter, - HostListener, - Input, - OnInit, - Output, - ViewChild, - OnDestroy, -} from '@angular/core'; -import { DevToolsNode, ElementPosition, Events, MessageBus } from 'protocol'; -import { FlatTreeControl } from '@angular/cdk/tree'; -import { ComponentDataSource, FlatNode } from './component-data-source'; -import { isChildOf, parentCollapsed } from './directive-forest-utils'; -import { IndexedNode } from './index-forest'; -import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; -import { TabUpdate } from '../../tab-update/index'; -import { Subscription } from 'rxjs'; +import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild,} from '@angular/core'; +import {DevToolsNode, ElementPosition, Events, MessageBus} from 'protocol'; +import {Subscription} from 'rxjs'; + +import {TabUpdate} from '../../tab-update/index'; + +import {ComponentDataSource, FlatNode} from './component-data-source'; +import {isChildOf, parentCollapsed} from './directive-forest-utils'; +import {IndexedNode} from './index-forest'; @Component({ selector: 'ng-directive-forest', @@ -26,23 +17,26 @@ import { Subscription } from 'rxjs'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class DirectiveForestComponent implements OnInit, OnDestroy { - @Input() set forest(forest: DevToolsNode[]) { + @Input() + set forest(forest: DevToolsNode[]) { this._latestForest = forest; const result = this._updateForest(forest); - const changed = result.movedItems.length || result.newItems.length || result.removedItems.length; + const changed = + result.movedItems.length || result.newItems.length || result.removedItems.length; if (this.currentSelectedElement && changed) { this._reselectNodeOnUpdate(); } } @Input() currentSelectedElement: IndexedNode; - @Input() set showCommentNodes(show: boolean) { + @Input() + set showCommentNodes(show: boolean) { this._showCommentNodes = show; this.forest = this._latestForest; } - @Output() selectNode = new EventEmitter(); + @Output() selectNode = new EventEmitter(); @Output() selectDomElement = new EventEmitter(); - @Output() setParents = new EventEmitter(); + @Output() setParents = new EventEmitter(); @Output() highlightComponent = new EventEmitter(); @Output() removeComponentHighlight = new EventEmitter(); @Output() toggleInspector = new EventEmitter(); @@ -52,33 +46,29 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { filterRegex = new RegExp('.^'); currentlyMatchedIndex = -1; - selectedNode: FlatNode | null = null; + selectedNode: FlatNode|null = null; parents: FlatNode[]; - private _highlightIDinTreeFromElement: number | null = null; + private _highlightIDinTreeFromElement: number|null = null; private _tabUpdateSubscription: Subscription; private _showCommentNodes = false; private _latestForest: DevToolsNode[]; - set highlightIDinTreeFromElement(id: number | null) { + set highlightIDinTreeFromElement(id: number|null) { this._highlightIDinTreeFromElement = id; this._cdr.markForCheck(); } - readonly treeControl = new FlatTreeControl( - (node) => node.level, - (node) => node.expandable - ); + readonly treeControl = + new FlatTreeControl((node) => node.level, (node) => node.expandable); readonly dataSource = new ComponentDataSource(this.treeControl); readonly itemHeight = 18; private _initialized = false; constructor( - private _tabUpdate: TabUpdate, - private _messageBus: MessageBus, - private _cdr: ChangeDetectorRef - ) {} + private _tabUpdate: TabUpdate, private _messageBus: MessageBus, + private _cdr: ChangeDetectorRef) {} ngOnInit(): void { this.subscribeToInspectorEvents(); @@ -122,7 +112,8 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { } handleSelect(node: FlatNode): void { - this.currentlyMatchedIndex = this.dataSource.data.findIndex((matchedNode) => matchedNode.id === node.id); + this.currentlyMatchedIndex = + this.dataSource.data.findIndex((matchedNode) => matchedNode.id === node.id); this.selectAndEnsureVisible(node); } @@ -146,9 +137,9 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { } const itemTop = idx * this.itemHeight; if (itemTop < top) { - scrollParent.scrollTo({ top: itemTop }); + scrollParent.scrollTo({top: itemTop}); } else if (bottom < itemTop + this.itemHeight) { - scrollParent.scrollTo({ top: itemTop - parentHeight + this.itemHeight }); + scrollParent.scrollTo({top: itemTop - parentHeight + this.itemHeight}); } } @@ -166,7 +157,8 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { } private _reselectNodeOnUpdate(): void { - const nodeThatStillExists = this.dataSource.getFlatNodeFromIndexedNode(this.currentSelectedElement); + const nodeThatStillExists = + this.dataSource.getFlatNodeFromIndexedNode(this.currentSelectedElement); if (nodeThatStillExists) { this.select(nodeThatStillExists); } else { @@ -174,11 +166,8 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { } } - private _updateForest(forest: DevToolsNode[]): { - newItems: FlatNode[]; - movedItems: FlatNode[]; - removedItems: FlatNode[]; - } { + private _updateForest(forest: DevToolsNode[]): + {newItems: FlatNode[]; movedItems: FlatNode[]; removedItems: FlatNode[];} { const result = this.dataSource.update(forest, this._showCommentNodes); if (!this._initialized && forest && forest.length) { this.treeControl.expandAll(); @@ -196,7 +185,8 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { this.parents = []; for (let i = 1; i <= position.length; i++) { const current = position.slice(0, i); - const selectedNode = this.dataSource.data.find((item) => item.position.toString() === current.toString()); + const selectedNode = + this.dataSource.data.find((item) => item.position.toString() === current.toString()); // We might not be able to find the parent if the user has hidden the comment nodes. if (selectedNode) { @@ -290,7 +280,8 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { } isMatched(node: FlatNode): boolean { - return this.filterRegex.test(node.name.toLowerCase()) || this.filterRegex.test(node.directives.toLowerCase()); + return this.filterRegex.test(node.name.toLowerCase()) || + this.filterRegex.test(node.directives.toLowerCase()); } handleFilter(filterText: string): void { @@ -334,8 +325,8 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { prevMatched(): void { const indexesOfMatchedNodes = this._findMatchedNodes(); - this.currentlyMatchedIndex = - (this.currentlyMatchedIndex - 1 + indexesOfMatchedNodes.length) % indexesOfMatchedNodes.length; + this.currentlyMatchedIndex = (this.currentlyMatchedIndex - 1 + indexesOfMatchedNodes.length) % + indexesOfMatchedNodes.length; const indexToSelect = indexesOfMatchedNodes[this.currentlyMatchedIndex]; const nodeToSelect = this.dataSource.data[indexToSelect]; if (indexToSelect !== undefined) { @@ -362,10 +353,11 @@ export class DirectiveForestComponent implements OnInit, OnDestroy { } isHighlighted(node: FlatNode): boolean { - return !!this._highlightIDinTreeFromElement && this._highlightIDinTreeFromElement === node.original.component?.id; + return !!this._highlightIDinTreeFromElement && + this._highlightIDinTreeFromElement === node.original.component?.id; } - isElement(node: FlatNode): boolean | null { + isElement(node: FlatNode): boolean|null { return node.original.component && node.original.component.isElement; } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts index 7ea1233b192..dca26e986aa 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.module.ts @@ -1,12 +1,14 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; -import { MatIconModule } from '@angular/material/icon'; -import { BreadcrumbsModule } from './breadcrumbs/breadcrumbs.module'; -import { FilterModule } from './filter/filter.module'; -import { ScrollingModule } from '@angular/cdk/scrolling'; -import { DirectiveForestComponent } from './directive-forest.component'; +import {ScrollingModule} from '@angular/cdk/scrolling'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCardModule} from '@angular/material/card'; +import {MatIconModule} from '@angular/material/icon'; + +import {BreadcrumbsModule} from './breadcrumbs/breadcrumbs.module'; +import {DirectiveForestComponent} from './directive-forest.component'; +import {FilterModule} from './filter/filter.module'; + @NgModule({ declarations: [DirectiveForestComponent], imports: [ @@ -20,4 +22,5 @@ import { DirectiveForestComponent } from './directive-forest.component'; ], exports: [DirectiveForestComponent, BreadcrumbsModule], }) -export class DirectiveForestModule {} +export class DirectiveForestModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts index 47c5da589ab..0d7b8ae9d4f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; @Component({ selector: 'ng-filter', diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts index c9ecaa4cb64..57e1f3dd259 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.module.ts @@ -1,13 +1,15 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FilterComponent } from './filter.component'; -import { MatCardModule } from '@angular/material/card'; -import { MatIconModule } from '@angular/material/icon'; -import { MatButtonModule } from '@angular/material/button'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCardModule} from '@angular/material/card'; +import {MatIconModule} from '@angular/material/icon'; + +import {FilterComponent} from './filter.component'; @NgModule({ declarations: [FilterComponent], imports: [CommonModule, MatCardModule, MatIconModule, MatButtonModule], exports: [FilterComponent], }) -export class FilterModule {} +export class FilterModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts index 8a549bba302..707d8f6f7db 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index-forest.spec.ts @@ -1,4 +1,4 @@ -import { indexForest } from './'; +import {indexForest} from './'; describe('indexForest', () => { it('should work with an empty forest', () => { @@ -6,83 +6,10 @@ describe('indexForest', () => { }); it('should index a forest', () => { - expect( - indexForest([ - { - element: 'Parent1', - directives: [], - component: { - isElement: false, - name: 'Cmp1', - id: 1, - }, - children: [ - { - element: 'Child1_1', - directives: [ - { - name: 'Dir1', - id: 1, - }, - { - name: 'Dir2', - id: 1, - }, - ], - component: null, - children: [], - }, - { - element: 'Child1_2', - directives: [], - component: { - isElement: false, - name: 'Cmp2', - id: 1, - }, - children: [], - }, - ], - }, - { - element: 'Parent2', - directives: [], - component: null, - children: [ - { - element: 'Child2_1', - directives: [ - { - name: 'Dir3', - id: 1, - }, - ], - component: null, - children: [], - }, - { - element: 'Child2_2', - directives: [ - { - name: 'Dir4', - id: 1, - }, - { - name: 'Dir5', - id: 1, - }, - ], - component: null, - children: [], - }, - ], - }, - ]) - ).toEqual([ + expect(indexForest([ { element: 'Parent1', directives: [], - position: [0], component: { isElement: false, name: 'Cmp1', @@ -91,7 +18,6 @@ describe('indexForest', () => { children: [ { element: 'Child1_1', - position: [0, 0], directives: [ { name: 'Dir1', @@ -108,7 +34,6 @@ describe('indexForest', () => { { element: 'Child1_2', directives: [], - position: [0, 1], component: { isElement: false, name: 'Cmp2', @@ -122,11 +47,9 @@ describe('indexForest', () => { element: 'Parent2', directives: [], component: null, - position: [1], children: [ { element: 'Child2_1', - position: [1, 0], directives: [ { name: 'Dir3', @@ -138,7 +61,6 @@ describe('indexForest', () => { }, { element: 'Child2_2', - position: [1, 1], directives: [ { name: 'Dir4', @@ -154,6 +76,83 @@ describe('indexForest', () => { }, ], }, - ]); + ])) + .toEqual([ + { + element: 'Parent1', + directives: [], + position: [0], + component: { + isElement: false, + name: 'Cmp1', + id: 1, + }, + children: [ + { + element: 'Child1_1', + position: [0, 0], + directives: [ + { + name: 'Dir1', + id: 1, + }, + { + name: 'Dir2', + id: 1, + }, + ], + component: null, + children: [], + }, + { + element: 'Child1_2', + directives: [], + position: [0, 1], + component: { + isElement: false, + name: 'Cmp2', + id: 1, + }, + children: [], + }, + ], + }, + { + element: 'Parent2', + directives: [], + component: null, + position: [1], + children: [ + { + element: 'Child2_1', + position: [1, 0], + directives: [ + { + name: 'Dir3', + id: 1, + }, + ], + component: null, + children: [], + }, + { + element: 'Child2_2', + position: [1, 1], + directives: [ + { + name: 'Dir4', + id: 1, + }, + { + name: 'Dir5', + id: 1, + }, + ], + component: null, + children: [], + }, + ], + }, + ]); }); }); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts index 9e7fcedcaa1..d2006be4a7b 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest/index.ts @@ -1,19 +1,20 @@ -import { DevToolsNode, ElementPosition } from 'protocol'; +import {DevToolsNode, ElementPosition} from 'protocol'; export interface IndexedNode extends DevToolsNode { position: ElementPosition; children: IndexedNode[]; } -const indexTree = (node: DevToolsNode, idx: number, parentPosition: ElementPosition = []): IndexedNode => { - const position = parentPosition.concat([idx]); - return { - position, - element: node.element, - component: node.component, - directives: node.directives.map((d, i) => ({ name: d.name, id: d.id })), - children: node.children.map((n, i) => indexTree(n, i, position)), - } as IndexedNode; -}; +const indexTree = + (node: DevToolsNode, idx: number, parentPosition: ElementPosition = []): IndexedNode => { + const position = parentPosition.concat([idx]); + return { + position, + element: node.element, + component: node.component, + directives: node.directives.map((d, i) => ({name: d.name, id: d.id})), + children: node.children.map((n, i) => indexTree(n, i, position)), + } as IndexedNode; + }; export const indexForest = (forest: DevToolsNode[]) => forest.map((n, i) => indexTree(n, i)); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.spec.ts index d7fdfb15a47..c73679bd755 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.spec.ts @@ -1,5 +1,6 @@ -import { PropType } from 'protocol'; -import { arrayifyProps } from './arrayify-props'; +import {PropType} from 'protocol'; + +import {arrayifyProps} from './arrayify-props'; describe('arrayify', () => { it('should return an array from prop object', () => { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts index d3d40cc0b2a..7659538da05 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/arrayify-props.ts @@ -1,19 +1,16 @@ -import { Descriptor } from 'protocol'; -import { Property } from './element-property-resolver'; +import {Descriptor} from 'protocol'; -export const arrayifyProps = ( - props: { [prop: string]: Descriptor } | Descriptor[], - parent: Property | null = null -): Property[] => - Object.keys(props) - .map((name) => ({ name, descriptor: props[name], parent })) - .sort((a, b) => { - const parsedA = parseInt(a.name, 10); - const parsedB = parseInt(b.name, 10); +import {Property} from './element-property-resolver'; - if (isNaN(parsedA) || isNaN(parsedB)) { - return a.name > b.name ? 1 : -1; - } +export const arrayifyProps = + (props: {[prop: string]: Descriptor}|Descriptor[], parent: Property|null = null): Property[] => + Object.keys(props).map((name) => ({name, descriptor: props[name], parent})).sort((a, b) => { + const parsedA = parseInt(a.name, 10); + const parsedB = parseInt(b.name, 10); - return parsedA - parsedB; - }); + if (isNaN(parsedA) || isNaN(parsedB)) { + return a.name > b.name ? 1 : -1; + } + + return parsedA - parsedB; + }); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.spec.ts index e2edb903905..7574723dd4f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.spec.ts @@ -1,5 +1,6 @@ -import { Properties, PropType } from 'protocol'; -import { DirectivePropertyResolver } from './directive-property-resolver'; +import {Properties, PropType} from 'protocol'; + +import {DirectivePropertyResolver} from './directive-property-resolver'; const properties: Properties = { props: { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts index e5233f1f08f..7bdf7efdb6d 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts @@ -1,52 +1,49 @@ -import { Descriptor, MessageBus, Events, Properties, DirectivePosition, NestedProp } from 'protocol'; -import { PropertyDataSource } from './property-data-source'; -import { FlatTreeControl } from '@angular/cdk/tree'; -import { getExpandedDirectiveProperties } from './property-expanded-directive-properties'; -import { Property, FlatNode } from './element-property-resolver'; -import { ViewEncapsulation } from '@angular/core'; -import { getTreeFlattener } from './flatten'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {ViewEncapsulation} from '@angular/core'; +import {Descriptor, DirectivePosition, Events, MessageBus, NestedProp, Properties} from 'protocol'; + +import {FlatNode, Property} from './element-property-resolver'; +import {getTreeFlattener} from './flatten'; +import {PropertyDataSource} from './property-data-source'; +import {getExpandedDirectiveProperties} from './property-expanded-directive-properties'; export interface DirectiveTreeData { dataSource: PropertyDataSource; treeControl: FlatTreeControl; } -const getDirectiveControls = ( - dataSource: PropertyDataSource -): { dataSource: PropertyDataSource; treeControl: FlatTreeControl } => { - const treeControl = dataSource.treeControl; - return { - dataSource, - treeControl, - }; -}; +const getDirectiveControls = (dataSource: PropertyDataSource): + {dataSource: PropertyDataSource; treeControl: FlatTreeControl} => { + const treeControl = dataSource.treeControl; + return { + dataSource, + treeControl, + }; + }; -export const constructPathOfKeysToPropertyValue = (nodePropToGetKeysFor: Property, keys: string[] = []): string[] => { - keys.unshift(nodePropToGetKeysFor.name); - const parentNodeProp = nodePropToGetKeysFor.parent; - if (parentNodeProp) { - constructPathOfKeysToPropertyValue(parentNodeProp, keys); - } - return keys; -}; +export const constructPathOfKeysToPropertyValue = + (nodePropToGetKeysFor: Property, keys: string[] = []): string[] => { + keys.unshift(nodePropToGetKeysFor.name); + const parentNodeProp = nodePropToGetKeysFor.parent; + if (parentNodeProp) { + constructPathOfKeysToPropertyValue(parentNodeProp, keys); + } + return keys; + }; export class DirectivePropertyResolver { private _treeFlattener = getTreeFlattener(); - private _treeControl = new FlatTreeControl( - (node) => node.level, - (node) => node.expandable - ); + private _treeControl = + new FlatTreeControl((node) => node.level, (node) => node.expandable); private _inputsDataSource: PropertyDataSource; private _outputsDataSource: PropertyDataSource; private _stateDataSource: PropertyDataSource; constructor( - private _messageBus: MessageBus, - private _props: Properties, - private _directivePosition: DirectivePosition - ) { + private _messageBus: MessageBus, private _props: Properties, + private _directivePosition: DirectivePosition) { this._initDataSources(); } @@ -62,7 +59,7 @@ export class DirectivePropertyResolver { return getDirectiveControls(this._stateDataSource); } - get directiveProperties(): { [name: string]: Descriptor } { + get directiveProperties(): {[name: string]: Descriptor} { return this._props.props; } @@ -70,11 +67,11 @@ export class DirectivePropertyResolver { return this._directivePosition; } - get directiveViewEncapsulation(): ViewEncapsulation | undefined { + get directiveViewEncapsulation(): ViewEncapsulation|undefined { return this._props.metadata?.encapsulation; } - get directiveHasOnPushStrategy(): boolean | undefined { + get directiveHasOnPushStrategy(): boolean|undefined { return this._props.metadata?.onPush; } @@ -88,7 +85,7 @@ export class DirectivePropertyResolver { updateProperties(newProps: Properties): void { this._props = newProps; - const { inputProps, outputProps, stateProps } = this._classifyProperties(); + const {inputProps, outputProps, stateProps} = this._classifyProperties(); this._inputsDataSource.update(inputProps); this._outputsDataSource.update(outputProps); @@ -98,32 +95,26 @@ export class DirectivePropertyResolver { updateValue(node: FlatNode, newValue: any): void { const directiveId = this._directivePosition; const keyPath = constructPathOfKeysToPropertyValue(node.prop); - this._messageBus.emit('updateState', [{ directiveId, keyPath, newValue }]); + this._messageBus.emit('updateState', [{directiveId, keyPath, newValue}]); node.prop.descriptor.value = newValue; } private _initDataSources(): void { - const { inputProps, outputProps, stateProps } = this._classifyProperties(); + const {inputProps, outputProps, stateProps} = this._classifyProperties(); this._inputsDataSource = this._createDataSourceFromProps(inputProps); this._outputsDataSource = this._createDataSourceFromProps(outputProps); this._stateDataSource = this._createDataSourceFromProps(stateProps); } - private _createDataSourceFromProps(props: { [name: string]: Descriptor }): PropertyDataSource { + private _createDataSourceFromProps(props: {[name: string]: Descriptor}): PropertyDataSource { return new PropertyDataSource( - props, - this._treeFlattener, - this._treeControl, - this._directivePosition, - this._messageBus - ); + props, this._treeFlattener, this._treeControl, this._directivePosition, this._messageBus); } private _classifyProperties(): { - inputProps: { [name: string]: Descriptor }; - outputProps: { [name: string]: Descriptor }; - stateProps: { [name: string]: Descriptor }; + inputProps: {[name: string]: Descriptor}; outputProps: {[name: string]: Descriptor}; + stateProps: {[name: string]: Descriptor}; } { const inputLabels: Set = new Set(Object.values(this._props.metadata?.inputs || {})); const outputLabels: Set = new Set(Object.values(this._props.metadata?.outputs || {})); @@ -131,10 +122,12 @@ export class DirectivePropertyResolver { const inputProps = {}; const outputProps = {}; const stateProps = {}; - let propPointer: { [name: string]: Descriptor }; + let propPointer: {[name: string]: Descriptor}; Object.keys(this.directiveProperties).forEach((propName) => { - propPointer = inputLabels.has(propName) ? inputProps : outputLabels.has(propName) ? outputProps : stateProps; + propPointer = inputLabels.has(propName) ? inputProps : + outputLabels.has(propName) ? outputProps : + stateProps; propPointer[propName] = this.directiveProperties[propName]; }); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.spec.ts index 94b26d8fa32..e5f73664645 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.spec.ts @@ -1,5 +1,6 @@ -import { ElementPropertyResolver } from './element-property-resolver'; -import { Properties, PropType } from 'protocol'; +import {Properties, PropType} from 'protocol'; + +import {ElementPropertyResolver} from './element-property-resolver'; const mockIndexedNode = { component: { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts index 83a4f39a673..342d137f4cf 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.ts @@ -1,14 +1,9 @@ -import { Injectable } from '@angular/core'; -import { - DirectivesProperties, - ComponentExplorerViewProperties, - Descriptor, - MessageBus, - Events, - DirectivePosition, -} from 'protocol'; -import { IndexedNode } from '../directive-forest/index-forest'; -import { DirectivePropertyResolver } from './directive-property-resolver'; +import {Injectable} from '@angular/core'; +import {ComponentExplorerViewProperties, Descriptor, DirectivePosition, DirectivesProperties, Events, MessageBus,} from 'protocol'; + +import {IndexedNode} from '../directive-forest/index-forest'; + +import {DirectivePropertyResolver} from './directive-property-resolver'; export interface FlatNode { expandable: boolean; @@ -19,7 +14,7 @@ export interface FlatNode { export interface Property { name: string; descriptor: Descriptor; - parent: Property | null; + parent: Property|null; } @Injectable() @@ -49,9 +44,7 @@ export class ElementPropertyResolver { position.directive = indexedNode.directives.findIndex((d) => d.name === key); } this._directivePropertiesController.set( - key, - new DirectivePropertyResolver(this._messageBus, data[key], position) - ); + key, new DirectivePropertyResolver(this._messageBus, data[key], position)); }); } @@ -78,7 +71,7 @@ export class ElementPropertyResolver { return result; } - getDirectiveController(directive: string): DirectivePropertyResolver | undefined { + getDirectiveController(directive: string): DirectivePropertyResolver|undefined { return this._directivePropertiesController.get(directive); } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts index 63a09bf111e..7d492f45ec1 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/flatten.ts @@ -1,22 +1,18 @@ -import { MatTreeFlattener } from '@angular/material/tree'; -import { Descriptor, PropType } from 'protocol'; -import { Observable } from 'rxjs'; -import { arrayifyProps } from './arrayify-props'; -import { FlatNode, Property } from './element-property-resolver'; +import {MatTreeFlattener} from '@angular/material/tree'; +import {Descriptor, PropType} from 'protocol'; +import {Observable} from 'rxjs'; + +import {arrayifyProps} from './arrayify-props'; +import {FlatNode, Property} from './element-property-resolver'; export const getTreeFlattener = () => - new MatTreeFlattener( - (node: Property, level: number): FlatNode => { + new MatTreeFlattener((node: Property, level: number): FlatNode => { return { expandable: expandable(node.descriptor), prop: node, level, }; - }, - (node) => node.level, - (node) => node.expandable, - (node) => getChildren(node) - ); + }, (node) => node.level, (node) => node.expandable, (node) => getChildren(node)); export const expandable = (prop: Descriptor) => { if (!prop) { @@ -28,12 +24,10 @@ export const expandable = (prop: Descriptor) => { return !(prop.type !== PropType.Object && prop.type !== PropType.Array); }; -const getChildren = (prop: Property): Property[] | undefined => { +const getChildren = (prop: Property): Property[]|undefined => { const descriptor = prop.descriptor; - if ( - (descriptor.type === PropType.Object || descriptor.type === PropType.Array) && - !(descriptor.value instanceof Observable) - ) { + if ((descriptor.type === PropType.Object || descriptor.type === PropType.Array) && + !(descriptor.value instanceof Observable)) { return arrayifyProps(descriptor.value || {}, prop); } else { console.error('Unexpected data type', descriptor, 'in property', prop); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.spec.ts index 527161aed5c..032ebf4c2c1 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.spec.ts @@ -1,31 +1,26 @@ -import { FlatTreeControl } from '@angular/cdk/tree'; -import { PropType } from 'protocol'; -import { FlatNode } from './element-property-resolver'; -import { getTreeFlattener } from './flatten'; -import { PropertyDataSource } from './property-data-source'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {PropType} from 'protocol'; -const flatTreeControl = new FlatTreeControl( - (node) => node.level, - (node) => node.expandable -); +import {FlatNode} from './element-property-resolver'; +import {getTreeFlattener} from './flatten'; +import {PropertyDataSource} from './property-data-source'; + +const flatTreeControl = + new FlatTreeControl((node) => node.level, (node) => node.expandable); describe('PropertyDataSource', () => { it('should detect changes in the collection', () => { const source = new PropertyDataSource( - { - foo: { - editable: true, - expandable: false, - preview: '42', - type: PropType.Number, - value: 42, + { + foo: { + editable: true, + expandable: false, + preview: '42', + type: PropType.Number, + value: 42, + }, }, - }, - getTreeFlattener(), - flatTreeControl, - { element: [1, 2, 3] }, - null as any - ); + getTreeFlattener(), flatTreeControl, {element: [1, 2, 3]}, null as any); source.update({ foo: { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts index 5e00f8e2306..3ca782f792d 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-data-source.ts @@ -1,16 +1,18 @@ -import { Descriptor, DirectivePosition, Events, MessageBus, Properties } from 'protocol'; -import { CollectionViewer, DataSource, SelectionChange } from '@angular/cdk/collections'; -import { BehaviorSubject, merge, Observable, Subscription } from 'rxjs'; -import { MatTreeFlattener } from '@angular/material/tree'; -import { FlatTreeControl } from '@angular/cdk/tree'; -import { map } from 'rxjs/operators'; -import { DefaultIterableDiffer, TrackByFunction } from '@angular/core'; -import { diff } from '../../diffing'; -import { FlatNode, Property } from './element-property-resolver'; -import { arrayifyProps } from './arrayify-props'; +import {CollectionViewer, DataSource, SelectionChange} from '@angular/cdk/collections'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {DefaultIterableDiffer, TrackByFunction} from '@angular/core'; +import {MatTreeFlattener} from '@angular/material/tree'; +import {Descriptor, DirectivePosition, Events, MessageBus, Properties} from 'protocol'; +import {BehaviorSubject, merge, Observable, Subscription} from 'rxjs'; +import {map} from 'rxjs/operators'; + +import {diff} from '../../diffing'; + +import {arrayifyProps} from './arrayify-props'; +import {FlatNode, Property} from './element-property-resolver'; const trackBy: TrackByFunction = (_: number, item: FlatNode) => - `#${item.prop.name}#${item.prop.descriptor.preview}#${item.level}`; + `#${item.prop.name}#${item.prop.descriptor.preview}#${item.level}`; export class PropertyDataSource extends DataSource { private _data = new BehaviorSubject([]); @@ -19,12 +21,10 @@ export class PropertyDataSource extends DataSource { private _differ = new DefaultIterableDiffer(trackBy); constructor( - props: { [prop: string]: Descriptor }, - private _treeFlattener: MatTreeFlattener, - private _treeControl: FlatTreeControl, - private _entityPosition: DirectivePosition, - private _messageBus: MessageBus - ) { + props: {[prop: string]: Descriptor}, + private _treeFlattener: MatTreeFlattener, + private _treeControl: FlatTreeControl, private _entityPosition: DirectivePosition, + private _messageBus: MessageBus) { super(); this._data.next(this._treeFlattener.flattenNodes(arrayifyProps(props))); } @@ -37,7 +37,7 @@ export class PropertyDataSource extends DataSource { return this._treeControl; } - update(props: { [prop: string]: Descriptor }): void { + update(props: {[prop: string]: Descriptor}): void { const newData = this._treeFlattener.flattenNodes(arrayifyProps(props)); diff(this._differ, this.data, newData); this._data.next(this.data); @@ -58,14 +58,14 @@ export class PropertyDataSource extends DataSource { }); this._subscriptions.push(s); - const changes = [collectionViewer.viewChange, this._treeControl.expansionModel.changed, this._data]; + const changes = + [collectionViewer.viewChange, this._treeControl.expansionModel.changed, this._data]; - return merge(...changes).pipe( - map(() => { - this._expandedData.next(this._treeFlattener.expandFlattenedNodes(this.data, this._treeControl)); - return this._expandedData.value; - }) - ); + return merge(...changes).pipe(map(() => { + this._expandedData.next( + this._treeFlattener.expandFlattenedNodes(this.data, this._treeControl)); + return this._expandedData.value; + })); } disconnect(): void { @@ -95,14 +95,15 @@ export class PropertyDataSource extends DataSource { this._messageBus.emit('getNestedProperties', [this._entityPosition, parentPath]); - this._messageBus.once('nestedProperties', (position: DirectivePosition, data: Properties, _path: string[]) => { - node.prop.descriptor.value = data.props; - this._treeControl.expand(node); - const props = arrayifyProps(data.props, node.prop); - const flatNodes = this._treeFlattener.flattenNodes(props); - flatNodes.forEach((f) => (f.level += node.level + 1)); - this.data.splice(index + 1, 0, ...flatNodes); - this._data.next(this.data); - }); + this._messageBus.once( + 'nestedProperties', (position: DirectivePosition, data: Properties, _path: string[]) => { + node.prop.descriptor.value = data.props; + this._treeControl.expand(node); + const props = arrayifyProps(data.props, node.prop); + const flatNodes = this._treeFlattener.flattenNodes(props); + flatNodes.forEach((f) => (f.level += node.level + 1)); + this.data.splice(index + 1, 0, ...flatNodes); + this._data.next(this.data); + }); } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-expanded-directive-properties.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-expanded-directive-properties.ts index a9fd3e4f088..59fa1f914ff 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-expanded-directive-properties.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/property-expanded-directive-properties.ts @@ -1,5 +1,6 @@ -import { Descriptor, NestedProp, PropType } from 'protocol'; -import { FlatNode } from './element-property-resolver'; +import {Descriptor, NestedProp, PropType} from 'protocol'; + +import {FlatNode} from './element-property-resolver'; export const getExpandedDirectiveProperties = (data: FlatNode[]): NestedProp[] => { const getChildren = (prop: Descriptor) => { @@ -14,7 +15,7 @@ export const getExpandedDirectiveProperties = (data: FlatNode[]): NestedProp[] = return []; }; - const getExpandedProperties = (props: { [name: string]: Descriptor }) => { + const getExpandedProperties = (props: {[name: string]: Descriptor}) => { return Object.keys(props).map(name => { return { name, @@ -23,7 +24,7 @@ export const getExpandedDirectiveProperties = (data: FlatNode[]): NestedProp[] = }); }; - const parents: { [name: string]: Descriptor } = {}; + const parents: {[name: string]: Descriptor} = {}; for (const node of data) { let prop = node.prop; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts index d5178148d8f..7d532a8aca8 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/component-metadata.component.ts @@ -1,7 +1,8 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { DirectivePropertyResolver } from '../property-resolver/directive-property-resolver'; -import { ElementPropertyResolver } from '../property-resolver/element-property-resolver'; -import { ComponentType } from 'protocol'; +import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; +import {ComponentType} from 'protocol'; + +import {DirectivePropertyResolver} from '../property-resolver/directive-property-resolver'; +import {ElementPropertyResolver} from '../property-resolver/element-property-resolver'; @Component({ selector: 'ng-component-metadata', @@ -16,21 +17,21 @@ export class ComponentMetadataComponent { viewEncapsulationModes = ['Emulated', 'Native', 'None', 'ShadowDom']; - get controller(): DirectivePropertyResolver | undefined { + get controller(): DirectivePropertyResolver|undefined { if (!this.currentSelectedComponent) { return; } return this._nestedProps.getDirectiveController(this.currentSelectedComponent.name); } - get viewEncapsulation(): string | undefined { + get viewEncapsulation(): string|undefined { const encapsulationIndex = this?.controller?.directiveViewEncapsulation; if (encapsulationIndex !== undefined) { return this.viewEncapsulationModes[encapsulationIndex]; } } - get changeDetectionStrategy(): string | undefined { + get changeDetectionStrategy(): string|undefined { const onPush = this?.controller?.directiveHasOnPushStrategy; return onPush ? 'OnPush' : onPush !== undefined ? 'Default' : undefined; } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts index e65e7123f2c..2ece811f5c7 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts @@ -1,5 +1,6 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; -import { IndexedNode } from '../directive-forest/index-forest'; +import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core'; + +import {IndexedNode} from '../directive-forest/index-forest'; @Component({ templateUrl: './property-tab-header.component.html', @@ -9,7 +10,7 @@ import { IndexedNode } from '../directive-forest/index-forest'; }) export class PropertyTabHeaderComponent { @Input() currentSelectedElement: IndexedNode; - @Input() currentDirectives: string[] | undefined; + @Input() currentDirectives: string[]|undefined; @Output() viewSource = new EventEmitter(); handleViewSource(event: MouseEvent): void { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts index 918d22ea25c..ccf1472dfcc 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts @@ -1,7 +1,8 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { IndexedNode } from '../directive-forest/index-forest'; -import { FlatNode } from '../property-resolver/element-property-resolver'; -import { DirectivePosition } from 'protocol'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {DirectivePosition} from 'protocol'; + +import {IndexedNode} from '../directive-forest/index-forest'; +import {FlatNode} from '../property-resolver/element-property-resolver'; @Component({ templateUrl: './property-tab.component.html', @@ -10,5 +11,5 @@ import { DirectivePosition } from 'protocol'; export class PropertyTabComponent { @Input() currentSelectedElement: IndexedNode; @Output() viewSource = new EventEmitter(); - @Output() inspect = new EventEmitter<{ node: FlatNode; directivePosition: DirectivePosition }>(); + @Output() inspect = new EventEmitter<{node: FlatNode; directivePosition: DirectivePosition}>(); } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts index 9bee7cf9812..bd80eb0519b 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.module.ts @@ -1,17 +1,22 @@ -import { NgModule } from '@angular/core'; -import { PropertyTabComponent } from './property-tab.component'; -import { CommonModule } from '@angular/common'; -import { MatButtonModule } from '@angular/material/button'; -import { MatExpansionModule } from '@angular/material/expansion'; -import { MatIconModule } from '@angular/material/icon'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { PropertyViewModule } from './property-view/property-view.module'; -import { ComponentMetadataComponent } from './component-metadata.component'; -import { PropertyTabHeaderComponent } from './property-tab-header.component'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; +import {MatExpansionModule} from '@angular/material/expansion'; +import {MatIconModule} from '@angular/material/icon'; +import {MatTooltipModule} from '@angular/material/tooltip'; + +import {ComponentMetadataComponent} from './component-metadata.component'; +import {PropertyTabHeaderComponent} from './property-tab-header.component'; +import {PropertyTabComponent} from './property-tab.component'; +import {PropertyViewModule} from './property-view/property-view.module'; @NgModule({ declarations: [PropertyTabComponent, PropertyTabHeaderComponent, ComponentMetadataComponent], - imports: [PropertyViewModule, CommonModule, MatButtonModule, MatExpansionModule, MatIconModule, MatTooltipModule], + imports: [ + PropertyViewModule, CommonModule, MatButtonModule, MatExpansionModule, MatIconModule, + MatTooltipModule + ], exports: [PropertyTabComponent], }) -export class PropertyTabModule {} +export class PropertyTabModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts index 97ff73c1a8a..aee75cd1dcf 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts @@ -1,16 +1,7 @@ -import { - AfterViewChecked, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, -} from '@angular/core'; +import {AfterViewChecked, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output,} from '@angular/core'; -type EditorType = string | number | boolean; -type EditorResult = EditorType | Array; +type EditorType = string|number|boolean; +type EditorResult = EditorType|Array; enum PropertyEditorState { Read, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts index dc2964fa860..2224c71435a 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts @@ -1,6 +1,7 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { PropType } from 'protocol'; -import { FlatNode } from '../../property-resolver/element-property-resolver'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {PropType} from 'protocol'; + +import {FlatNode} from '../../property-resolver/element-property-resolver'; @Component({ selector: 'ng-property-preview', @@ -12,6 +13,7 @@ export class PropertyPreviewComponent { @Output() inspect = new EventEmitter(); get isClickableProp(): boolean { - return this.node.prop.descriptor.type === PropType.Function || this.node.prop.descriptor.type === PropType.HTMLNode; + return this.node.prop.descriptor.type === PropType.Function || + this.node.prop.descriptor.type === PropType.HTMLNode; } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts index c797b1e9886..e3b2c53b822 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts @@ -1,7 +1,8 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { IndexedNode } from '../../directive-forest/index-forest'; -import { FlatNode } from '../../property-resolver/element-property-resolver'; -import { DirectivePosition } from 'protocol'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {DirectivePosition} from 'protocol'; + +import {IndexedNode} from '../../directive-forest/index-forest'; +import {FlatNode} from '../../property-resolver/element-property-resolver'; @Component({ templateUrl: './property-tab-body.component.html', @@ -9,10 +10,10 @@ import { DirectivePosition } from 'protocol'; styleUrls: ['./property-tab-body.component.scss'], }) export class PropertyTabBodyComponent { - @Input() currentSelectedElement: IndexedNode | null; - @Output() inspect = new EventEmitter<{ node: FlatNode; directivePosition: DirectivePosition }>(); + @Input() currentSelectedElement: IndexedNode|null; + @Output() inspect = new EventEmitter<{node: FlatNode; directivePosition: DirectivePosition}>(); - getCurrentDirectives(): string[] | undefined { + getCurrentDirectives(): string[]|undefined { if (!this.currentSelectedElement) { return; } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts index f7d4e9b095d..cb597391a11 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts @@ -1,8 +1,9 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { DirectivePropertyResolver, DirectiveTreeData } from '../../property-resolver/directive-property-resolver'; -import { FlatNode } from '../../property-resolver/element-property-resolver'; -import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; -import { DirectivePosition } from 'protocol'; +import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {DirectivePosition} from 'protocol'; + +import {DirectivePropertyResolver, DirectiveTreeData} from '../../property-resolver/directive-property-resolver'; +import {FlatNode} from '../../property-resolver/element-property-resolver'; @Component({ selector: 'ng-property-view-body', @@ -15,11 +16,14 @@ export class PropertyViewBodyComponent { @Input() directiveOutputControls: DirectiveTreeData; @Input() directiveStateControls: DirectiveTreeData; - @Output() inspect = new EventEmitter<{ node: FlatNode; directivePosition: DirectivePosition }>(); + @Output() inspect = new EventEmitter<{node: FlatNode; directivePosition: DirectivePosition}>(); categoryOrder = [0, 1, 2]; - get panels(): { title: string; hidden: boolean; controls: DirectiveTreeData; documentation: string, class: string }[] { + get panels(): { + title: string; hidden: boolean; controls: DirectiveTreeData; documentation: string, + class: string + }[] { return [ { title: '@Inputs', @@ -46,10 +50,11 @@ export class PropertyViewBodyComponent { } get controlsLoaded(): boolean { - return !!this.directiveStateControls && !!this.directiveOutputControls && !!this.directiveInputControls; + return !!this.directiveStateControls && !!this.directiveOutputControls && + !!this.directiveInputControls; } - updateValue({ node, newValue }: { node: FlatNode; newValue: any }): void { + updateValue({node, newValue}: {node: FlatNode; newValue: any}): void { this.controller.updateValue(node, newValue); } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts index 384ebe7a0de..aa71f098d29 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; @Component({ selector: 'ng-property-view-header', diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts index ee6ddb3d6fa..882fe0d4bf1 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts @@ -1,7 +1,8 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { PropertyDataSource } from '../../property-resolver/property-data-source'; -import { FlatNode } from '../../property-resolver/element-property-resolver'; -import { FlatTreeControl } from '@angular/cdk/tree'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; + +import {FlatNode} from '../../property-resolver/element-property-resolver'; +import {PropertyDataSource} from '../../property-resolver/property-data-source'; @Component({ selector: 'ng-property-view-tree', @@ -25,7 +26,7 @@ export class PropertyViewTreeComponent { } expand(node: FlatNode): void { - const { prop } = node; + const {prop} = node; if (!prop.descriptor.expandable) { return; } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts index 60fa7081355..2d9225670e7 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts @@ -1,7 +1,8 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { DirectivePropertyResolver, DirectiveTreeData } from '../../property-resolver/directive-property-resolver'; -import { ElementPropertyResolver, FlatNode } from '../../property-resolver/element-property-resolver'; -import { DirectivePosition } from 'protocol'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {DirectivePosition} from 'protocol'; + +import {DirectivePropertyResolver, DirectiveTreeData} from '../../property-resolver/directive-property-resolver'; +import {ElementPropertyResolver, FlatNode} from '../../property-resolver/element-property-resolver'; @Component({ selector: 'ng-property-view', @@ -10,23 +11,23 @@ import { DirectivePosition } from 'protocol'; }) export class PropertyViewComponent { @Input() directive: string; - @Output() inspect = new EventEmitter<{ node: FlatNode; directivePosition: DirectivePosition }>(); + @Output() inspect = new EventEmitter<{node: FlatNode; directivePosition: DirectivePosition}>(); constructor(private _nestedProps: ElementPropertyResolver) {} - get controller(): DirectivePropertyResolver | undefined { + get controller(): DirectivePropertyResolver|undefined { return this._nestedProps.getDirectiveController(this.directive); } - get directiveInputControls(): DirectiveTreeData | void { + get directiveInputControls(): DirectiveTreeData|void { return this.controller?.directiveInputControls; } - get directiveOutputControls(): DirectiveTreeData | void { + get directiveOutputControls(): DirectiveTreeData|void { return this.controller?.directiveOutputControls; } - get directiveStateControls(): DirectiveTreeData | void { + get directiveStateControls(): DirectiveTreeData|void { return this.controller?.directiveStateControls; } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts index 34069f43297..7865b272848 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.module.ts @@ -1,20 +1,20 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { PropertyViewBodyComponent } from './property-view-body.component'; -import { PropertyViewHeaderComponent } from './property-view-header.component'; -import { PropertyViewTreeComponent } from './property-view-tree.component'; -import { PropertyViewComponent } from './property-view.component'; -import { PropertyTabBodyComponent } from './property-tab-body.component'; -import { PropertyPreviewComponent } from './property-preview.component'; -import { PropertyEditorComponent } from './property-editor.component'; +import {DragDropModule} from '@angular/cdk/drag-drop'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {MatExpansionModule} from '@angular/material/expansion'; +import {MatIconModule} from '@angular/material/icon'; +import {MatToolbarModule} from '@angular/material/toolbar'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {MatTreeModule} from '@angular/material/tree'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { MatIconModule } from '@angular/material/icon'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatExpansionModule } from '@angular/material/expansion'; -import { MatTreeModule } from '@angular/material/tree'; -import { DragDropModule } from '@angular/cdk/drag-drop'; +import {PropertyEditorComponent} from './property-editor.component'; +import {PropertyPreviewComponent} from './property-preview.component'; +import {PropertyTabBodyComponent} from './property-tab-body.component'; +import {PropertyViewBodyComponent} from './property-view-body.component'; +import {PropertyViewHeaderComponent} from './property-view-header.component'; +import {PropertyViewTreeComponent} from './property-view-tree.component'; +import {PropertyViewComponent} from './property-view.component'; @NgModule({ declarations: [ @@ -46,4 +46,5 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; PropertyEditorComponent, ], }) -export class PropertyViewModule {} +export class PropertyViewModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts index e555f4d1cf7..5ba41a2ffd1 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts @@ -1,6 +1,7 @@ -import { Subject } from 'rxjs'; -import { Injectable } from '@angular/core'; -import { toISO8601Compact } from '../../vendor/chromium/date-utilities'; +import {Injectable} from '@angular/core'; +import {Subject} from 'rxjs'; + +import {toISO8601Compact} from '../../vendor/chromium/date-utilities'; @Injectable({ providedIn: 'root', @@ -14,7 +15,7 @@ export class FileApiService { try { this.uploadedData.next(JSON.parse((event.target as any).result)); } catch (e) { - this.uploadedData.next({ error: e }); + this.uploadedData.next({error: e}); } (parentEvent.target as any).value = ''; }; @@ -24,7 +25,8 @@ export class FileApiService { saveObjectAsJSON(object: object): void { const downloadLink = document.createElement('a'); downloadLink.download = `NgDevTools-Profile-${toISO8601Compact(new Date())}.json`; - downloadLink.href = URL.createObjectURL(new Blob([JSON.stringify(object)], { type: 'application/json' })); + downloadLink.href = + URL.createObjectURL(new Blob([JSON.stringify(object)], {type: 'application/json'})); downloadLink.click(); setTimeout(() => URL.revokeObjectURL(downloadLink.href)); } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts index 410471cb95b..d095a31b3ba 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts @@ -1,11 +1,11 @@ -import { Component, Inject } from '@angular/core'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import {Component, Inject} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; interface DialogData { profilerVersion?: number; importedVersion?: number; errorMessage?: string; - status: 'ERROR' | 'INVALID_VERSION'; + status: 'ERROR'|'INVALID_VERSION'; } @Component({ @@ -15,7 +15,6 @@ interface DialogData { }) export class ProfilerImportDialogComponent { constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: DialogData - ) {} + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: DialogData) {} } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts index 55560d5fc53..c2d63f7d1d8 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts @@ -1,11 +1,12 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { MessageBus, Events, ProfilerFrame } from 'protocol'; -import { FileApiService } from './file-api-service'; -import { MatDialog } from '@angular/material/dialog'; -import { ProfilerImportDialogComponent } from './profiler-import-dialog.component'; -import { Subject, Subscription } from 'rxjs'; +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {MatDialog} from '@angular/material/dialog'; +import {Events, MessageBus, ProfilerFrame} from 'protocol'; +import {Subject, Subscription} from 'rxjs'; -type State = 'idle' | 'recording' | 'visualizing'; +import {FileApiService} from './file-api-service'; +import {ProfilerImportDialogComponent} from './profiler-import-dialog.component'; + +type State = 'idle'|'recording'|'visualizing'; const SUPPORTED_VERSIONS = [1]; const PROFILER_VERSION = 1; @@ -25,10 +26,8 @@ export class ProfilerComponent implements OnInit, OnDestroy { private _buffer: ProfilerFrame[] = []; constructor( - private _fileApiService: FileApiService, - private _messageBus: MessageBus, - public dialog: MatDialog - ) {} + private _fileApiService: FileApiService, private _messageBus: MessageBus, + public dialog: MatDialog) {} startRecording(): void { this.state = 'recording'; @@ -60,7 +59,7 @@ export class ProfilerComponent implements OnInit, OnDestroy { console.error(importedFile.error); this.dialog.open(ProfilerImportDialogComponent, { width: '600px', - data: { status: 'ERROR', errorMessage: importedFile.error }, + data: {status: 'ERROR', errorMessage: importedFile.error}, }); return; @@ -69,7 +68,11 @@ export class ProfilerComponent implements OnInit, OnDestroy { if (!SUPPORTED_VERSIONS.includes(importedFile.version)) { const processDataDialog = this.dialog.open(ProfilerImportDialogComponent, { width: '600px', - data: { importedVersion: importedFile.version, profilerVersion: PROFILER_VERSION, status: 'INVALID_VERSION' }, + data: { + importedVersion: importedFile.version, + profilerVersion: PROFILER_VERSION, + status: 'INVALID_VERSION' + }, }); processDataDialog.afterClosed().subscribe((result) => { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts index 6cac7b8ece0..7a7c8e0c439 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.module.ts @@ -1,16 +1,16 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MatSelectModule } from '@angular/material/select'; -import { MatDialogModule } from '@angular/material/dialog'; -import { FormsModule } from '@angular/forms'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCardModule} from '@angular/material/card'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatIconModule} from '@angular/material/icon'; +import {MatSelectModule} from '@angular/material/select'; +import {MatTooltipModule} from '@angular/material/tooltip'; -import { ProfilerComponent } from './profiler.component'; -import { TimelineModule } from './timeline/timeline.module'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; -import { ProfilerImportDialogComponent } from './profiler-import-dialog.component'; -import { MatIconModule } from '@angular/material/icon'; -import { MatTooltipModule } from '@angular/material/tooltip'; +import {ProfilerImportDialogComponent} from './profiler-import-dialog.component'; +import {ProfilerComponent} from './profiler.component'; +import {TimelineModule} from './timeline/timeline.module'; @NgModule({ declarations: [ProfilerComponent, ProfilerImportDialogComponent], @@ -28,4 +28,5 @@ import { MatTooltipModule } from '@angular/material/tooltip'; exports: [ProfilerComponent], entryComponents: [ProfilerImportDialogComponent], }) -export class ProfilerModule {} +export class ProfilerModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.spec.ts index 3915cb0ca14..d550b4a54f3 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.spec.ts @@ -1,4 +1,4 @@ -import { createFilter, parseFilter } from './filter'; +import {createFilter, parseFilter} from './filter'; describe('filtering', () => { describe('parsing', () => { @@ -77,191 +77,163 @@ describe('filtering', () => { describe('filtering', () => { it('should filter results with a source query', () => { const filter = createFilter('source:click'); - expect( - filter({ - frame: { - directives: [], - duration: 10, - source: 'click', - }, - style: {}, - toolTip: '', - }) - ).toBeTrue(); + expect(filter({ + frame: { + directives: [], + duration: 10, + source: 'click', + }, + style: {}, + toolTip: '', + })).toBeTrue(); - expect( - filter({ - frame: { - directives: [], - duration: 10, - source: 'mouseenter', - }, - style: {}, - toolTip: '', - }) - ).toBeFalse(); + expect(filter({ + frame: { + directives: [], + duration: 10, + source: 'mouseenter', + }, + style: {}, + toolTip: '', + })).toBeFalse(); }); it('should filter results with a duration query', () => { const filter1 = createFilter('duration:>10ms'); - expect( - filter1({ - frame: { - directives: [], - duration: 10, - source: 'click', - }, - style: {}, - toolTip: '', - }) - ).toBeFalse(); + expect(filter1({ + frame: { + directives: [], + duration: 10, + source: 'click', + }, + style: {}, + toolTip: '', + })).toBeFalse(); - expect( - filter1({ - frame: { - directives: [], - duration: 15, - source: 'mouseenter', - }, - style: {}, - toolTip: '', - }) - ).toBeTrue(); + expect(filter1({ + frame: { + directives: [], + duration: 15, + source: 'mouseenter', + }, + style: {}, + toolTip: '', + })).toBeTrue(); const filter2 = createFilter('duration:=10ms'); - expect( - filter2({ - frame: { - directives: [], - duration: 11, - source: 'mouseenter', - }, - style: {}, - toolTip: '', - }) - ).toBeFalse(); - expect( - filter2({ - frame: { - directives: [], - duration: 10, - source: 'mouseenter', - }, - style: {}, - toolTip: '', - }) - ).toBeTrue(); + expect(filter2({ + frame: { + directives: [], + duration: 11, + source: 'mouseenter', + }, + style: {}, + toolTip: '', + })).toBeFalse(); + expect(filter2({ + frame: { + directives: [], + duration: 10, + source: 'mouseenter', + }, + style: {}, + toolTip: '', + })).toBeTrue(); }); it('should work with composite selectors', () => { const filter = createFilter('duration:>10ms source: click'); - expect( - filter({ - frame: { - directives: [], - duration: 10, - source: 'click', - }, - style: {}, - toolTip: '', - }) - ).toBeFalse(); + expect(filter({ + frame: { + directives: [], + duration: 10, + source: 'click', + }, + style: {}, + toolTip: '', + })).toBeFalse(); - expect( - filter({ - frame: { - directives: [], - duration: 15, - source: 'mouseenter', - }, - style: {}, - toolTip: '', - }) - ).toBeFalse(); + expect(filter({ + frame: { + directives: [], + duration: 15, + source: 'mouseenter', + }, + style: {}, + toolTip: '', + })).toBeFalse(); - expect( - filter({ - frame: { - directives: [], - duration: 15, - source: 'click', - }, - style: {}, - toolTip: '', - }) - ).toBeTrue(); + expect(filter({ + frame: { + directives: [], + duration: 15, + source: 'click', + }, + style: {}, + toolTip: '', + })).toBeTrue(); }); it('should work with invalid arguments', () => { const filter = createFilter('duration:>ms'); - expect( - filter({ - frame: { - directives: [], - duration: 15, - source: 'click', - }, - style: {}, - toolTip: '', - }) - ).toBeTrue(); + expect(filter({ + frame: { + directives: [], + duration: 15, + source: 'click', + }, + style: {}, + toolTip: '', + })).toBeTrue(); }); it('should work with negation', () => { const filter = createFilter('!source:message'); - expect( - filter({ - frame: { - directives: [], - duration: 15, - source: 'message', - }, - style: {}, - toolTip: '', - }) - ).toBeFalse(); + expect(filter({ + frame: { + directives: [], + duration: 15, + source: 'message', + }, + style: {}, + toolTip: '', + })).toBeFalse(); }); it('should work with negation and composite expressions', () => { const filter = createFilter('!duration:=15 !source:message source:click'); - expect( - filter({ - frame: { - directives: [], - duration: 15, - source: 'click', - }, - style: {}, - toolTip: '', - }) - ).toBeFalse(); + expect(filter({ + frame: { + directives: [], + duration: 15, + source: 'click', + }, + style: {}, + toolTip: '', + })).toBeFalse(); - expect( - filter({ - frame: { - directives: [], - duration: 10, - source: 'message', - }, - style: {}, - toolTip: '', - }) - ).toBeFalse(); + expect(filter({ + frame: { + directives: [], + duration: 10, + source: 'message', + }, + style: {}, + toolTip: '', + })).toBeFalse(); - expect( - filter({ - frame: { - directives: [], - duration: 14, - source: 'click', - }, - style: {}, - toolTip: '', - }) - ).toBeTrue(); + expect(filter({ + frame: { + directives: [], + duration: 14, + source: 'click', + }, + style: {}, + toolTip: '', + })).toBeTrue(); }); }); }); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.ts index 197f5ab0a64..9c56d31dedf 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/filter.ts @@ -1,5 +1,6 @@ -import { ProfilerFrame } from 'protocol'; -import { GraphNode } from './record-formatter/record-formatter'; +import {ProfilerFrame} from 'protocol'; + +import {GraphNode} from './record-formatter/record-formatter'; export type Filter = (nodes: GraphNode) => boolean; @@ -7,13 +8,13 @@ export const noopFilter = (_: GraphNode) => true; interface Query { readonly name: QueryType; - parseArguments(args: string[]): Arguments | undefined; + parseArguments(args: string[]): Arguments|undefined; apply(node: ProfilerFrame, args: Arguments): boolean; } -type Operator = '>' | '<' | '=' | '<=' | '>='; +type Operator = '>'|'<'|'='|'<='|'>='; -const ops: { [operator in Operator]: (a: number, b: number) => boolean } = { +const ops: {[operator in Operator]: (a: number, b: number) => boolean} = { '>'(a: number, b: number): boolean { return a > b; }, @@ -39,12 +40,12 @@ const enum QueryType { Source = 'source', } -type QueryArguments = DurationArgument | SourceArgument; +type QueryArguments = DurationArgument|SourceArgument; const operatorRe = /^(>=|<=|=|<|>|)/; class DurationQuery implements Query { readonly name = QueryType.Duration; - parseArguments([arg]: string[]): DurationArgument | undefined { + parseArguments([arg]: string[]): DurationArgument|undefined { arg = arg.trim(); const operator = (arg.match(operatorRe) ?? [null])[0]; if (!operator) { @@ -73,14 +74,15 @@ class SourceQuery implements Query { } } -const queryMap: { [query in QueryType]: Query } = [new DurationQuery(), new SourceQuery()].reduce((map, query) => { - map[query.name] = query; - return map; -}, {} as { [query in QueryType]: Query }); +const queryMap: {[query in QueryType]: Query} = + [new DurationQuery(), new SourceQuery()].reduce((map, query) => { + map[query.name] = query; + return map; + }, {} as {[query in QueryType]: Query}); const queryRe = new RegExp(`!?\s*(${QueryType.Duration}|${QueryType.Source})$`, 'g'); -type Predicate = true | false; +type Predicate = true|false; type QueryAST = [Predicate, QueryType, QueryArguments]; /** diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts index 66b908da3d3..327640fd5e0 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts @@ -1,8 +1,10 @@ -import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, OnDestroy, OnInit } from '@angular/core'; -import { GraphNode } from './record-formatter/record-formatter'; -import { Observable, Subscription } from 'rxjs'; -import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; -import { TabUpdate } from '../../tab-update/index'; +import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling'; +import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core'; +import {Observable, Subscription} from 'rxjs'; + +import {TabUpdate} from '../../tab-update/index'; + +import {GraphNode} from './record-formatter/record-formatter'; const ITEM_WIDTH = 30; @@ -13,21 +15,21 @@ const ITEM_WIDTH = 30; }) export class FrameSelectorComponent implements OnInit, OnDestroy { @ViewChild('barContainer') barContainer: ElementRef; - @Input() set graphData$(graphData: Observable) { + @Input() + set graphData$(graphData: Observable) { this._graphData$ = graphData; - this._graphDataSubscription = this._graphData$.subscribe((items) => - setTimeout(() => { - this.frameCount = items.length; - this.viewport.scrollToIndex(items.length); - }) - ); + this._graphDataSubscription = + this._graphData$.subscribe((items) => setTimeout(() => { + this.frameCount = items.length; + this.viewport.scrollToIndex(items.length); + })); } get graphData$(): Observable { return this._graphData$; } - @Output() selectFrames = new EventEmitter<{ indexes: number[] }>(); + @Output() selectFrames = new EventEmitter<{indexes: number[]}>(); @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport; @@ -36,7 +38,7 @@ export class FrameSelectorComponent implements OnInit, OnDestroy { selectedFrameIndexes = new Set(); frameCount: number; - private _viewportScrollState = { scrollLeft: 0, xCoordinate: 0, isDragScrolling: false }; + private _viewportScrollState = {scrollLeft: 0, xCoordinate: 0, isDragScrolling: false}; get itemWidth(): number { return ITEM_WIDTH; @@ -80,7 +82,7 @@ export class FrameSelectorComponent implements OnInit, OnDestroy { const sortedIndexes = indexArray.sort((a, b) => a - b); const groups: number[][] = []; - let prev: number | null = null; + let prev: number|null = null; for (const index of sortedIndexes) { // First iteration: create initial group and set prev variable to the first index @@ -100,38 +102,41 @@ export class FrameSelectorComponent implements OnInit, OnDestroy { prev = index; } - return groups - .filter((group) => group.length > 0) - .map((group) => (group.length === 1 ? group[0] + 1 : `${group[0] + 1}-${group[group.length - 1] + 1}`)) - .join(', '); + return groups.filter((group) => group.length > 0) + .map( + (group) => + (group.length === 1 ? group[0] + 1 : + `${group[0] + 1}-${group[group.length - 1] + 1}`)) + .join(', '); } move(value: number): void { const newVal = this.startFrameIndex + value; this.selectedFrameIndexes = new Set([newVal]); if (newVal > -1 && newVal < this.frameCount) { - this._selectFrames({ indexes: this.selectedFrameIndexes }); + this._selectFrames({indexes: this.selectedFrameIndexes}); } } - private _selectFrames({ indexes }: { indexes: Set }): void { + private _selectFrames({indexes}: {indexes: Set}): void { const sortedIndexes = [...indexes].sort((a, b) => a - b); this.startFrameIndex = sortedIndexes[0]; this.endFrameIndex = sortedIndexes[sortedIndexes.length - 1]; this._ensureVisible(this.startFrameIndex); - this.selectFrames.emit({ indexes: sortedIndexes }); + this.selectFrames.emit({indexes: sortedIndexes}); } handleFrameSelection(idx: number, event: MouseEvent): void { - const { shiftKey, ctrlKey, metaKey } = event; + const {shiftKey, ctrlKey, metaKey} = event; if (shiftKey) { const [start, end] = [Math.min(this.startFrameIndex, idx), Math.max(this.endFrameIndex, idx)]; - this.selectedFrameIndexes = new Set(Array.from(Array(end - start + 1), (_, index) => index + start)); + this.selectedFrameIndexes = + new Set(Array.from(Array(end - start + 1), (_, index) => index + start)); } else if (ctrlKey || metaKey) { if (this.selectedFrameIndexes.has(idx)) { if (this.selectedFrameIndexes.size === 1) { - return; // prevent deselection when only one frame is selected + return; // prevent deselection when only one frame is selected } this.selectedFrameIndexes.delete(idx); @@ -142,7 +147,7 @@ export class FrameSelectorComponent implements OnInit, OnDestroy { this.selectedFrameIndexes = new Set([idx]); } - this._selectFrames({ indexes: this.selectedFrameIndexes }); + this._selectFrames({indexes: this.selectedFrameIndexes}); } private _ensureVisible(index: number): void { @@ -156,9 +161,9 @@ export class FrameSelectorComponent implements OnInit, OnDestroy { const right = left + scrollParent.offsetWidth; const itemLeft = index * this.itemWidth; if (itemLeft < left) { - scrollParent.scrollTo({ left: itemLeft }); + scrollParent.scrollTo({left: itemLeft}); } else if (right < itemLeft + this.itemWidth) { - scrollParent.scrollTo({ left: itemLeft - scrollParent.offsetWidth + this.itemWidth }); + scrollParent.scrollTo({left: itemLeft - scrollParent.offsetWidth + this.itemWidth}); } } @@ -181,6 +186,7 @@ export class FrameSelectorComponent implements OnInit, OnDestroy { const dragScrollSpeed = 2; const dx = event.clientX - this._viewportScrollState.xCoordinate; - this.viewport.elementRef.nativeElement.scrollLeft = this._viewportScrollState.scrollLeft - dx * dragScrollSpeed; + this.viewport.elementRef.nativeElement.scrollLeft = + this._viewportScrollState.scrollLeft - dx * dragScrollSpeed; } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter/bargraph-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter/bargraph-formatter.ts index 1122680ed48..8c9edef4fa0 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter/bargraph-formatter.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter/bargraph-formatter.ts @@ -1,6 +1,7 @@ -import { RecordFormatter } from '../record-formatter'; -import { ElementProfile, ProfilerFrame } from 'protocol'; -import { memo } from '../../../../../vendor/memo-decorator'; +import {ElementProfile, ProfilerFrame} from 'protocol'; + +import {memo} from '../../../../../vendor/memo-decorator'; +import {RecordFormatter} from '../record-formatter'; export interface BargraphNode { parents: ElementProfile[]; @@ -10,14 +11,15 @@ export interface BargraphNode { } export class BarGraphFormatter extends RecordFormatter { - @memo({ cache: new WeakMap() }) + @memo({cache: new WeakMap()}) formatFrame(frame: ProfilerFrame): BargraphNode[] { const result: BargraphNode[] = []; this.addFrame(result, frame.directives); return result.filter((element) => element.value > 0).sort((a, b) => b.value - a.value); } - addFrame(nodes: BargraphNode[], elements: ElementProfile[], parents: ElementProfile[] = []): number { + addFrame(nodes: BargraphNode[], elements: ElementProfile[], parents: ElementProfile[] = []): + number { let timeSpent = 0; elements.forEach((element) => { // Possibly undefined because of diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.spec.ts index 254f820a84f..52e01b3ed0f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.spec.ts @@ -1,11 +1,7 @@ -import { - NESTED_FORMATTED_FLAMEGRAPH_RECORD, - NESTED_RECORD, - SIMPLE_FORMATTED_FLAMEGRAPH_RECORD, - SIMPLE_RECORD, -} from '../record-formatter-spec-constants'; -import { FlamegraphFormatter, FlamegraphNode } from './flamegraph-formatter'; -import { AppEntry } from '../record-formatter'; +import {AppEntry} from '../record-formatter'; +import {NESTED_FORMATTED_FLAMEGRAPH_RECORD, NESTED_RECORD, SIMPLE_FORMATTED_FLAMEGRAPH_RECORD, SIMPLE_RECORD,} from '../record-formatter-spec-constants'; + +import {FlamegraphFormatter, FlamegraphNode} from './flamegraph-formatter'; const formatter = new FlamegraphFormatter(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.ts index 26749fef92b..b55f37a9865 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/flamegraph-formatter.ts @@ -1,6 +1,7 @@ -import { RecordFormatter } from '../record-formatter'; -import { ElementProfile, ProfilerFrame } from 'protocol'; -import { Theme } from '../../../../../theme-service'; +import {ElementProfile, ProfilerFrame} from 'protocol'; + +import {Theme} from '../../../../../theme-service'; +import {RecordFormatter} from '../record-formatter'; export interface FlamegraphNode { value: number; @@ -29,14 +30,17 @@ export class FlamegraphFormatter extends RecordFormatter { }; if (showChangeDetection) { - result.color = theme === 'dark-theme' ? CHANGE_DETECTION_COLOR_DARK : CHANGE_DETECTION_COLOR_LIGHT; + result.color = + theme === 'dark-theme' ? CHANGE_DETECTION_COLOR_DARK : CHANGE_DETECTION_COLOR_LIGHT; } this.addFrame(result.children, frame.directives, showChangeDetection, theme); return result; } - addFrame(nodes: FlamegraphNode[], elements: ElementProfile[], showChangeDetection?: boolean, theme?: Theme): number { + addFrame( + nodes: FlamegraphNode[], elements: ElementProfile[], showChangeDetection?: boolean, + theme?: Theme): number { let timeSpent = 0; elements.forEach((element) => { // Possibly undefined because of @@ -56,7 +60,7 @@ export class FlamegraphFormatter extends RecordFormatter { }; if (showChangeDetection) { const CHANGE_DETECTION_COLOR = - theme === 'dark-theme' ? CHANGE_DETECTION_COLOR_DARK : CHANGE_DETECTION_COLOR_LIGHT; + theme === 'dark-theme' ? CHANGE_DETECTION_COLOR_DARK : CHANGE_DETECTION_COLOR_LIGHT; node.color = changeDetected ? CHANGE_DETECTION_COLOR : NO_CHANGE_DETECTION_COLOR; } timeSpent += this.addFrame(node.children, element.children, showChangeDetection, theme); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.spec.ts index 8af844a9d36..5e5690db6d0 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.spec.ts @@ -1,5 +1,6 @@ -import { mergeFrames } from './frame-merger'; -import { ProfilerFrame } from 'protocol'; +import {ProfilerFrame} from 'protocol'; + +import {mergeFrames} from './frame-merger'; describe('mergeFrames', () => { it('should work with empty frames', () => { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.ts index 8508e5e6a73..41cf9ec4531 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/frame-merger.ts @@ -1,6 +1,6 @@ -import { ProfilerFrame, DirectiveProfile, ElementProfile } from 'protocol'; +import {DirectiveProfile, ElementProfile, ProfilerFrame} from 'protocol'; -const mergeProperty = (mergeInProp: number | undefined, value: number | undefined) => { +const mergeProperty = (mergeInProp: number|undefined, value: number|undefined) => { if (mergeInProp === undefined) { return value; } @@ -43,7 +43,7 @@ const mergeFrame = (mergeIn: ProfilerFrame, second: ProfilerFrame) => { mergeDirectives(mergeIn.directives, second.directives); }; -export const mergeFrames = (frames: ProfilerFrame[]): ProfilerFrame | null => { +export const mergeFrames = (frames: ProfilerFrame[]): ProfilerFrame|null => { if (!frames || !frames.length) { return null; } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter-spec-constants.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter-spec-constants.ts index d77021248c2..a69f14a9ec6 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter-spec-constants.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter-spec-constants.ts @@ -1,4 +1,4 @@ -import { FlamegraphNode } from './flamegraph-formatter'; +import {FlamegraphNode} from './flamegraph-formatter'; export const SIMPLE_RECORD = [ { @@ -33,7 +33,7 @@ export const SIMPLE_RECORD = [ isElement: false, name: 'NgForOf', changeDetected: false, - lifecycle: { ngDoCheck: 7 }, + lifecycle: {ngDoCheck: 7}, outputs: {}, changeDetection: 0, }, @@ -162,7 +162,7 @@ export const NESTED_RECORD = [ isComponent: false, isElement: false, name: 'NgForOf', - lifecycle: { ngDoCheck: 7 }, + lifecycle: {ngDoCheck: 7}, outputs: {}, changeDetection: 0, }, @@ -326,9 +326,15 @@ export const NESTED_FORMATTED_FLAMEGRAPH_RECORD: FlamegraphNode[] = [ changeDetected: true, children: [], instances: 1, - original: - NESTED_RECORD[0].children[0].children[0].children[0].children[0].children[0] - .children[0].children[0].children[0], + original: NESTED_RECORD[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0], }, { value: 0, @@ -336,9 +342,15 @@ export const NESTED_FORMATTED_FLAMEGRAPH_RECORD: FlamegraphNode[] = [ changeDetected: true, children: [], instances: 1, - original: - NESTED_RECORD[0].children[0].children[0].children[0].children[0].children[0] - .children[0].children[0].children[1], + original: NESTED_RECORD[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[1], }, { value: 0, @@ -346,24 +358,38 @@ export const NESTED_FORMATTED_FLAMEGRAPH_RECORD: FlamegraphNode[] = [ changeDetected: true, children: [], instances: 1, - original: - NESTED_RECORD[0].children[0].children[0].children[0].children[0].children[0] - .children[0].children[0].children[2], + original: NESTED_RECORD[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[2], }, ], instances: 1, - original: - NESTED_RECORD[0].children[0].children[0].children[0].children[0].children[0] - .children[0].children[0], + original: NESTED_RECORD[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0] + .children[0], }, ], instances: 1, original: - NESTED_RECORD[0].children[0].children[0].children[0].children[0].children[0].children[0], + NESTED_RECORD[0].children[0].children[0].children[0].children + [0].children + [0].children[0], }, ], instances: 1, - original: NESTED_RECORD[0].children[0].children[0].children[0].children[0].children[0], + original: NESTED_RECORD[0].children[0].children[0].children[0].children + [0].children[0], }, ], instances: 1, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.spec.ts index a19a8c88822..71c4f724e37 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.spec.ts @@ -1,5 +1,6 @@ -import { ElementProfile, ProfilerFrame } from 'protocol'; -import { RecordFormatter } from './record-formatter'; +import {ElementProfile, ProfilerFrame} from 'protocol'; + +import {RecordFormatter} from './record-formatter'; class MockFormatter extends RecordFormatter { addFrame(nodes: any[], elements: ElementProfile[]): void { @@ -19,7 +20,13 @@ describe('getValue cases', () => { it('calculates value with no lifecycle hooks', () => { element = { children: [], - directives: [{ changeDetection: 10, isElement: false, isComponent: true, lifecycle: {}, name: 'AppComponent' }], + directives: [{ + changeDetection: 10, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent' + }], }; expect(formatter.getValue(element)).toBe(10); }); @@ -28,7 +35,13 @@ describe('getValue cases', () => { element = { children: [], directives: [ - { isComponent: false, isElement: false, name: 'NgForOf', lifecycle: { ngDoCheck: 5 }, changeDetection: 0 }, + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: {ngDoCheck: 5}, + changeDetection: 0 + }, ], }; expect(formatter.getValue(element)).toBe(5); @@ -38,7 +51,13 @@ describe('getValue cases', () => { element = { children: [], directives: [ - { isComponent: false, isElement: false, name: 'NgForOf', lifecycle: { ngDoCheck: 5 }, changeDetection: 10 }, + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: {ngDoCheck: 5}, + changeDetection: 10 + }, ], }; expect(formatter.getValue(element)).toBe(15); @@ -52,7 +71,7 @@ describe('getValue cases', () => { isComponent: false, isElement: false, name: 'NgForOf', - lifecycle: { ngDoCheck: 5, ngAfterViewInit: 100 }, + lifecycle: {ngDoCheck: 5, ngAfterViewInit: 100}, changeDetection: 10, }, ], @@ -110,7 +129,14 @@ describe('getLabel cases', () => { outputs: {}, changeDetection: 0, }, - { changeDetection: 0, isElement: false, isComponent: true, lifecycle: {}, outputs: {}, name: 'TodoComponent' }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + outputs: {}, + name: 'TodoComponent' + }, ], }; expect(formatter.getLabel(element)).toBe('TodoComponent[TooltipDirective]'); @@ -136,7 +162,14 @@ describe('getLabel cases', () => { outputs: {}, changeDetection: 0, }, - { changeDetection: 0, isElement: false, isComponent: true, lifecycle: {}, outputs: {}, name: 'TodoComponent' }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + outputs: {}, + name: 'TodoComponent' + }, ], }; expect(formatter.getLabel(element)).toBe('TodoComponent[TooltipDirective, RandomDirective]'); @@ -147,7 +180,13 @@ describe('getDirectiveValue cases', () => { let directive; it('calculates value with no lifecycle hooks', () => { - directive = { changeDetection: 10, isElement: false, isComponent: true, lifecycle: {}, name: 'AppComponent' }; + directive = { + changeDetection: 10, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent' + }; expect(formatter.getDirectiveValue(directive)).toBe(10); }); @@ -156,7 +195,7 @@ describe('getDirectiveValue cases', () => { isComponent: false, isElement: false, name: 'NgForOf', - lifecycle: { ngDoCheck: 5 }, + lifecycle: {ngDoCheck: 5}, changeDetection: 0, }; expect(formatter.getDirectiveValue(directive)).toBe(5); @@ -167,7 +206,7 @@ describe('getDirectiveValue cases', () => { isComponent: false, isElement: false, name: 'NgForOf', - lifecycle: { ngDoCheck: 5 }, + lifecycle: {ngDoCheck: 5}, changeDetection: 10, }; expect(formatter.getDirectiveValue(directive)).toBe(15); @@ -178,7 +217,7 @@ describe('getDirectiveValue cases', () => { isComponent: false, isElement: false, name: 'NgForOf', - lifecycle: { ngDoCheck: 5, ngAfterViewInit: 100 }, + lifecycle: {ngDoCheck: 5, ngAfterViewInit: 100}, changeDetection: 10, }; expect(formatter.getDirectiveValue(directive)).toBe(115); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts index 6b59f349643..2cacc4cc113 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts @@ -1,4 +1,4 @@ -import { ElementProfile, DirectiveProfile, ProfilerFrame } from 'protocol'; +import {DirectiveProfile, ElementProfile, ProfilerFrame} from 'protocol'; export interface TimelineView { timeline: AppEntry[]; @@ -18,14 +18,13 @@ export interface GraphNode { export abstract class RecordFormatter { abstract formatFrame(frame: ProfilerFrame): T; - abstract addFrame(nodes: T | T[], elements: ElementProfile[]): number | void; + abstract addFrame(nodes: T|T[], elements: ElementProfile[]): number|void; getLabel(element: ElementProfile): string { - const name = element.directives - .filter((d) => d.isComponent) - .map((c) => c.name) - .join(', '); - const attributes = [...new Set(element.directives.filter((d) => !d.isComponent).map((d) => d.name))].join(', '); + const name = element.directives.filter((d) => d.isComponent).map((c) => c.name).join(', '); + const attributes = + [...new Set(element.directives.filter((d) => !d.isComponent).map((d) => d.name))].join( + ', '); return attributes === '' ? name : `${name}[${attributes}]`; } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.spec.ts index 8df8d64e806..97da3fa73ef 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.spec.ts @@ -1,6 +1,7 @@ -import { SIMPLE_FORMATTED_TREE_MAP_RECORD, SIMPLE_RECORD } from '../record-formatter-spec-constants'; -import { AppEntry } from '../record-formatter'; -import { TreeMapFormatter, TreeMapNode } from './tree-map-formatter'; +import {AppEntry} from '../record-formatter'; +import {SIMPLE_FORMATTED_TREE_MAP_RECORD, SIMPLE_RECORD} from '../record-formatter-spec-constants'; + +import {TreeMapFormatter, TreeMapNode} from './tree-map-formatter'; const formatter = new TreeMapFormatter(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts index d4fd8c41a0c..460643b77ce 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts @@ -1,17 +1,18 @@ -import { RecordFormatter } from '../record-formatter'; -import { ElementProfile, ProfilerFrame } from 'protocol'; -import { memo } from '../../../../../vendor/memo-decorator'; +import {ElementProfile, ProfilerFrame} from 'protocol'; + +import {memo} from '../../../../../vendor/memo-decorator'; +import {RecordFormatter} from '../record-formatter'; export interface TreeMapNode { id: string; value: number; size: number; children: TreeMapNode[]; - original: ElementProfile | null; + original: ElementProfile|null; } export class TreeMapFormatter extends RecordFormatter { - @memo({ cache: new WeakMap() }) + @memo({cache: new WeakMap()}) formatFrame(record: ProfilerFrame): TreeMapNode { const children: TreeMapNode[] = []; this.addFrame(children, record.directives); @@ -27,7 +28,7 @@ export class TreeMapFormatter extends RecordFormatter { }; } - addFrame(nodes: TreeMapNode[], elements: ElementProfile[], prev: TreeMapNode | null = null): void { + addFrame(nodes: TreeMapNode[], elements: ElementProfile[], prev: TreeMapNode|null = null): void { elements.forEach((element) => { if (!element) { console.error('Unable to insert undefined element'); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts index 5408eae59a5..f54aba9a5bc 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts @@ -1,8 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'ng-recording-dialog', templateUrl: './recording-dialog.component.html', styleUrls: ['./recording-dialog.component.scss'], }) -export class RecordingDialogComponent {} +export class RecordingDialogComponent { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts index 285f10a261f..64f4350f6c6 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts @@ -1,8 +1,9 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'ng-recording-modal', templateUrl: './recording-modal.component.html', styleUrls: ['./recording-modal.component.scss'], }) -export class RecordingModalComponent {} +export class RecordingModalComponent { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.ts index 0e9514d7573..dbd26b4e828 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.ts @@ -1,5 +1,5 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { trigger, style, animate, transition, stagger, query, animateChild } from '@angular/animations'; +import {animate, animateChild, query, stagger, style, transition, trigger} from '@angular/animations'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; interface Data { label: string; @@ -11,12 +11,15 @@ interface Data { templateUrl: './bar-chart.component.html', styleUrls: ['./bar-chart.component.scss'], animations: [ - trigger('appear', [transition(':enter', [style({ width: 0 }), animate('.3s ease', style({ width: '*' }))])]), + trigger( + 'appear', + [transition(':enter', [style({width: 0}), animate('.3s ease', style({width: '*'}))])]), trigger('stagger', [transition(':enter', [query(':enter', stagger('.1s', [animateChild()]))])]), ], }) export class BarChartComponent { - @Input() set data(nodes: Data[]) { + @Input() + set data(nodes: Data[]) { this.originalData = nodes; this.internalData = []; const max = nodes.reduce((a: number, c) => Math.max(a, c.value), -Infinity); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bargraph-visualizer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bargraph-visualizer.component.ts index 5d63137eac0..be6951b32b9 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bargraph-visualizer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bargraph-visualizer.component.ts @@ -1,10 +1,12 @@ -import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; -import { BargraphNode, BarGraphFormatter } from '../record-formatter/bargraph-formatter/index'; -import { ProfilerFrame } from 'protocol'; -import { SelectedDirective, SelectedEntry } from './timeline-visualizer.component'; -import { Theme, ThemeService } from '../../../../theme-service'; -import { Subscription } from 'rxjs'; -import { formatDirectiveProfile } from './profile-formatter'; +import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core'; +import {ProfilerFrame} from 'protocol'; +import {Subscription} from 'rxjs'; + +import {Theme, ThemeService} from '../../../../theme-service'; +import {BarGraphFormatter, BargraphNode} from '../record-formatter/bargraph-formatter/index'; + +import {formatDirectiveProfile} from './profile-formatter'; +import {SelectedDirective, SelectedEntry} from './timeline-visualizer.component'; @Component({ selector: 'ng-bargraph-visualizer', @@ -21,7 +23,8 @@ export class BargraphVisualizerComponent implements OnInit, OnDestroy { private _currentThemeSubscription: Subscription; currentTheme: Theme; - @Input() set frame(data: ProfilerFrame) { + @Input() + set frame(data: ProfilerFrame) { this.profileRecords = this._formatter.formatFrame(data); } @@ -46,7 +49,7 @@ export class BargraphVisualizerComponent implements OnInit, OnDestroy { this.nodeSelect.emit({ entry: node, parentHierarchy: node.parents.map((element) => { - return { name: element.directives[0].name }; + return {name: element.directives[0].name}; }), selectedDirectives: this.formatEntryData(node), }); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/execution-details.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/execution-details.component.ts index ccaa1475af5..083d37385ff 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/execution-details.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/execution-details.component.ts @@ -1,5 +1,6 @@ -import { Component, Input } from '@angular/core'; -import { SelectedDirective } from './timeline-visualizer.component'; +import {Component, Input} from '@angular/core'; + +import {SelectedDirective} from './timeline-visualizer.component'; @Component({ selector: 'ng-execution-details', diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.ts index 81a017221fd..1c70aa5304b 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.ts @@ -1,16 +1,13 @@ -import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core'; +import {Color, RawData} from 'ngx-flamegraph/lib/utils'; +import {ProfilerFrame} from 'protocol'; +import {Subscription} from 'rxjs'; -import { - FlamegraphNode, - ROOT_LEVEL_ELEMENT_LABEL, - FlamegraphFormatter, -} from '../record-formatter/flamegraph-formatter/flamegraph-formatter'; -import { Color, RawData } from 'ngx-flamegraph/lib/utils'; -import { ProfilerFrame } from 'protocol'; -import { SelectedDirective, SelectedEntry } from './timeline-visualizer.component'; -import { Theme, ThemeService } from '../../../../theme-service'; -import { Subscription } from 'rxjs'; -import { formatDirectiveProfile } from './profile-formatter'; +import {Theme, ThemeService} from '../../../../theme-service'; +import {FlamegraphFormatter, FlamegraphNode, ROOT_LEVEL_ELEMENT_LABEL,} from '../record-formatter/flamegraph-formatter/flamegraph-formatter'; + +import {formatDirectiveProfile} from './profile-formatter'; +import {SelectedDirective, SelectedEntry} from './timeline-visualizer.component'; @Component({ selector: 'ng-flamegraph-visualizer', @@ -30,12 +27,14 @@ export class FlamegraphVisualizerComponent implements OnInit, OnDestroy { @Output() nodeSelect = new EventEmitter(); - @Input() set frame(frame: ProfilerFrame) { + @Input() + set frame(frame: ProfilerFrame) { this._frame = frame; this._selectFrame(); } - @Input() set changeDetection(changeDetection: boolean) { + @Input() + set changeDetection(changeDetection: boolean) { this._showChangeDetection = changeDetection; this._selectFrame(); } @@ -45,18 +44,16 @@ export class FlamegraphVisualizerComponent implements OnInit, OnDestroy { ngOnInit(): void { this._currentThemeSubscription = this.themeService.currentTheme.subscribe((theme) => { this.currentTheme = theme; - this.colors = - theme === 'dark-theme' - ? { - hue: [210, 90], - saturation: [90, 90], - lightness: [25, 25], - } - : { - hue: [50, 15], - saturation: [100, 100], - lightness: [75, 75], - }; + this.colors = theme === 'dark-theme' ? { + hue: [210, 90], + saturation: [90, 90], + lightness: [25, 25], + } : + { + hue: [50, 15], + saturation: [100, 100], + lightness: [75, 75], + }; this._selectFrame(); }); } @@ -84,6 +81,7 @@ export class FlamegraphVisualizerComponent implements OnInit, OnDestroy { } private _selectFrame(): void { - this.profilerBars = [this._formatter.formatFrame(this._frame, this._showChangeDetection, this.currentTheme)]; + this.profilerBars = + [this._formatter.formatFrame(this._frame, this._showChangeDetection, this.currentTheme)]; } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/profile-formatter.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/profile-formatter.ts index 8fae7849ab4..5962bbda5b3 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/profile-formatter.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/profile-formatter.ts @@ -1,5 +1,6 @@ -import { DirectiveProfile } from 'protocol'; -import { SelectedDirective } from './timeline-visualizer.component'; +import {DirectiveProfile} from 'protocol'; + +import {SelectedDirective} from './timeline-visualizer.component'; const ignore = /^([A-Z]|listener|\d|listener)/; @@ -14,16 +15,13 @@ const formatOutput = (outputName: string) => { } output.push(parts[idx]); } - return output - .filter((el) => !!el) - .reverse() - .join('-'); + return output.filter((el) => !!el).reverse().join('-'); }; export const formatDirectiveProfile = (nodes: DirectiveProfile[]) => { const graphData: SelectedDirective[] = []; nodes.forEach((node) => { - const { changeDetection } = node; + const {changeDetection} = node; if (changeDetection) { graphData.push({ directive: node.name, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts index 2a742173878..6c065906f8e 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/recording-visualizer.module.ts @@ -1,18 +1,18 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { MatCardModule } from '@angular/material/card'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatCardModule} from '@angular/material/card'; +import {MatToolbarModule} from '@angular/material/toolbar'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {NgxFlamegraphModule} from 'ngx-flamegraph'; -import { NgxFlamegraphModule } from 'ngx-flamegraph'; +import {AngularSplitModule} from '../../../../vendor/angular-split/public_api'; -import { FlamegraphVisualizerComponent } from './flamegraph-visualizer.component'; -import { BargraphVisualizerComponent } from './bargraph-visualizer.component'; -import { TreeMapVisualizerComponent } from './tree-map-visualizer.component'; -import { TimelineVisualizerComponent } from './timeline-visualizer.component'; -import { BarChartComponent } from './bar-chart.component'; -import { ExecutionDetailsComponent } from './execution-details.component'; -import { AngularSplitModule } from '../../../../vendor/angular-split/public_api'; -import { MatTooltipModule } from '@angular/material/tooltip'; +import {BarChartComponent} from './bar-chart.component'; +import {BargraphVisualizerComponent} from './bargraph-visualizer.component'; +import {ExecutionDetailsComponent} from './execution-details.component'; +import {FlamegraphVisualizerComponent} from './flamegraph-visualizer.component'; +import {TimelineVisualizerComponent} from './timeline-visualizer.component'; +import {TreeMapVisualizerComponent} from './tree-map-visualizer.component'; @NgModule({ declarations: [ @@ -23,7 +23,11 @@ import { MatTooltipModule } from '@angular/material/tooltip'; TreeMapVisualizerComponent, BargraphVisualizerComponent, ], - imports: [CommonModule, NgxFlamegraphModule, MatTooltipModule, MatToolbarModule, MatCardModule, AngularSplitModule], + imports: [ + CommonModule, NgxFlamegraphModule, MatTooltipModule, MatToolbarModule, MatCardModule, + AngularSplitModule + ], exports: [TimelineVisualizerComponent], }) -export class RecordingVisualizerModule {} +export class RecordingVisualizerModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.ts index 1b4491dad79..081405f7f8a 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.ts @@ -1,13 +1,14 @@ -import { Component, Input } from '@angular/core'; -import { VisualizationMode } from '../visualization-mode'; -import { ProfilerFrame } from 'protocol'; -import { BargraphNode } from '../record-formatter/bargraph-formatter'; -import { FlamegraphNode } from '../record-formatter/flamegraph-formatter'; +import {Component, Input} from '@angular/core'; +import {ProfilerFrame} from 'protocol'; + +import {BargraphNode} from '../record-formatter/bargraph-formatter'; +import {FlamegraphNode} from '../record-formatter/flamegraph-formatter'; +import {VisualizationMode} from '../visualization-mode'; export interface SelectedEntry { - entry: BargraphNode | FlamegraphNode; + entry: BargraphNode|FlamegraphNode; selectedDirectives: SelectedDirective[]; - parentHierarchy?: { name: string }[]; + parentHierarchy?: {name: string}[]; } export interface SelectedDirective { @@ -22,7 +23,8 @@ export interface SelectedDirective { styleUrls: ['./timeline-visualizer.component.scss'], }) export class TimelineVisualizerComponent { - @Input() set visualizationMode(mode: VisualizationMode) { + @Input() + set visualizationMode(mode: VisualizationMode) { this._visualizationMode = mode; this.selectedEntry = null; this.selectedDirectives = []; @@ -33,12 +35,12 @@ export class TimelineVisualizerComponent { cmpVisualizationModes = VisualizationMode; - selectedEntry: BargraphNode | FlamegraphNode | null = null; + selectedEntry: BargraphNode|FlamegraphNode|null = null; selectedDirectives: SelectedDirective[] = []; - parentHierarchy: { name: string }[] = []; + parentHierarchy: {name: string}[] = []; _visualizationMode: VisualizationMode; - handleNodeSelect({ entry, parentHierarchy, selectedDirectives }: SelectedEntry): void { + handleNodeSelect({entry, parentHierarchy, selectedDirectives}: SelectedEntry): void { this.selectedEntry = entry; this.selectedDirectives = selectedDirectives; this.parentHierarchy = parentHierarchy ?? []; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.ts index b24cd85b9af..0dd110e2a1e 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.ts @@ -1,9 +1,10 @@ -import { Component, ElementRef, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { TreeMapNode, TreeMapFormatter } from '../record-formatter/tree-map-formatter'; -import { ProfilerFrame } from 'protocol'; -import { Subject, Subscription } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; -import { render } from '../../../../vendor/webtreemap/treemap'; +import {Component, ElementRef, Input, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {ProfilerFrame} from 'protocol'; +import {Subject, Subscription} from 'rxjs'; +import {debounceTime} from 'rxjs/operators'; + +import {render} from '../../../../vendor/webtreemap/treemap'; +import {TreeMapFormatter, TreeMapNode} from '../record-formatter/tree-map-formatter'; @Component({ selector: 'ng-tree-map-visualizer', @@ -13,7 +14,8 @@ import { render } from '../../../../vendor/webtreemap/treemap'; export class TreeMapVisualizerComponent implements OnInit, OnDestroy { private _formatter = new TreeMapFormatter(); - @Input() set frame(frame: ProfilerFrame) { + @Input() + set frame(frame: ProfilerFrame) { // first element in data is the Application node this.treeMapRecords = this._formatter.formatFrame(frame); if (this.tree) { @@ -26,13 +28,15 @@ export class TreeMapVisualizerComponent implements OnInit, OnDestroy { private resize$ = new Subject(); private _throttledResizeSubscription: Subscription; - private _resizeObserver: ResizeObserver = new ResizeObserver(() => this._ngZone.run(() => this.resize$.next())); + private _resizeObserver: ResizeObserver = + new ResizeObserver(() => this._ngZone.run(() => this.resize$.next())); treeMapRecords: TreeMapNode; - @ViewChild('webTree', { static: true }) tree: ElementRef; + @ViewChild('webTree', {static: true}) tree: ElementRef; ngOnInit(): void { - this._throttledResizeSubscription = this.resize$.pipe(debounceTime(100)).subscribe(() => this._renderTree()); + this._throttledResizeSubscription = + this.resize$.pipe(debounceTime(100)).subscribe(() => this._renderTree()); this._resizeObserver.observe(this.tree.nativeElement); } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts index ef9aeb037c6..1ae6b676be3 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts @@ -1,6 +1,7 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { VisualizationMode } from './visualization-mode'; -import { ProfilerFrame } from 'protocol'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {ProfilerFrame} from 'protocol'; + +import {VisualizationMode} from './visualization-mode'; @Component({ selector: 'ng-timeline-controls', @@ -8,7 +9,7 @@ import { ProfilerFrame } from 'protocol'; styleUrls: ['./timeline-controls.component.scss'], }) export class TimelineControlsComponent { - @Input() record: ProfilerFrame | undefined; + @Input() record: ProfilerFrame|undefined; @Input() estimatedFrameRate: number; @Input() visualizationMode: VisualizationMode; @Input() empty: boolean; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.spec.ts index d61c8ed156a..bfb565fa405 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.spec.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.spec.ts @@ -1,4 +1,4 @@ -import { TimelineComponent } from './timeline.component'; +import {TimelineComponent} from './timeline.component'; describe('TimelineComponent', () => { let comp: TimelineComponent; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts index feb471bb489..ee12d16f113 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts @@ -1,11 +1,12 @@ -import { Component, EventEmitter, Input, Output, OnDestroy } from '@angular/core'; -import { ProfilerFrame } from 'protocol'; -import { GraphNode } from './record-formatter/record-formatter'; -import { Observable, Subscription, BehaviorSubject } from 'rxjs'; -import { map, share } from 'rxjs/operators'; -import { mergeFrames } from './record-formatter/frame-merger'; -import { createFilter, Filter, noopFilter } from './filter'; -import { VisualizationMode } from './visualization-mode'; +import {Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core'; +import {ProfilerFrame} from 'protocol'; +import {BehaviorSubject, Observable, Subscription} from 'rxjs'; +import {map, share} from 'rxjs/operators'; + +import {createFilter, Filter, noopFilter} from './filter'; +import {mergeFrames} from './record-formatter/frame-merger'; +import {GraphNode} from './record-formatter/record-formatter'; +import {VisualizationMode} from './visualization-mode'; const MAX_HEIGHT = 50; @@ -15,7 +16,8 @@ const MAX_HEIGHT = 50; styleUrls: ['./timeline.component.scss'], }) export class TimelineComponent implements OnDestroy { - @Input() set stream(data: Observable) { + @Input() + set stream(data: Observable) { if (this._subscription) { this._subscription.unsubscribe(); } @@ -34,7 +36,7 @@ export class TimelineComponent implements OnDestroy { @Output() exportProfile = new EventEmitter(); visualizationMode = VisualizationMode.BarGraph; changeDetection = false; - frame: ProfilerFrame | null = null; + frame: ProfilerFrame|null = null; private _filter: Filter = noopFilter; private _maxDuration = -Infinity; @@ -44,13 +46,11 @@ export class TimelineComponent implements OnDestroy { private _graphDataSubject = new BehaviorSubject([]); visualizing = false; graphData$ = this._graphDataSubject.pipe( - share(), - map((nodes) => { - return (this._filtered = nodes.filter((node) => this._filter(node))); - }) - ); + share(), map((nodes) => { + return (this._filtered = nodes.filter((node) => this._filter(node))); + })); - selectFrames({ indexes }: { indexes: number[] }): void { + selectFrames({indexes}: {indexes: number[]}): void { this.frame = mergeFrames(indexes.map((index) => this._filtered[index].frame)); } @@ -98,7 +98,9 @@ export class TimelineComponent implements OnDestroy { return; } const multiplicationFactor = parseFloat((MAX_HEIGHT / this._maxDuration).toFixed(2)); - frames.forEach((frame) => this._graphDataSubject.value.push(this._getBarStyles(frame, multiplicationFactor))); + frames.forEach( + (frame) => + this._graphDataSubject.value.push(this._getBarStyles(frame, multiplicationFactor))); // We need to pass a new reference, because the CDK virtual scroll // has OnPush strategy, so it doesn't update the UI otherwise. @@ -107,7 +109,8 @@ export class TimelineComponent implements OnDestroy { } private _generateBars(): GraphNode[] { - const maxValue = this._allRecords.reduce((acc: number, frame: ProfilerFrame) => Math.max(acc, frame.duration), 0); + const maxValue = this._allRecords.reduce( + (acc: number, frame: ProfilerFrame) => Math.max(acc, frame.duration), 0); const multiplicationFactor = parseFloat((MAX_HEIGHT / maxValue).toFixed(2)); this._maxDuration = Math.max(this._maxDuration, maxValue); return this._allRecords.map((r) => this._getBarStyles(r, multiplicationFactor)); @@ -119,13 +122,14 @@ export class TimelineComponent implements OnDestroy { const backgroundColor = this.getColorByFrameRate(this.estimateFrameRate(frame.duration)); const style = { - 'background-image': `-webkit-linear-gradient(bottom, ${backgroundColor} ${colorPercentage}%, transparent ${colorPercentage}%)`, + 'background-image': `-webkit-linear-gradient(bottom, ${backgroundColor} ${ + colorPercentage}%, transparent ${colorPercentage}%)`, cursor: 'pointer', 'min-width': '25px', width: '25px', height: '50px', }; const toolTip = `${frame.source} TimeSpent: ${frame.duration.toFixed(3)}ms`; - return { style, toolTip, frame }; + return {style, toolTip, frame}; } } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts index 925a423961a..9f625e7335f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.module.ts @@ -1,23 +1,24 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { TimelineComponent } from './timeline.component'; -import { RecordingVisualizerModule } from './recording-visualizer/recording-visualizer.module'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; -import { MatCheckboxModule } from '@angular/material/checkbox'; -import { FormsModule } from '@angular/forms'; -import { NgxFlamegraphModule } from 'ngx-flamegraph'; -import { MatSelectModule } from '@angular/material/select'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatIconModule } from '@angular/material/icon'; -import { ScrollingModule } from '@angular/cdk/scrolling'; -import { MatProgressBarModule } from '@angular/material/progress-bar'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatInputModule } from '@angular/material/input'; -import { TimelineControlsComponent } from './timeline-controls.component'; -import { RecordingModalComponent } from './recording-modal.component'; -import { RecordingDialogComponent } from './recording-dialog.component'; -import { FrameSelectorComponent } from './frame-selector.component'; +import {ScrollingModule} from '@angular/cdk/scrolling'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCardModule} from '@angular/material/card'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatIconModule} from '@angular/material/icon'; +import {MatInputModule} from '@angular/material/input'; +import {MatProgressBarModule} from '@angular/material/progress-bar'; +import {MatSelectModule} from '@angular/material/select'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {NgxFlamegraphModule} from 'ngx-flamegraph'; + +import {FrameSelectorComponent} from './frame-selector.component'; +import {RecordingDialogComponent} from './recording-dialog.component'; +import {RecordingModalComponent} from './recording-modal.component'; +import {RecordingVisualizerModule} from './recording-visualizer/recording-visualizer.module'; +import {TimelineControlsComponent} from './timeline-controls.component'; +import {TimelineComponent} from './timeline.component'; @NgModule({ declarations: [ @@ -51,4 +52,5 @@ import { FrameSelectorComponent } from './frame-selector.component'; FrameSelectorComponent, ], }) -export class TimelineModule {} +export class TimelineModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts index a8602eab22b..a13cc1bc21c 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts @@ -1,6 +1,6 @@ -import { Component, ViewChild, ElementRef, AfterViewInit, Input } from '@angular/core'; -import { MessageBus, Events, Route } from 'protocol'; +import {AfterViewInit, Component, ElementRef, Input, ViewChild} from '@angular/core'; import * as d3 from 'd3'; +import {Events, MessageBus, Route} from 'protocol'; @Component({ selector: 'ng-router-tree', @@ -8,10 +8,11 @@ import * as d3 from 'd3'; styleUrls: ['./router-tree.component.scss'], }) export class RouterTreeComponent implements AfterViewInit { - @ViewChild('svgContainer', { static: true }) private svgContainer: ElementRef; - @ViewChild('mainGroup', { static: true }) private g: ElementRef; + @ViewChild('svgContainer', {static: true}) private svgContainer: ElementRef; + @ViewChild('mainGroup', {static: true}) private g: ElementRef; - @Input() set routes(routes: Route[]) { + @Input() + set routes(routes: Route[]) { this._routes = routes; this.render(); } @@ -48,74 +49,76 @@ export class RouterTreeComponent implements AfterViewInit { const root: any = this._routes[0]; - const nodes = this.tree( - d3.hierarchy(root.children.length === 0 || root.children.length > 1 ? root : root.children[0], (d) => d.children) - ); + const nodes = this.tree(d3.hierarchy( + root.children.length === 0 || root.children.length > 1 ? root : root.children[0], + (d) => d.children)); // Define the div for the tooltip - this.tooltip = d3.select('body').append('div').attr('class', 'tooltip').style('opacity', 0).style('padding', '0'); + this.tooltip = d3.select('body') + .append('div') + .attr('class', 'tooltip') + .style('opacity', 0) + .style('padding', '0'); g.selectAll('.link') - .data(nodes.descendants().slice(1)) - .enter() - .append('path') - .attr('class', 'link') - .attr( - 'd', - (d) => ` + .data(nodes.descendants().slice(1)) + .enter() + .append('path') + .attr('class', 'link') + .attr('d', (d) => ` M${d.y},${d.x} C${(d.y + (d as any).parent.y) / 2}, ${d.x} ${(d.y + (d as any).parent.y) / 2}, ${(d as any).parent.x} ${(d as any).parent.y}, - ${(d as any).parent.x}` - ); + ${(d as any).parent.x}`); // Declare the nodes - const node = g - .selectAll('g.node') - .data(nodes.descendants()) - .enter() - .append('g') - .attr('class', 'node') - .on('mouseover', (n) => { - const content = ` + const node = + g.selectAll('g.node') + .data(nodes.descendants()) + .enter() + .append('g') + .attr('class', 'node') + .on('mouseover', + (n) => { + const content = ` Name: ${n.data.name}
Path: ${n.data.path}
Auxiliary Route: ${n.data.isAux}
Specificity: ${n.data.specificity}
Handler: ${n.data.handler}
`; - this.tooltip.style('padding', '4px 8px').transition().style('opacity', 0.9); - this.tooltip - .html(content) - .style('left', (d3 as any).event.pageX + 8 + 'px') - .style('top', (d3 as any).event.pageY + 8 + 'px'); - }) - .on('mouseout', () => this.tooltip.transition().style('opacity', 0)) - .attr('transform', (d) => `translate(${d.y},${d.x})`); + this.tooltip.style('padding', '4px 8px').transition().style('opacity', 0.9); + this.tooltip.html(content) + .style('left', (d3 as any).event.pageX + 8 + 'px') + .style('top', (d3 as any).event.pageY + 8 + 'px'); + }) + .on('mouseout', () => this.tooltip.transition().style('opacity', 0)) + .attr('transform', (d) => `translate(${d.y},${d.x})`); - node - .append('circle') - .attr('class', (d) => ((d.data as any).isAux ? 'node-aux-route' : 'node-route')) - .attr('r', 6); + node.append('circle') + .attr('class', (d) => ((d.data as any).isAux ? 'node-aux-route' : 'node-route')) + .attr('r', 6); - node - .append('text') - .attr('dy', (d) => (d.depth === 0 || !d.children ? '0.35em' : '-1.50em')) - .attr('dx', (d: any): any => { - if (d.parent && d.children) { - return 6; - } else if (!d.parent && d.children) { - return -13; - } else if (d.parent && !d.children) { - return 13; - } - }) - .attr('text-anchor', (d) => (d.children ? 'end' : 'start')) - .text((d) => { - const label = (d.data as any).name; - return label.length > 20 ? label.slice(0, 17) + '...' : label; - }); + node.append('text') + .attr('dy', (d) => (d.depth === 0 || !d.children ? '0.35em' : '-1.50em')) + .attr( + 'dx', + (d: any): + any => { + if (d.parent && d.children) { + return 6; + } else if (!d.parent && d.children) { + return -13; + } else if (d.parent && !d.children) { + return 13; + } + }) + .attr('text-anchor', (d) => (d.children ? 'end' : 'start')) + .text((d) => { + const label = (d.data as any).name; + return label.length > 20 ? label.slice(0, 17) + '...' : label; + }); // reset transform g.attr('transform', 'translate(0, 0)'); @@ -123,13 +126,10 @@ export class RouterTreeComponent implements AfterViewInit { const svgRect = this.svgContainer.nativeElement.getBoundingClientRect(); const gElRect = this.g.nativeElement.getBoundingClientRect(); - g.attr( - 'transform', - `translate( + g.attr('transform', `translate( ${svgRect.left - gElRect.left + svgPadding}, ${svgRect.top - gElRect.top + svgPadding} - )` - ); + )`); const height = gElRect.height + svgPadding * 2; const width = gElRect.width + svgPadding * 2; svg.attr('height', height).attr('width', width); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts index f25f249b994..f697d396e4b 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.module.ts @@ -1,9 +1,9 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MatSelectModule } from '@angular/material/select'; -import { MatDialogModule } from '@angular/material/dialog'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatSelectModule} from '@angular/material/select'; -import { RouterTreeComponent } from './router-tree.component'; +import {RouterTreeComponent} from './router-tree.component'; @NgModule({ declarations: [RouterTreeComponent], @@ -11,4 +11,5 @@ import { RouterTreeComponent } from './router-tree.component'; exports: [RouterTreeComponent], entryComponents: [], }) -export class RouterTreeModule {} +export class RouterTreeModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update/index.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update/index.ts index 69075905fb6..4601d183685 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update/index.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update/index.ts @@ -1,5 +1,5 @@ -import { Observable, Subject } from 'rxjs'; -import { share } from 'rxjs/operators'; +import {Observable, Subject} from 'rxjs'; +import {share} from 'rxjs/operators'; // This service is used to notify the CDK virtual scroll parents // when the tab has changed. Alternatively, we risk to have broken diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts index 6f44c760703..74cd7a24781 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools.component.ts @@ -1,23 +1,26 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { MessageBus, Events } from 'protocol'; -import { interval } from 'rxjs'; -import { animate, style, transition, trigger } from '@angular/animations'; -import { ThemeService } from './theme-service'; +import {animate, style, transition, trigger} from '@angular/animations'; +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {Events, MessageBus} from 'protocol'; +import {interval} from 'rxjs'; + +import {ThemeService} from './theme-service'; @Component({ selector: 'ng-devtools', templateUrl: './devtools.component.html', styleUrls: ['./devtools.component.scss'], animations: [ - trigger('enterAnimation', [ - transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]), - transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))]), - ]), + trigger( + 'enterAnimation', + [ + transition(':enter', [style({opacity: 0}), animate('200ms', style({opacity: 1}))]), + transition(':leave', [style({opacity: 1}), animate('200ms', style({opacity: 0}))]), + ]), ], }) export class DevToolsComponent implements OnInit, OnDestroy { - angularExists: boolean | null = null; - angularVersion: string | boolean | undefined = undefined; + angularExists: boolean|null = null; + angularVersion: string|boolean|undefined = undefined; angularIsInDevMode = true; ivy: boolean; @@ -33,7 +36,7 @@ export class DevToolsComponent implements OnInit, OnDestroy { ngOnInit(): void { this._themeService.initializeThemeWatcher(); - this._messageBus.once('ngAvailability', ({ version, devMode, ivy }) => { + this._messageBus.once('ngAvailability', ({version, devMode, ivy}) => { this.angularExists = !!version; this.angularVersion = version; this.angularIsInDevMode = devMode; diff --git a/devtools/projects/ng-devtools/src/lib/devtools.module.ts b/devtools/projects/ng-devtools/src/lib/devtools.module.ts index 8ca75b4c390..26a53ca6b7f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.module.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools.module.ts @@ -1,14 +1,15 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; +import {MatTooltipModule} from '@angular/material/tooltip'; -import { DevToolsComponent } from './devtools.component'; -import { DevToolsTabModule } from './devtools-tabs/devtools-tabs.module'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { MatTooltipModule } from '@angular/material/tooltip'; +import {DevToolsTabModule} from './devtools-tabs/devtools-tabs.module'; +import {DevToolsComponent} from './devtools.component'; @NgModule({ declarations: [DevToolsComponent], imports: [CommonModule, DevToolsTabModule, MatProgressSpinnerModule, MatTooltipModule], exports: [DevToolsComponent], }) -export class DevToolsModule {} +export class DevToolsModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/theme-service.ts b/devtools/projects/ng-devtools/src/lib/theme-service.ts index 69b1e393746..f81a846016a 100644 --- a/devtools/projects/ng-devtools/src/lib/theme-service.ts +++ b/devtools/projects/ng-devtools/src/lib/theme-service.ts @@ -1,7 +1,7 @@ -import { ReplaySubject, Subject } from 'rxjs'; -import { Injectable, RendererFactory2, Renderer2 } from '@angular/core'; +import {Injectable, Renderer2, RendererFactory2} from '@angular/core'; +import {ReplaySubject, Subject} from 'rxjs'; -export type Theme = 'dark-theme' | 'light-theme'; +export type Theme = 'dark-theme'|'light-theme'; @Injectable({ providedIn: 'root', diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts index 79696dd73bf..175b49a2d51 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts @@ -1,6 +1,6 @@ // tslint:disable -import { SplitAreaDirective } from './splitArea.directive'; +import {SplitAreaDirective} from './splitArea.directive'; export interface IPoint { x: number; @@ -10,9 +10,9 @@ export interface IPoint { export interface IArea { component: SplitAreaDirective; order: number; - size: number | null; - minSize: number | null; - maxSize: number | null; + size: number|null; + minSize: number|null; + maxSize: number|null; } // CREATED ON DRAG START @@ -53,4 +53,4 @@ export interface IOutputData { sizes: IOutputAreaSizes; } -export interface IOutputAreaSizes extends Array {} +export interface IOutputAreaSizes extends Array {} diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts index 163aa2c5eb6..f8fec68c0ef 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts @@ -1,35 +1,11 @@ // tslint:disable -import { - Component, - Input, - Output, - ChangeDetectionStrategy, - ChangeDetectorRef, - Renderer2, - AfterViewInit, - OnDestroy, - ElementRef, - NgZone, - ViewChildren, - QueryList, - EventEmitter, -} from '@angular/core'; -import { Observable, Subscriber, Subject } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; +import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, Output, QueryList, Renderer2, ViewChildren,} from '@angular/core'; +import {Observable, Subject, Subscriber} from 'rxjs'; +import {debounceTime} from 'rxjs/operators'; -import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes } from './interface'; -import { SplitAreaDirective } from './splitArea.directive'; -import { - getInputPositiveNumber, - getInputBoolean, - isUserSizesValid, - getAreaMinSize, - getAreaMaxSize, - getPointFromEvent, - getElementPixelSize, - getGutterSideAbsorptionCapacity, - updateAreaSize, -} from './utils'; +import {IArea, IAreaSnapshot, IOutputAreaSizes, IOutputData, IPoint, ISplitSnapshot} from './interface'; +import {SplitAreaDirective} from './splitArea.directive'; +import {getAreaMaxSize, getAreaMinSize, getElementPixelSize, getGutterSideAbsorptionCapacity, getInputBoolean, getInputPositiveNumber, getPointFromEvent, isUserSizesValid, updateAreaSize,} from './utils'; /** * angular-split @@ -39,25 +15,29 @@ import { * ___________________________________________________________________________________________ * | A [g1] B [g2] C [g3] D [g4] E | * |-------------------------------------------------------------------------------------------| - * | 20 30 20 15 15 | <-- [size]="x" - * | 10px 10px 10px 10px | <-- [gutterSize]="10" - * |calc(20% - 8px) calc(30% - 12px) calc(20% - 8px) calc(15% - 6px) calc(15% - 6px)| <-- CSS flex-basis property (with flex-grow&shrink at 0) - * | 152px 228px 152px 114px 114px | <-- el.getBoundingClientRect().width + * | 20 30 20 15 15 | <-- + * [size]="x" | 10px 10px 10px 10px | <-- + * [gutterSize]="10" |calc(20% - 8px) calc(30% - 12px) calc(20% - 8px) calc(15% - 6px) + * calc(15% - 6px)| <-- CSS flex-basis property (with flex-grow&shrink at 0) | 152px 228px 152px + * 114px 114px | <-- el.getBoundingClientRect().width * |___________________________________________________________________________________________| - * 800px <-- el.getBoundingClientRect().width - * flex-basis = calc( { area.size }% - { area.size/100 * nbGutter*gutterSize }px ); + * 800px <-- + * el.getBoundingClientRect().width flex-basis = calc( { area.size }% - { area.size/100 * + * nbGutter*gutterSize }px ); * * * PIXEL MODE ([unit]="'pixel'") * ___________________________________________________________________________________________ * | A [g1] B [g2] C [g3] D [g4] E | * |-------------------------------------------------------------------------------------------| - * | 100 250 * 150 100 | <-- [size]="y" - * | 10px 10px 10px 10px | <-- [gutterSize]="10" - * | 0 0 100px 0 0 250px 1 1 auto 0 0 150px 0 0 100px | <-- CSS flex property (flex-grow/flex-shrink/flex-basis) - * | 100px 250px 200px 150px 100px | <-- el.getBoundingClientRect().width + * | 100 250 * 150 100 | <-- + * [size]="y" | 10px 10px 10px 10px | <-- + * [gutterSize]="10" | 0 0 100px 0 0 250px 1 1 auto 0 0 150px 0 0 + * 100px | <-- CSS flex property (flex-grow/flex-shrink/flex-basis) | 100px 250px + * 200px 150px 100px | <-- el.getBoundingClientRect().width * |___________________________________________________________________________________________| - * 800px <-- el.getBoundingClientRect().width + * 800px <-- + * el.getBoundingClientRect().width * */ @@ -84,38 +64,40 @@ import { `, }) export class SplitComponent implements AfterViewInit, OnDestroy { - private _direction: 'horizontal' | 'vertical' = 'horizontal'; + private _direction: 'horizontal'|'vertical' = 'horizontal'; - @Input() set direction(v: 'horizontal' | 'vertical') { + @Input() + set direction(v: 'horizontal'|'vertical') { this._direction = v === 'vertical' ? 'vertical' : 'horizontal'; this.renderer.addClass(this.elRef.nativeElement, `as-${this._direction}`); this.renderer.removeClass( - this.elRef.nativeElement, - `as-${this._direction === 'vertical' ? 'horizontal' : 'vertical'}` - ); + this.elRef.nativeElement, + `as-${this._direction === 'vertical' ? 'horizontal' : 'vertical'}`); this.build(false, false); } - get direction(): 'horizontal' | 'vertical' { + get direction(): 'horizontal'|'vertical' { return this._direction; } //// - private _unit: 'percent' | 'pixel' = 'percent'; + private _unit: 'percent'|'pixel' = 'percent'; - @Input() set unit(v: 'percent' | 'pixel') { + @Input() + set unit(v: 'percent'|'pixel') { this._unit = v === 'pixel' ? 'pixel' : 'percent'; this.renderer.addClass(this.elRef.nativeElement, `as-${this._unit}`); - this.renderer.removeClass(this.elRef.nativeElement, `as-${this._unit === 'pixel' ? 'percent' : 'pixel'}`); + this.renderer.removeClass( + this.elRef.nativeElement, `as-${this._unit === 'pixel' ? 'percent' : 'pixel'}`); this.build(false, true); } - get unit(): 'percent' | 'pixel' { + get unit(): 'percent'|'pixel' { return this._unit; } @@ -123,13 +105,14 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private _gutterSize: number = 11; - @Input() set gutterSize(v: number | null) { + @Input() + set gutterSize(v: number|null) { this._gutterSize = getInputPositiveNumber(v, 11); this.build(false, false); } - get gutterSize(): number | null { + get gutterSize(): number|null { return this._gutterSize; } @@ -137,7 +120,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private _gutterStep: number = 1; - @Input() set gutterStep(v: number) { + @Input() + set gutterStep(v: number) { this._gutterStep = getInputPositiveNumber(v, 1); } @@ -149,7 +133,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private _restrictMove: boolean = false; - @Input() set restrictMove(v: boolean) { + @Input() + set restrictMove(v: boolean) { this._restrictMove = getInputBoolean(v); } @@ -161,11 +146,14 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private _useTransition: boolean = false; - @Input() set useTransition(v: boolean) { + @Input() + set useTransition(v: boolean) { this._useTransition = getInputBoolean(v); - if (this._useTransition) this.renderer.addClass(this.elRef.nativeElement, 'as-transition'); - else this.renderer.removeClass(this.elRef.nativeElement, 'as-transition'); + if (this._useTransition) + this.renderer.addClass(this.elRef.nativeElement, 'as-transition'); + else + this.renderer.removeClass(this.elRef.nativeElement, 'as-transition'); } get useTransition(): boolean { @@ -176,11 +164,14 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private _disabled: boolean = false; - @Input() set disabled(v: boolean) { + @Input() + set disabled(v: boolean) { this._disabled = getInputBoolean(v); - if (this._disabled) this.renderer.addClass(this.elRef.nativeElement, 'as-disabled'); - else this.renderer.removeClass(this.elRef.nativeElement, 'as-disabled'); + if (this._disabled) + this.renderer.addClass(this.elRef.nativeElement, 'as-disabled'); + else + this.renderer.removeClass(this.elRef.nativeElement, 'as-disabled'); } get disabled(): boolean { @@ -189,15 +180,16 @@ export class SplitComponent implements AfterViewInit, OnDestroy { //// - private _dir: 'ltr' | 'rtl' = 'ltr'; + private _dir: 'ltr'|'rtl' = 'ltr'; - @Input() set dir(v: 'ltr' | 'rtl') { + @Input() + set dir(v: 'ltr'|'rtl') { this._dir = v === 'rtl' ? 'rtl' : 'ltr'; this.renderer.setAttribute(this.elRef.nativeElement, 'dir', this._dir); } - get dir(): 'ltr' | 'rtl' { + get dir(): 'ltr'|'rtl' { return this._dir; } @@ -205,7 +197,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private _gutterDblClickDuration: number = 0; - @Input() set gutterDblClickDuration(v: number) { + @Input() + set gutterDblClickDuration(v: number) { this._gutterDblClickDuration = getInputPositiveNumber(v, 0); } @@ -221,10 +214,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy { @Output() gutterDblClick = new EventEmitter(false); private transitionEndSubscriber: Subscriber; - @Output() get transitionEnd(): Observable { - return new Observable((subscriber) => (this.transitionEndSubscriber = subscriber)).pipe( - debounceTime(20) - ); + @Output() + get transitionEnd(): Observable { + return new Observable((subscriber) => (this.transitionEndSubscriber = subscriber)) + .pipe(debounceTime(20)); } private dragProgressSubject: Subject = new Subject(); @@ -234,9 +227,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private isDragging: boolean = false; private dragListeners: Array = []; - private snapshot: ISplitSnapshot | null = null; - private startPoint: IPoint | null = null; - private endPoint: IPoint | null = null; + private snapshot: ISplitSnapshot|null = null; + private startPoint: IPoint|null = null; + private endPoint: IPoint|null = null; public readonly displayedAreas: Array = []; private readonly hidedAreas: Array = []; @@ -244,11 +237,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { @ViewChildren('gutterEls') private gutterEls: QueryList; constructor( - private ngZone: NgZone, - private elRef: ElementRef, - private cdRef: ChangeDetectorRef, - private renderer: Renderer2 - ) { + private ngZone: NgZone, private elRef: ElementRef, private cdRef: ChangeDetectorRef, + private renderer: Renderer2) { // To force adding default class, could be override by user @Input() or not this.direction = this._direction; } @@ -294,7 +284,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } } - public updateArea(component: SplitAreaDirective, resetOrders: boolean, resetSizes: boolean): void { + public updateArea(component: SplitAreaDirective, resetOrders: boolean, resetSizes: boolean): + void { if (component.visible === true) { this.build(resetOrders, resetSizes); } @@ -372,10 +363,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // ¤ AREAS SIZE if (resetSizes === true) { - const useUserSizes = isUserSizesValid( - this.unit, - this.displayedAreas.map((a) => a.component.size) - ); + const useUserSizes = + isUserSizesValid(this.unit, this.displayedAreas.map((a) => a.component.size)); switch (this.unit) { case 'percent': { @@ -455,12 +444,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.displayedAreas.forEach((area) => { area.component.setStyleFlex( - 0, - 0, - `calc( ${area.size}% - ${(area.size / 100) * sumGutterSize}px )`, - area.minSize !== null && area.minSize === area.size ? true : false, - area.maxSize !== null && area.maxSize === area.size ? true : false - ); + 0, 0, `calc( ${area.size}% - ${(area.size / 100) * sumGutterSize}px )`, + area.minSize !== null && area.minSize === area.size ? true : false, + area.maxSize !== null && area.maxSize === area.size ? true : false); }); } } @@ -485,25 +471,24 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // Multiple areas > use each pixel basis else { area.component.setStyleFlex( - 0, - 0, - `${area.size}px`, - area.minSize !== null && area.minSize === area.size ? true : false, - area.maxSize !== null && area.maxSize === area.size ? true : false - ); + 0, 0, `${area.size}px`, + area.minSize !== null && area.minSize === area.size ? true : false, + area.maxSize !== null && area.maxSize === area.size ? true : false); } } }); } } - _clickTimeout: number | null = null; + _clickTimeout: number|null = null; - public clickGutter(event: MouseEvent | TouchEvent, gutterNum: number): void { + public clickGutter(event: MouseEvent|TouchEvent, gutterNum: number): void { const tempPoint = getPointFromEvent(event); - // Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger click/dblclick - if (this.startPoint && this.startPoint.x === tempPoint!.x && this.startPoint.y === tempPoint!.y) { + // Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger + // click/dblclick + if (this.startPoint && this.startPoint.x === tempPoint!.x && + this.startPoint.y === tempPoint!.y) { // If timeout in progress and new click > clearTimeout & dblClickEvent if (this._clickTimeout !== null) { window.clearTimeout(this._clickTimeout); @@ -522,7 +507,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } } - public startDragging(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void { + public startDragging(event: MouseEvent|TouchEvent, gutterOrder: number, gutterNum: number): void { event.preventDefault(); event.stopPropagation(); @@ -534,7 +519,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.snapshot = { gutterNum, lastSteppedOffset: 0, - allAreasSizePixel: getElementPixelSize(this.elRef, this.direction) - this.getNbGutters() * this.gutterSize!, + allAreasSizePixel: + getElementPixelSize(this.elRef, this.direction) - this.getNbGutters() * this.gutterSize!, allInvolvedAreasSizePercent: 100, areasBeforeGutter: [], areasAfterGutter: [], @@ -544,7 +530,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { const areaSnapshot: IAreaSnapshot = { area, sizePixelAtStart: getElementPixelSize(area.component.elRef, this.direction), - sizePercentAtStart: (this.unit === 'percent' ? area.size : -1) as number, // If pixel mode, anyway, will not be used. + sizePercentAtStart: (this.unit === 'percent' ? area.size : -1) as + number, // If pixel mode, anyway, will not be used. }; if (area.order < gutterOrder) { @@ -555,7 +542,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } } else if (area.order > gutterOrder) { if (this.restrictMove === true) { - if (this.snapshot!.areasAfterGutter.length === 0) this.snapshot!.areasAfterGutter = [areaSnapshot]; + if (this.snapshot!.areasAfterGutter.length === 0) + this.snapshot!.areasAfterGutter = [areaSnapshot]; } else { this.snapshot!.areasAfterGutter.push(areaSnapshot); } @@ -567,29 +555,36 @@ export class SplitComponent implements AfterViewInit, OnDestroy { ...this.snapshot.areasAfterGutter, ].reduce((t, a) => t + a.sizePercentAtStart, 0); - if (this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) { + if (this.snapshot.areasBeforeGutter.length === 0 || + this.snapshot.areasAfterGutter.length === 0) { return; } - this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this))); - this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this))); - this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this))); + this.dragListeners.push( + this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this))); + this.dragListeners.push( + this.renderer.listen('document', 'touchend', this.stopDragging.bind(this))); + this.dragListeners.push( + this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this))); this.ngZone.runOutsideAngular(() => { - this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this))); - this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this))); + this.dragListeners.push( + this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this))); + this.dragListeners.push( + this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this))); }); this.displayedAreas.forEach((area) => area.component.lockEvents()); this.isDragging = true; this.renderer.addClass(this.elRef.nativeElement, 'as-dragging'); - this.renderer.addClass(this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement, 'as-dragged'); + this.renderer.addClass( + this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement, 'as-dragged'); this.notify('start', this.snapshot.gutterNum); } - private dragEvent(event: MouseEvent | TouchEvent): void { + private dragEvent(event: MouseEvent|TouchEvent): void { event.preventDefault(); event.stopPropagation(); @@ -609,8 +604,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // Calculate steppedOffset - let offset = - this.direction === 'horizontal' ? this.startPoint!.x - this.endPoint.x : this.startPoint!.y - this.endPoint.y; + let offset = this.direction === 'horizontal' ? this.startPoint!.x - this.endPoint.x : + this.startPoint!.y - this.endPoint.y; if (this.dir === 'rtl') { offset = -offset; } @@ -625,71 +620,54 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // Need to know if each gutter side areas could reacts to steppedOffset let areasBefore = getGutterSideAbsorptionCapacity( - this.unit, - this.snapshot!.areasBeforeGutter, - -steppedOffset, - this.snapshot!.allAreasSizePixel - ); + this.unit, this.snapshot!.areasBeforeGutter, -steppedOffset, + this.snapshot!.allAreasSizePixel); let areasAfter = getGutterSideAbsorptionCapacity( - this.unit, - this.snapshot!.areasAfterGutter, - steppedOffset, - this.snapshot!.allAreasSizePixel - ); + this.unit, this.snapshot!.areasAfterGutter, steppedOffset, + this.snapshot!.allAreasSizePixel); // Each gutter side areas can't absorb all offset if (areasBefore.remain !== 0 && areasAfter.remain !== 0) { if (Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) { } else if (Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) { areasAfter = getGutterSideAbsorptionCapacity( - this.unit, - this.snapshot!.areasAfterGutter, - steppedOffset + areasBefore.remain, - this.snapshot!.allAreasSizePixel - ); + this.unit, this.snapshot!.areasAfterGutter, steppedOffset + areasBefore.remain, + this.snapshot!.allAreasSizePixel); } else { areasBefore = getGutterSideAbsorptionCapacity( - this.unit, - this.snapshot!.areasBeforeGutter, - -(steppedOffset - areasAfter.remain), - this.snapshot!.allAreasSizePixel - ); + this.unit, this.snapshot!.areasBeforeGutter, -(steppedOffset - areasAfter.remain), + this.snapshot!.allAreasSizePixel); } } - // Areas before gutter can't absorbs all offset > need to recalculate sizes for areas after gutter. + // Areas before gutter can't absorbs all offset > need to recalculate sizes for areas after + // gutter. else if (areasBefore.remain !== 0) { areasAfter = getGutterSideAbsorptionCapacity( - this.unit, - this.snapshot!.areasAfterGutter, - steppedOffset + areasBefore.remain, - this.snapshot!.allAreasSizePixel - ); + this.unit, this.snapshot!.areasAfterGutter, steppedOffset + areasBefore.remain, + this.snapshot!.allAreasSizePixel); } - // Areas after gutter can't absorbs all offset > need to recalculate sizes for areas before gutter. + // Areas after gutter can't absorbs all offset > need to recalculate sizes for areas before + // gutter. else if (areasAfter.remain !== 0) { areasBefore = getGutterSideAbsorptionCapacity( - this.unit, - this.snapshot!.areasBeforeGutter, - -(steppedOffset - areasAfter.remain), - this.snapshot!.allAreasSizePixel - ); + this.unit, this.snapshot!.areasBeforeGutter, -(steppedOffset - areasAfter.remain), + this.snapshot!.allAreasSizePixel); } if (this.unit === 'percent') { - // Hack because of browser messing up with sizes using calc(X% - Ypx) -> el.getBoundingClientRect() - // If not there, playing with gutters makes total going down to 99.99875% then 99.99286%, 99.98986%,.. + // Hack because of browser messing up with sizes using calc(X% - Ypx) -> + // el.getBoundingClientRect() If not there, playing with gutters makes total going down + // to 99.99875% then 99.99286%, 99.98986%,.. const all = [...areasBefore.list, ...areasAfter.list]; const areaToReset = all.find( - (a) => - a.percentAfterAbsorption !== 0 && - a.percentAfterAbsorption !== a.areaSnapshot.area.minSize && - a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize - ); + (a) => a.percentAfterAbsorption !== 0 && + a.percentAfterAbsorption !== a.areaSnapshot.area.minSize && + a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize); if (areaToReset) { - areaToReset.percentAfterAbsorption = - this.snapshot!.allInvolvedAreasSizePercent - - all.filter((a) => a !== areaToReset).reduce((total, a) => total + a.percentAfterAbsorption, 0); + areaToReset.percentAfterAbsorption = this.snapshot!.allInvolvedAreasSizePercent - + all.filter((a) => a !== areaToReset) + .reduce((total, a) => total + a.percentAfterAbsorption, 0); } } @@ -724,12 +702,14 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.isDragging = false; // If moved from starting point, notify end - if (this.endPoint && (this.startPoint!.x !== this.endPoint.x || this.startPoint!.y !== this.endPoint.y)) { + if (this.endPoint && + (this.startPoint!.x !== this.endPoint.x || this.startPoint!.y !== this.endPoint.y)) { this.notify('end', this.snapshot!.gutterNum); } this.renderer.removeClass(this.elRef.nativeElement, 'as-dragging'); - this.renderer.removeClass(this.gutterEls.toArray()[this.snapshot!.gutterNum - 1].nativeElement, 'as-dragged'); + this.renderer.removeClass( + this.gutterEls.toArray()[this.snapshot!.gutterNum - 1].nativeElement, 'as-dragged'); this.snapshot = null; // Needed to let (click)="clickGutter(...)" event run and verify if mouse moved or not @@ -741,24 +721,25 @@ export class SplitComponent implements AfterViewInit, OnDestroy { }); } - public notify(type: 'start' | 'progress' | 'end' | 'click' | 'dblclick' | 'transitionEnd', gutterNum: number): void { + public notify( + type: 'start'|'progress'|'end'|'click'|'dblclick'|'transitionEnd', gutterNum: number): void { const sizes = this.getVisibleAreaSizes(); if (type === 'start') { - this.dragStart.emit({ gutterNum, sizes }); + this.dragStart.emit({gutterNum, sizes}); } else if (type === 'end') { - this.dragEnd.emit({ gutterNum, sizes }); + this.dragEnd.emit({gutterNum, sizes}); } else if (type === 'click') { - this.gutterClick.emit({ gutterNum, sizes }); + this.gutterClick.emit({gutterNum, sizes}); } else if (type === 'dblclick') { - this.gutterDblClick.emit({ gutterNum, sizes }); + this.gutterDblClick.emit({gutterNum, sizes}); } else if (type === 'transitionEnd') { if (this.transitionEndSubscriber) { this.ngZone.run(() => this.transitionEndSubscriber.next(sizes)); } } else if (type === 'progress') { // Stay outside zone to allow users do what they want about change detection mechanism. - this.dragProgressSubject.next({ gutterNum, sizes }); + this.dragProgressSubject.next({gutterNum, sizes}); } } diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.module.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.module.ts index a74853fab6d..b9184967419 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.module.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.module.ts @@ -1,12 +1,13 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; -import { SplitComponent } from './split.component'; -import { SplitAreaDirective } from './splitArea.directive'; +import {SplitComponent} from './split.component'; +import {SplitAreaDirective} from './splitArea.directive'; @NgModule({ imports: [CommonModule], declarations: [SplitAreaDirective, SplitComponent], exports: [SplitAreaDirective, SplitComponent], }) -export class SplitModule {} +export class SplitModule { +} diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts index 7d6409f5e0a..c809447eeb3 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts @@ -1,66 +1,71 @@ // tslint:disable -import { Directive, Input, ElementRef, Renderer2, OnInit, OnDestroy, NgZone } from '@angular/core'; +import {Directive, ElementRef, Input, NgZone, OnDestroy, OnInit, Renderer2} from '@angular/core'; -import { SplitComponent } from '../component/split.component'; -import { getInputPositiveNumber, getInputBoolean } from './utils'; +import {SplitComponent} from '../component/split.component'; + +import {getInputBoolean, getInputPositiveNumber} from './utils'; @Directive({ selector: 'as-split-area, [as-split-area]', exportAs: 'asSplitArea', }) export class SplitAreaDirective implements OnInit, OnDestroy { - private _order: number | null = null; + private _order: number|null = null; - @Input() set order(v: number | null) { + @Input() + set order(v: number|null) { this._order = getInputPositiveNumber(v, null); this.split.updateArea(this, true, false); } - get order(): number | null { + get order(): number|null { return this._order; } //// - private _size: number | null = null; + private _size: number|null = null; - @Input() set size(v: number | null) { + @Input() + set size(v: number|null) { this._size = getInputPositiveNumber(v, null); this.split.updateArea(this, false, true); } - get size(): number | null { + get size(): number|null { return this._size; } //// - private _minSize: number | null = null; + private _minSize: number|null = null; - @Input() set minSize(v: number | null) { + @Input() + set minSize(v: number|null) { this._minSize = getInputPositiveNumber(v, null); this.split.updateArea(this, false, true); } - get minSize(): number | null { + get minSize(): number|null { return this._minSize; } //// - private _maxSize: number | null = null; + private _maxSize: number|null = null; - @Input() set maxSize(v: number | null) { + @Input() + set maxSize(v: number|null) { this._maxSize = getInputPositiveNumber(v, null); this.split.updateArea(this, false, true); } - get maxSize(): number | null { + get maxSize(): number|null { return this._maxSize; } @@ -68,7 +73,8 @@ export class SplitAreaDirective implements OnInit, OnDestroy { private _lockSize: boolean = false; - @Input() set lockSize(v: boolean) { + @Input() + set lockSize(v: boolean) { this._lockSize = getInputBoolean(v); this.split.updateArea(this, false, true); @@ -82,7 +88,8 @@ export class SplitAreaDirective implements OnInit, OnDestroy { private _visible: boolean = true; - @Input() set visible(v: boolean) { + @Input() + set visible(v: boolean) { this._visible = getInputBoolean(v); if (this._visible) { @@ -104,11 +111,8 @@ export class SplitAreaDirective implements OnInit, OnDestroy { private readonly lockListeners: Array = []; constructor( - private ngZone: NgZone, - public elRef: ElementRef, - private renderer: Renderer2, - private split: SplitComponent - ) { + private ngZone: NgZone, public elRef: ElementRef, private renderer: Renderer2, + private split: SplitComponent) { this.renderer.addClass(this.elRef.nativeElement, 'as-split-area'); } @@ -117,15 +121,12 @@ export class SplitAreaDirective implements OnInit, OnDestroy { this.ngZone.runOutsideAngular(() => { this.transitionListener = this.renderer.listen( - this.elRef.nativeElement, - 'transitionend', - (event: TransitionEvent) => { - // Limit only flex-basis transition to trigger the event - if (event.propertyName === 'flex-basis') { - this.split.notify('transitionEnd', -1); - } - } - ); + this.elRef.nativeElement, 'transitionend', (event: TransitionEvent) => { + // Limit only flex-basis transition to trigger the event + if (event.propertyName === 'flex-basis') { + this.split.notify('transitionEnd', -1); + } + }); }); } @@ -133,23 +134,31 @@ export class SplitAreaDirective implements OnInit, OnDestroy { this.renderer.setStyle(this.elRef.nativeElement, 'order', value); } - public setStyleFlex(grow: number, shrink: number, basis: string, isMin: boolean, isMax: boolean): void { - // Need 3 separated properties to work on IE11 (https://github.com/angular/flex-layout/issues/323) + public setStyleFlex(grow: number, shrink: number, basis: string, isMin: boolean, isMax: boolean): + void { + // Need 3 separated properties to work on IE11 + // (https://github.com/angular/flex-layout/issues/323) this.renderer.setStyle(this.elRef.nativeElement, 'flex-grow', grow); this.renderer.setStyle(this.elRef.nativeElement, 'flex-shrink', shrink); this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', basis); - if (isMin === true) this.renderer.addClass(this.elRef.nativeElement, 'as-min'); - else this.renderer.removeClass(this.elRef.nativeElement, 'as-min'); + if (isMin === true) + this.renderer.addClass(this.elRef.nativeElement, 'as-min'); + else + this.renderer.removeClass(this.elRef.nativeElement, 'as-min'); - if (isMax === true) this.renderer.addClass(this.elRef.nativeElement, 'as-max'); - else this.renderer.removeClass(this.elRef.nativeElement, 'as-max'); + if (isMax === true) + this.renderer.addClass(this.elRef.nativeElement, 'as-max'); + else + this.renderer.removeClass(this.elRef.nativeElement, 'as-max'); } public lockEvents(): void { this.ngZone.runOutsideAngular(() => { - this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false)); - this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false)); + this.lockListeners.push( + this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false)); + this.lockListeners.push( + this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false)); }); } diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts index e6da13a63ba..7d12f83ab31 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts @@ -1,11 +1,12 @@ // tslint:disable -import { ElementRef } from '@angular/core'; +import {ElementRef} from '@angular/core'; -import { IArea, IPoint, IAreaSnapshot, ISplitSideAbsorptionCapacity, IAreaAbsorptionCapacity } from './interface'; +import {IArea, IAreaAbsorptionCapacity, IAreaSnapshot, IPoint, ISplitSideAbsorptionCapacity} from './interface'; -export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint | null { +export function getPointFromEvent(event: MouseEvent|TouchEvent): IPoint|null { // TouchEvent - if ((event).changedTouches !== undefined && (event).changedTouches.length > 0) { + if ((event).changedTouches !== undefined && + (event).changedTouches.length > 0) { return { x: (event).changedTouches[0].clientX, y: (event).changedTouches[0].clientY, @@ -21,7 +22,7 @@ export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint | null return null; } -export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number { +export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal'|'vertical'): number { const rect = (elRef.nativeElement).getBoundingClientRect(); return direction === 'horizontal' ? rect.width : rect.height; @@ -31,14 +32,15 @@ export function getInputBoolean(v: any): boolean { return typeof v === 'boolean' ? v : v === 'false' ? false : true; } -export function getInputPositiveNumber(v: any, defaultValue: T): number | T { +export function getInputPositiveNumber(v: any, defaultValue: T): number|T { if (v === null || v === undefined) return defaultValue; v = Number(v); return !isNaN(v) && v >= 0 ? v : defaultValue; } -export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array): boolean | undefined { +export function isUserSizesValid(unit: 'percent'|'pixel', sizes: Array): boolean| + undefined { // All sizes have to be not null and total should be 100 if (unit === 'percent') { const total = sizes.reduce((total, s) => (s !== null ? total! + s : total), 0); @@ -51,7 +53,7 @@ export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array, - pixels: number, - allAreasSizePixel: number -): ISplitSideAbsorptionCapacity { - return sideAreas.reduce( - (acc, area) => { - const res = getAreaAbsorptionCapacity(unit, area, acc.remain, allAreasSizePixel); - (acc.list as any).push(res); - acc.remain = res!.pixelRemain; - return acc; - }, - { remain: pixels, list: [] } - ); + unit: 'percent'|'pixel', sideAreas: Array, pixels: number, + allAreasSizePixel: number): ISplitSideAbsorptionCapacity { + return sideAreas.reduce((acc, area) => { + const res = getAreaAbsorptionCapacity(unit, area, acc.remain, allAreasSizePixel); + (acc.list as any).push(res); + acc.remain = res!.pixelRemain; + return acc; + }, {remain: pixels, list: []}); } function getAreaAbsorptionCapacity( - unit: 'percent' | 'pixel', - areaSnapshot: IAreaSnapshot, - pixels: number, - allAreasSizePixel: number -): IAreaAbsorptionCapacity | undefined { + unit: 'percent'|'pixel', areaSnapshot: IAreaSnapshot, pixels: number, + allAreasSizePixel: number): IAreaAbsorptionCapacity|undefined { // No pain no gain if (pixels === 0) { return { @@ -144,10 +137,8 @@ function getAreaAbsorptionCapacity( } function getAreaAbsorptionCapacityPercent( - areaSnapshot: IAreaSnapshot, - pixels: number, - allAreasSizePixel: number -): IAreaAbsorptionCapacity | undefined { + areaSnapshot: IAreaSnapshot, pixels: number, + allAreasSizePixel: number): IAreaAbsorptionCapacity|undefined { const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels; const tempPercentSize = (tempPixelSize / allAreasSizePixel) * 100; @@ -206,10 +197,8 @@ function getAreaAbsorptionCapacityPercent( } function getAreaAbsorptionCapacityPixel( - areaSnapshot: IAreaSnapshot, - pixels: number, - containerSizePixel: number -): IAreaAbsorptionCapacity | undefined { + areaSnapshot: IAreaSnapshot, pixels: number, + containerSizePixel: number): IAreaAbsorptionCapacity|undefined { const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels; // ENLARGE AREA @@ -261,7 +250,7 @@ function getAreaAbsorptionCapacityPixel( } } -export function updateAreaSize(unit: 'percent' | 'pixel', item: IAreaAbsorptionCapacity) { +export function updateAreaSize(unit: 'percent'|'pixel', item: IAreaAbsorptionCapacity) { if (unit === 'percent') { item.areaSnapshot.area.size = item.percentAfterAbsorption; } else if (unit === 'pixel') { diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/module.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/module.ts index e2734a911d9..67d7fe0fb13 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/module.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/module.ts @@ -1,8 +1,8 @@ // tslint:disable -import { NgModule, ModuleWithProviders } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {CommonModule} from '@angular/common'; +import {ModuleWithProviders, NgModule} from '@angular/core'; -import { SplitModule } from './component/split.module'; +import {SplitModule} from './component/split.module'; @NgModule({ imports: [CommonModule, SplitModule], diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/public_api.ts b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/public_api.ts index 0c8456d3ef2..55f9fb0f920 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/public_api.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/public_api.ts @@ -3,6 +3,6 @@ * Public API Surface of angular-split */ -export { AngularSplitModule } from './lib/module'; -export { SplitComponent } from './lib/component/split.component'; -export { SplitAreaDirective } from './lib/component/splitArea.directive'; +export {SplitComponent} from './lib/component/split.component'; +export {SplitAreaDirective} from './lib/component/splitArea.directive'; +export {AngularSplitModule} from './lib/module'; diff --git a/devtools/projects/ng-devtools/src/lib/vendor/chromium/date-utilities.ts b/devtools/projects/ng-devtools/src/lib/vendor/chromium/date-utilities.ts index e6dfb2b0c27..f6cbc383f5c 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/chromium/date-utilities.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/chromium/date-utilities.ts @@ -16,12 +16,6 @@ export const toISO8601Compact = (date: Date): string => { } return ( - date.getFullYear() + - leadZero(date.getMonth() + 1) + - leadZero(date.getDate()) + - 'T' + - leadZero(date.getHours()) + - leadZero(date.getMinutes()) + - leadZero(date.getSeconds()) - ); + date.getFullYear() + leadZero(date.getMonth() + 1) + leadZero(date.getDate()) + 'T' + + leadZero(date.getHours()) + leadZero(date.getMinutes()) + leadZero(date.getSeconds())); }; diff --git a/devtools/projects/ng-devtools/src/lib/vendor/memo-decorator/index.ts b/devtools/projects/ng-devtools/src/lib/vendor/memo-decorator/index.ts index c07d23041a8..2cfabdcb2cd 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/memo-decorator/index.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/memo-decorator/index.ts @@ -12,7 +12,7 @@ export interface Config { } function memoize(func: Function, resolver: Resolver, cache: MapLike) { - const memoized = function () { + const memoized = function() { const args = arguments; const key = resolver.apply(this, args); const cache = memoized.cache; @@ -31,16 +31,15 @@ function memoize(func: Function, resolver: Resolver, cache: MapLike) { const defaultResolver: Resolver = (...args: any[]) => args[0]; -export const memo = - (config: Config = {}) => - (_: any, __: string, descriptor: PropertyDescriptor): PropertyDescriptor => { - if (typeof descriptor.value !== 'function') { - throw new Error('Memoization can be applied only to methods'); - } +export const memo = (config: Config = {}) => + (_: any, __: string, descriptor: PropertyDescriptor): PropertyDescriptor => { + if (typeof descriptor.value !== 'function') { + throw new Error('Memoization can be applied only to methods'); + } - const resolver = config.resolver ?? defaultResolver; - const cache = config.cache ?? new Map(); + const resolver = config.resolver ?? defaultResolver; + const cache = config.cache ?? new Map(); - descriptor.value = memoize(descriptor.value, resolver, cache); - return descriptor; - }; + descriptor.value = memoize(descriptor.value, resolver, cache); + return descriptor; + }; diff --git a/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/tree.ts b/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/tree.ts index 0815c75eead..92911952408 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/tree.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/tree.ts @@ -36,7 +36,7 @@ export interface Node { * Paths are /-delimited ids. */ export function treeify(data: Array<[string, number]>): Node { - const tree: Node = { size: 0 }; + const tree: Node = {size: 0}; for (const [path, size] of data) { const parts = path.replace(/\/$/, '').split('/'); let t = tree; @@ -45,7 +45,7 @@ export function treeify(data: Array<[string, number]>): Node { if (!t.children) t.children = []; let child = t.children.find((c) => c.id === id); if (!child) { - child = { id, size: 0 }; + child = {id, size: 0}; t.children.push(child); } if (parts.length === 0) { diff --git a/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/treemap.ts b/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/treemap.ts index 93c1a2bdb50..7cd67d47daa 100644 --- a/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/treemap.ts +++ b/devtools/projects/ng-devtools/src/lib/vendor/webtreemap/treemap.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Node } from './tree'; +import {Node} from './tree'; const CSS_PREFIX = 'webtreemap-'; const NODE_CSS_CLASS = CSS_PREFIX + 'node'; @@ -68,7 +68,7 @@ export interface Options { */ function getNodeIndex(target: Element): number { let index = 0; - let node: Element | null = target; + let node: Element|null = target; while ((node = node.previousElementSibling)) { if (isDOMNode(node)) index++; } @@ -82,12 +82,12 @@ function getNodeIndex(target: Element): number { */ export function getAddress(el: Element): number[] { let address: number[] = []; - let n: Element | null = el; + let n: Element|null = el; while (n && isDOMNode(n)) { address.unshift(getNodeIndex(n)); n = n.parentElement; } - address.shift(); // The first element will be the root, index 0. + address.shift(); // The first element will be the root, index 0. return address; } @@ -107,16 +107,16 @@ function defaultOptions(options: Partial): Options { lowerBound: options.lowerBound === undefined ? 0.1 : options.lowerBound, applyMutations: options.applyMutations || (() => null), caption: options.caption || ((node: Node) => node.id || ''), - showNode: - options.showNode || - ((node: Node, width: number, height: number): boolean => { - return width > 20 && height >= opts.padding[0]; - }), - showChildren: - options.showChildren || - ((node: Node, width: number, height: number): boolean => { - return width > 40 && height > 40; - }), + showNode: options.showNode || + ((node: Node, width: number, height: number): + boolean => { + return width > 20 && height >= opts.padding[0]; + }), + showChildren: options.showChildren || + ((node: Node, width: number, height: number): + boolean => { + return width > 40 && height > 40; + }), }; return opts; } @@ -151,14 +151,14 @@ export class TreeMap { * Returns [end, sum], where end is one past the last rectangle and sum is the * 2-d sum of the rectangles' areas. */ - private selectSpan(children: Node[], space: number, start: number): { end: number; sum: number } { + private selectSpan(children: Node[], space: number, start: number): {end: number; sum: number} { // Add rectangles one by one, stopping when aspect ratios begin to go // bad. Result is [start,end) covering the best run for this span. // http://scholar.google.com/scholar?cluster=5972512107845615474 - let smin = children[start].size; // Smallest seen child so far. - let smax = smin; // Largest child. - let sum = 0; // Sum of children in this span. - let lastScore = 0; // Best score yet found. + let smin = children[start].size; // Smallest seen child so far. + let smax = smin; // Largest child. + let sum = 0; // Sum of children in this span. + let lastScore = 0; // Best score yet found. let end = start; for (; end < children.length; end++) { const size = children[end].size; @@ -188,9 +188,8 @@ export class TreeMap { // Take the larger of these two ratios as the measure of the // worst non-squarenesss. const score = Math.max( - (smax * space * space) / (nextSum * nextSum), - (nextSum * nextSum) / (smin * space * space) - ); + (smax * space * space) / (nextSum * nextSum), + (nextSum * nextSum) / (smin * space * space)); if (lastScore && score > lastScore) { // Including this additional rectangle produces worse squareness than // without it. We're done. @@ -199,7 +198,7 @@ export class TreeMap { lastScore = score; sum = nextSum; } - return { end, sum }; + return {end, sum}; } /** Creates and positions child DOM for a node. */ @@ -213,12 +212,9 @@ export class TreeMap { // parent) and create each box 1px larger than necessary (to make // adjoining borders overlap). - let x1 = -1, - y1 = -1, - x2 = width - 1, - y2 = height - 1; + let x1 = -1, y1 = -1, x2 = width - 1, y2 = height - 1; - const spacing = 0; // TODO: this.options.spacing; + const spacing = 0; // TODO: this.options.spacing; const padding = this.options.padding; y1 += padding[0]; if (padding[1]) { @@ -232,12 +228,11 @@ export class TreeMap { let i: number = 0; if (this.options.showChildren(node, x2 - x1, y2 - y1)) { const scale = Math.sqrt(total / ((x2 - x1) * (y2 - y1))); - var x = x1, - y = y1; - children: for (let start = 0; start < children.length; ) { + var x = x1, y = y1; + children: for (let start = 0; start < children.length;) { x = x1; const space = scale * (x2 - x1); - const { end, sum } = this.selectSpan(children, space, start); + const {end, sum} = this.selectSpan(children, space, start); if (sum / total < this.options.lowerBound) break; const height = sum / space; const heightPx = Math.round(height / scale) + 1; @@ -289,7 +284,7 @@ export class TreeMap { const width = container.offsetWidth; const height = container.offsetHeight; dom.onclick = (e) => { - let node: Element | null = e.target as Element; + let node: Element|null = e.target as Element; while (!isDOMNode(node)) { node = node.parentElement; if (!node) return; diff --git a/devtools/projects/ng-devtools/src/public-api.ts b/devtools/projects/ng-devtools/src/public-api.ts index d2cd9a89951..c24607d7382 100644 --- a/devtools/projects/ng-devtools/src/public-api.ts +++ b/devtools/projects/ng-devtools/src/public-api.ts @@ -2,7 +2,7 @@ * Public API Surface of ng-devtools */ -export { DevToolsComponent } from './lib/devtools.component'; -export { DevToolsModule } from './lib/devtools.module'; +export {DevToolsComponent} from './lib/devtools.component'; +export {DevToolsModule} from './lib/devtools.module'; export * from './lib/application-operations'; export * from './lib/application-environment'; diff --git a/devtools/projects/ng-devtools/src/test.ts b/devtools/projects/ng-devtools/src/test.ts index 7a74f36c9b8..1ce190c07a7 100644 --- a/devtools/projects/ng-devtools/src/test.ts +++ b/devtools/projects/ng-devtools/src/test.ts @@ -2,8 +2,9 @@ import 'zone.js/dist/zone'; import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; + +import {getTestBed} from '@angular/core/testing'; +import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; declare const require: any; diff --git a/devtools/projects/protocol/karma.conf.js b/devtools/projects/protocol/karma.conf.js index b95ab9785a9..cfddb6ee121 100644 --- a/devtools/projects/protocol/karma.conf.js +++ b/devtools/projects/protocol/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -13,7 +13,7 @@ module.exports = function (config) { require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: true, // leave Jasmine Spec Runner output visible in browser + clearContext: true, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage/protocol'), diff --git a/devtools/projects/protocol/src/lib/message-bus.ts b/devtools/projects/protocol/src/lib/message-bus.ts index 3b1733f6a8c..9a46b75495e 100644 --- a/devtools/projects/protocol/src/lib/message-bus.ts +++ b/devtools/projects/protocol/src/lib/message-bus.ts @@ -1,4 +1,4 @@ -export type Parameters = F extends (...args: infer T) => any ? T : never; +export type Parameters = F extends(...args: infer T) => any ? T : never; export abstract class MessageBus { abstract on(topic: E, cb: T[E]): void; diff --git a/devtools/projects/protocol/src/lib/messages.ts b/devtools/projects/protocol/src/lib/messages.ts index 6b68fce3bc2..b8f87763811 100644 --- a/devtools/projects/protocol/src/lib/messages.ts +++ b/devtools/projects/protocol/src/lib/messages.ts @@ -1,4 +1,4 @@ -import { ViewEncapsulation } from '@angular/core'; +import {ViewEncapsulation} from '@angular/core'; export interface DirectiveType { name: string; @@ -14,7 +14,7 @@ export interface ComponentType { export interface DevToolsNode { element: string; directives: DirType[]; - component: CmpType | null; + component: CmpType|null; children: DevToolsNode[]; nativeElement?: Node; } @@ -48,14 +48,14 @@ export interface DirectivesProperties { } export interface DirectiveMetadata { - inputs: { [name: string]: string }; - outputs: { [name: string]: string }; + inputs: {[name: string]: string}; + outputs: {[name: string]: string}; encapsulation: ViewEncapsulation; onPush: boolean; } export interface Properties { - props: { [name: string]: Descriptor }; + props: {[name: string]: Descriptor}; metadata?: DirectiveMetadata; } @@ -67,7 +67,7 @@ export interface DirectivePosition { } export interface NestedProp { - name: string | number; + name: string|number; children: NestedProp[]; } @@ -89,7 +89,7 @@ export interface SelectedPropertiesQuery { properties: ComponentExplorerViewProperties; } -export type PropertyQuery = AllPropertiesQuery | SelectedPropertiesQuery; +export type PropertyQuery = AllPropertiesQuery|SelectedPropertiesQuery; export interface ComponentExplorerViewQuery { selectedElement: ElementPosition; @@ -144,9 +144,9 @@ export interface UpdatedStateData { export interface Route { name: string; - hash: string | null; + hash: string|null; path: string; - specificity: string | null; + specificity: string|null; handler: string; data: any; children?: Array; @@ -159,7 +159,8 @@ export interface Events { handshake: () => void; shutdown: () => void; queryNgAvailability: () => void; - ngAvailability: (config: { version: string | undefined | boolean; devMode: boolean; ivy: boolean }) => void; + ngAvailability: + (config: {version: string|undefined|boolean; devMode: boolean; ivy: boolean}) => void; inspectorStart: () => void; inspectorEnd: () => void; diff --git a/devtools/projects/protocol/src/lib/priority-aware-message-bus.spec.ts b/devtools/projects/protocol/src/lib/priority-aware-message-bus.spec.ts index 73e0ef138ba..9c877feef11 100644 --- a/devtools/projects/protocol/src/lib/priority-aware-message-bus.spec.ts +++ b/devtools/projects/protocol/src/lib/priority-aware-message-bus.spec.ts @@ -1,6 +1,6 @@ -import { MessageBus } from './message-bus'; -import { Events, Topic } from './messages'; -import { PriorityAwareMessageBus } from './priority-aware-message-bus'; +import {MessageBus} from './message-bus'; +import {Events, Topic} from './messages'; +import {PriorityAwareMessageBus} from './priority-aware-message-bus'; class MockMessageBus extends MessageBus { cbs: any = {}; diff --git a/devtools/projects/protocol/src/lib/priority-aware-message-bus.ts b/devtools/projects/protocol/src/lib/priority-aware-message-bus.ts index f8d0511dffd..ec8270ecf1b 100644 --- a/devtools/projects/protocol/src/lib/priority-aware-message-bus.ts +++ b/devtools/projects/protocol/src/lib/priority-aware-message-bus.ts @@ -1,5 +1,5 @@ -import { Topic, Events } from './messages'; -import { MessageBus } from './message-bus'; +import {MessageBus} from './message-bus'; +import {Events, Topic} from './messages'; type ThrottleTopicDuration = { [method in Topic]?: number; @@ -43,13 +43,14 @@ export class PriorityAwareMessageBus extends MessageBus { private _throttled: ThrottledTopics = {}; private _inProgress: TopicsInProgress = {}; - constructor(private _bus: MessageBus, private _setTimeout: typeof setTimeout = setTimeout) { + constructor( + private _bus: MessageBus, private _setTimeout: typeof setTimeout = setTimeout) { super(); } on(topic: E, cb: Events[E]): void { const self = this; - return this._bus.on(topic, function (): void { + return this._bus.on(topic, function(): void { cb.apply(this, arguments); self._afterMessage(topic); }); @@ -57,7 +58,7 @@ export class PriorityAwareMessageBus extends MessageBus { once(topic: E, cb: Events[E]): void { const self = this; - return this._bus.once(topic, function (): void { + return this._bus.once(topic, function(): void { cb.apply(this, arguments); self._afterMessage(topic); }); diff --git a/devtools/projects/protocol/src/test.ts b/devtools/projects/protocol/src/test.ts index dec5191a9b0..565fff1d5ad 100644 --- a/devtools/projects/protocol/src/test.ts +++ b/devtools/projects/protocol/src/test.ts @@ -2,8 +2,9 @@ import 'zone.js/dist/zone'; import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; + +import {getTestBed} from '@angular/core/testing'; +import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; declare const require: any; diff --git a/devtools/projects/shared-utils/karma.conf.js b/devtools/projects/shared-utils/karma.conf.js index 6e4f45fb752..c870e74a9af 100644 --- a/devtools/projects/shared-utils/karma.conf.js +++ b/devtools/projects/shared-utils/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -13,7 +13,7 @@ module.exports = function (config) { require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: true, // leave Jasmine Spec Runner output visible in browser + clearContext: true, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage/shared-utils'), diff --git a/devtools/projects/shared-utils/src/lib/shared-utils.spec.ts b/devtools/projects/shared-utils/src/lib/shared-utils.spec.ts index 5acca7bb09d..c02d0d8d075 100644 --- a/devtools/projects/shared-utils/src/lib/shared-utils.spec.ts +++ b/devtools/projects/shared-utils/src/lib/shared-utils.spec.ts @@ -1,4 +1,4 @@ -import { arrayEquals } from 'shared-utils'; +import {arrayEquals} from 'shared-utils'; describe('arrayEquals', () => { let a; diff --git a/devtools/projects/shared-utils/src/lib/shared-utils.ts b/devtools/projects/shared-utils/src/lib/shared-utils.ts index aca031d44b9..9cd3308a0b0 100644 --- a/devtools/projects/shared-utils/src/lib/shared-utils.ts +++ b/devtools/projects/shared-utils/src/lib/shared-utils.ts @@ -1,18 +1,19 @@ // works with arrays of string, numbers and booleans -export const arrayEquals = (a: (string | number | boolean)[], b: (string | number | boolean)[]): boolean => { - if (a.length !== b.length) { - return false; - } - if (a.length === 0) { - return b.length === 0; - } +export const arrayEquals = + (a: (string|number|boolean)[], b: (string|number|boolean)[]): boolean => { + if (a.length !== b.length) { + return false; + } + if (a.length === 0) { + return b.length === 0; + } - let equal; - for (let i = 0; i < a.length; i++) { - equal = i === 0 ? a[i] === b[i] : a[i] === b[i] && equal; - if (!equal) { - break; - } - } - return equal; -}; + let equal; + for (let i = 0; i < a.length; i++) { + equal = i === 0 ? a[i] === b[i] : a[i] === b[i] && equal; + if (!equal) { + break; + } + } + return equal; + }; diff --git a/devtools/projects/shared-utils/src/test.ts b/devtools/projects/shared-utils/src/test.ts index dec5191a9b0..565fff1d5ad 100644 --- a/devtools/projects/shared-utils/src/test.ts +++ b/devtools/projects/shared-utils/src/test.ts @@ -2,8 +2,9 @@ import 'zone.js/dist/zone'; import 'zone.js/dist/zone-testing'; -import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; + +import {getTestBed} from '@angular/core/testing'; +import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; declare const require: any; diff --git a/devtools/projects/shell-chrome/e2e/protractor.conf.js b/devtools/projects/shell-chrome/e2e/protractor.conf.js index 5c23d8477d9..47977a5833c 100644 --- a/devtools/projects/shell-chrome/e2e/protractor.conf.js +++ b/devtools/projects/shell-chrome/e2e/protractor.conf.js @@ -2,7 +2,7 @@ // Protractor configuration file, see link for more information // https://github.com/angular/protractor/blob/master/lib/config.ts -const { SpecReporter } = require('jasmine-spec-reporter'); +const {SpecReporter} = require('jasmine-spec-reporter'); /** * @type { import("protractor").Config } @@ -25,6 +25,6 @@ exports.config = { require('ts-node').register({ project: require('path').join(__dirname, './tsconfig.json'), }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}})); }, }; diff --git a/devtools/projects/shell-chrome/e2e/src/app.e2e-spec.ts b/devtools/projects/shell-chrome/e2e/src/app.e2e-spec.ts index 7849fa582ea..c27c3e13647 100644 --- a/devtools/projects/shell-chrome/e2e/src/app.e2e-spec.ts +++ b/devtools/projects/shell-chrome/e2e/src/app.e2e-spec.ts @@ -1,5 +1,6 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; +import {browser, logging} from 'protractor'; + +import {AppPage} from './app.po'; describe('workspace-project App', () => { let page: AppPage; @@ -15,14 +16,9 @@ describe('workspace-project App', () => { 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) - ); + const logs = await browser.manage().logs().get(logging.Type.BROWSER); + expect(logs).not.toContain(jasmine.objectContaining({ + level: logging.Level.SEVERE, + } as logging.Entry)); }); }); diff --git a/devtools/projects/shell-chrome/e2e/src/app.po.ts b/devtools/projects/shell-chrome/e2e/src/app.po.ts index 78a2dca4e96..414a15dfb5a 100644 --- a/devtools/projects/shell-chrome/e2e/src/app.po.ts +++ b/devtools/projects/shell-chrome/e2e/src/app.po.ts @@ -1,4 +1,4 @@ -import { browser, by, element } from 'protractor'; +import {browser, by, element} from 'protractor'; export class AppPage { navigateTo(): Promise { diff --git a/devtools/projects/shell-chrome/karma.conf.js b/devtools/projects/shell-chrome/karma.conf.js index 0bb918336da..c1648e6011a 100644 --- a/devtools/projects/shell-chrome/karma.conf.js +++ b/devtools/projects/shell-chrome/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -13,7 +13,7 @@ module.exports = function (config) { require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: true, // leave Jasmine Spec Runner output visible in browser + clearContext: true, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage/shell-chrome'), diff --git a/devtools/projects/shell-chrome/set-version.js b/devtools/projects/shell-chrome/set-version.js index a28664eeb79..b13d15c8b87 100644 --- a/devtools/projects/shell-chrome/set-version.js +++ b/devtools/projects/shell-chrome/set-version.js @@ -1,8 +1,8 @@ const chalk = require('chalk'); -const { createInterface } = require('readline'); +const {createInterface} = require('readline'); const semver = require('semver'); -const { writeFileSync, readFileSync } = require('fs'); -const { join } = require('path'); +const {writeFileSync, readFileSync} = require('fs'); +const {join} = require('path'); const MANIFEST_PATH = join(__dirname, 'src/manifest.json'); diff --git a/devtools/projects/shell-chrome/src/app/app.component.spec.ts b/devtools/projects/shell-chrome/src/app/app.component.spec.ts index 811857f2698..e2f53c13159 100644 --- a/devtools/projects/shell-chrome/src/app/app.component.spec.ts +++ b/devtools/projects/shell-chrome/src/app/app.component.spec.ts @@ -1,24 +1,25 @@ -import { TestBed, waitForAsync } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; -import { ApplicationOperations } from 'ng-devtools'; +import {TestBed, waitForAsync} from '@angular/core/testing'; +import {RouterTestingModule} from '@angular/router/testing'; +import {ApplicationOperations} from 'ng-devtools'; + +import {AppComponent} from './app.component'; describe('AppComponent', () => { - beforeEach( - waitForAsync(() => { - const applicationOperationsSPy = jasmine.createSpyObj('messageBus', ['viewSource']); - TestBed.configureTestingModule({ - declarations: [AppComponent], - imports: [RouterTestingModule], - providers: [ - { - provide: ApplicationOperations, - useClass: applicationOperationsSPy, - }, - ], - }).compileComponents(); - }) - ); + beforeEach(waitForAsync(() => { + const applicationOperationsSPy = jasmine.createSpyObj('messageBus', ['viewSource']); + TestBed + .configureTestingModule({ + declarations: [AppComponent], + imports: [RouterTestingModule], + providers: [ + { + provide: ApplicationOperations, + useClass: applicationOperationsSPy, + }, + ], + }) + .compileComponents(); + })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); diff --git a/devtools/projects/shell-chrome/src/app/app.component.ts b/devtools/projects/shell-chrome/src/app/app.component.ts index ad89e645994..bd1d98b0963 100644 --- a/devtools/projects/shell-chrome/src/app/app.component.ts +++ b/devtools/projects/shell-chrome/src/app/app.component.ts @@ -1,7 +1,8 @@ -import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core'; -import { injectScripts } from './inject'; -import { PriorityAwareMessageBus, MessageBus, Events } from 'protocol'; -import { ZoneAwareChromeMessageBus } from './zone-aware-chrome-message-bus'; +import {ChangeDetectorRef, Component, NgZone, OnInit} from '@angular/core'; +import {Events, MessageBus, PriorityAwareMessageBus} from 'protocol'; + +import {injectScripts} from './inject'; +import {ZoneAwareChromeMessageBus} from './zone-aware-chrome-message-bus'; @Component({ selector: 'app-root', diff --git a/devtools/projects/shell-chrome/src/app/app.module.ts b/devtools/projects/shell-chrome/src/app/app.module.ts index 1b2e70f4a5f..b1f39a414e4 100644 --- a/devtools/projects/shell-chrome/src/app/app.module.ts +++ b/devtools/projects/shell-chrome/src/app/app.module.ts @@ -1,10 +1,10 @@ -import { NgModule } from '@angular/core'; +import {NgModule} from '@angular/core'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {ApplicationEnvironment, ApplicationOperations, DevToolsModule} from 'ng-devtools'; -import { AppComponent } from './app.component'; -import { ApplicationEnvironment, ApplicationOperations, DevToolsModule } from 'ng-devtools'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { ChromeApplicationOperations } from './chrome-application-operations'; -import { ChromeApplicationEnvironment } from './chrome-application-environment'; +import {AppComponent} from './app.component'; +import {ChromeApplicationEnvironment} from './chrome-application-environment'; +import {ChromeApplicationOperations} from './chrome-application-operations'; @NgModule({ declarations: [AppComponent], @@ -21,4 +21,5 @@ import { ChromeApplicationEnvironment } from './chrome-application-environment'; }, ], }) -export class AppModule {} +export class AppModule { +} diff --git a/devtools/projects/shell-chrome/src/app/backend.ts b/devtools/projects/shell-chrome/src/app/backend.ts index 9b2e1f4ca50..7cd35318b38 100644 --- a/devtools/projects/shell-chrome/src/app/backend.ts +++ b/devtools/projects/shell-chrome/src/app/backend.ts @@ -1,9 +1,12 @@ -import { initializeMessageBus } from 'ng-devtools-backend'; -import { SamePageMessageBus } from './same-page-message-bus'; -import { initializeExtendedWindowOperations } from './chrome-window-extensions'; -import { unHighlight } from '../../../ng-devtools-backend/src/lib/highlighter'; +import {initializeMessageBus} from 'ng-devtools-backend'; -const messageBus = new SamePageMessageBus('angular-devtools-backend', 'angular-devtools-content-script'); +import {unHighlight} from '../../../ng-devtools-backend/src/lib/highlighter'; + +import {initializeExtendedWindowOperations} from './chrome-window-extensions'; +import {SamePageMessageBus} from './same-page-message-bus'; + +const messageBus = + new SamePageMessageBus('angular-devtools-backend', 'angular-devtools-content-script'); let initialized = false; messageBus.on('handshake', () => { @@ -23,15 +26,11 @@ messageBus.on('handshake', () => { inspectorRunning = false; }); - // handles case when mouse leaves chrome extension too quickly. unHighlight() is not a very expensive function - // and has an if check so it's DOM api call is not called more than necessary - document.addEventListener( - 'mousemove', - () => { - if (!inspectorRunning) { - unHighlight(); - } - }, - false - ); + // handles case when mouse leaves chrome extension too quickly. unHighlight() is not a very + // expensive function and has an if check so it's DOM api call is not called more than necessary + document.addEventListener('mousemove', () => { + if (!inspectorRunning) { + unHighlight(); + } + }, false); }); diff --git a/devtools/projects/shell-chrome/src/app/background.ts b/devtools/projects/shell-chrome/src/app/background.ts index cfcb43781d2..6477cddb2a9 100644 --- a/devtools/projects/shell-chrome/src/app/background.ts +++ b/devtools/projects/shell-chrome/src/app/background.ts @@ -1,11 +1,8 @@ -import { AngularDetection } from './ng-validate'; +import {AngularDetection} from './ng-validate'; // Electron does not expose browserAction object, // Use empty calls as fallback if they are not defined. -const browserAction = chrome.browserAction || { - setIcon: () => {}, - setPopup: () => {} -}; +const browserAction = chrome.browserAction || {setIcon: () => {}, setPopup: () => {}}; // By default use the black and white icon. // Replace it only when we detect an Angular app. @@ -19,16 +16,15 @@ browserAction.setIcon({ const ports: { [tab: string]: - | { - 'content-script': chrome.runtime.Port | null; - devtools: chrome.runtime.Port | null; - } - | undefined; + |{ + 'content-script': chrome.runtime.Port|null; + devtools: chrome.runtime.Port|null; + }|undefined; } = {}; chrome.runtime.onConnect.addListener((port) => { - let tab: string | null = null; - let name: string | null = null; + let tab: string|null = null; + let name: string|null = null; console.log('Connection event in the background script'); if (isNumeric(port.name)) { tab = port.name; @@ -73,41 +69,43 @@ const installContentScript = (tabId: number) => { console.log('Installing the content-script'); // We first inject the content-script and after that // invoke the global that it exposes. - chrome.tabs.executeScript(tabId, { file: 'app/content-script-es2015.js' }, (result) => { + chrome.tabs.executeScript(tabId, {file: 'app/content-script-es2015.js'}, (result) => { chrome.tabs.executeScript(tabId, { code: 'globalThis["content-script-out"].main()', }); }); }; -const doublePipe = (devtoolsPort: chrome.runtime.Port | null, contentScriptPort: chrome.runtime.Port, tab: string) => { - if (devtoolsPort === null) { - console.warn('DevTools port is equal to null'); - return; - } - console.log('Creating two-way communication channel', Date.now(), ports); +const doublePipe = + (devtoolsPort: chrome.runtime.Port|null, contentScriptPort: chrome.runtime.Port, + tab: string) => { + if (devtoolsPort === null) { + console.warn('DevTools port is equal to null'); + return; + } + console.log('Creating two-way communication channel', Date.now(), ports); - const onDevToolsMessage = (message: chrome.runtime.Port) => { - contentScriptPort.postMessage(message); - }; - devtoolsPort.onMessage.addListener(onDevToolsMessage); + const onDevToolsMessage = (message: chrome.runtime.Port) => { + contentScriptPort.postMessage(message); + }; + devtoolsPort.onMessage.addListener(onDevToolsMessage); - const onContentScriptMessage = (message: chrome.runtime.Port) => { - devtoolsPort.postMessage(message); - }; - contentScriptPort.onMessage.addListener(onContentScriptMessage); + const onContentScriptMessage = (message: chrome.runtime.Port) => { + devtoolsPort.postMessage(message); + }; + contentScriptPort.onMessage.addListener(onContentScriptMessage); - const shutdown = (source: string) => { - console.log('Disconnecting', source); - devtoolsPort.onMessage.removeListener(onDevToolsMessage); - contentScriptPort.onMessage.removeListener(onContentScriptMessage); - devtoolsPort.disconnect(); - contentScriptPort.disconnect(); - ports[tab] = undefined; - }; - devtoolsPort.onDisconnect.addListener(shutdown.bind(null, 'devtools')); - contentScriptPort.onDisconnect.addListener(shutdown.bind(null, 'content-script')); -}; + const shutdown = (source: string) => { + console.log('Disconnecting', source); + devtoolsPort.onMessage.removeListener(onDevToolsMessage); + contentScriptPort.onMessage.removeListener(onContentScriptMessage); + devtoolsPort.disconnect(); + contentScriptPort.disconnect(); + ports[tab] = undefined; + }; + devtoolsPort.onDisconnect.addListener(shutdown.bind(null, 'devtools')); + contentScriptPort.onDisconnect.addListener(shutdown.bind(null, 'content-script')); + }; const getPopUpName = (ng: AngularDetection) => { if (!ng.isAngular) { diff --git a/devtools/projects/shell-chrome/src/app/chrome-application-environment.ts b/devtools/projects/shell-chrome/src/app/chrome-application-environment.ts index 7182131bb50..6f50d3eb272 100644 --- a/devtools/projects/shell-chrome/src/app/chrome-application-environment.ts +++ b/devtools/projects/shell-chrome/src/app/chrome-application-environment.ts @@ -1,5 +1,6 @@ -import { ApplicationEnvironment, Environment } from 'ng-devtools'; -import { environment } from '../environments/environment'; +import {ApplicationEnvironment, Environment} from 'ng-devtools'; + +import {environment} from '../environments/environment'; export class ChromeApplicationEnvironment extends ApplicationEnvironment { get environment(): Environment { diff --git a/devtools/projects/shell-chrome/src/app/chrome-application-operations.ts b/devtools/projects/shell-chrome/src/app/chrome-application-operations.ts index a60343d89f4..dc0faef8534 100644 --- a/devtools/projects/shell-chrome/src/app/chrome-application-operations.ts +++ b/devtools/projects/shell-chrome/src/app/chrome-application-operations.ts @@ -1,16 +1,18 @@ -import { DirectivePosition, ElementPosition } from 'protocol'; -import { ApplicationOperations } from 'ng-devtools'; +import {ApplicationOperations} from 'ng-devtools'; +import {DirectivePosition, ElementPosition} from 'protocol'; export class ChromeApplicationOperations extends ApplicationOperations { viewSource(position: ElementPosition): void { if (chrome.devtools) { - chrome.devtools.inspectedWindow.eval(`inspect(inspectedApplication.findConstructorByPosition('${position}'))`); + chrome.devtools.inspectedWindow.eval( + `inspect(inspectedApplication.findConstructorByPosition('${position}'))`); } } selectDomElement(position: ElementPosition): void { if (chrome.devtools) { - chrome.devtools.inspectedWindow.eval(`inspect(inspectedApplication.findDomElementByPosition('${position}'))`); + chrome.devtools.inspectedWindow.eval( + `inspect(inspectedApplication.findDomElementByPosition('${position}'))`); } } @@ -21,8 +23,7 @@ export class ChromeApplicationOperations extends ApplicationOperations { objectPath, }; chrome.devtools.inspectedWindow.eval( - `inspect(inspectedApplication.findPropertyByPosition('${JSON.stringify(args)}'))` - ); + `inspect(inspectedApplication.findPropertyByPosition('${JSON.stringify(args)}'))`); } } } diff --git a/devtools/projects/shell-chrome/src/app/chrome-message-bus.ts b/devtools/projects/shell-chrome/src/app/chrome-message-bus.ts index 5b0a0a9b366..d811cb86694 100644 --- a/devtools/projects/shell-chrome/src/app/chrome-message-bus.ts +++ b/devtools/projects/shell-chrome/src/app/chrome-message-bus.ts @@ -1,4 +1,4 @@ -import { MessageBus, Events, Parameters } from 'protocol'; +import {Events, MessageBus, Parameters} from 'protocol'; interface ChromeMessage { topic: K; diff --git a/devtools/projects/shell-chrome/src/app/chrome-window-extensions.ts b/devtools/projects/shell-chrome/src/app/chrome-window-extensions.ts index 46d0a852da9..73fb7c7a73f 100644 --- a/devtools/projects/shell-chrome/src/app/chrome-window-extensions.ts +++ b/devtools/projects/shell-chrome/src/app/chrome-window-extensions.ts @@ -1,8 +1,9 @@ -import { findNodeFromSerializedPosition } from 'ng-devtools-backend'; -import { buildDirectiveForest, queryDirectiveForest } from '../../../ng-devtools-backend/src/lib/component-tree'; +import {findNodeFromSerializedPosition} from 'ng-devtools-backend'; + +import {buildDirectiveForest, queryDirectiveForest} from '../../../ng-devtools-backend/src/lib/component-tree'; export const initializeExtendedWindowOperations = () => { - extendWindowOperations(window, { inspectedApplication: chromeWindowExtensions }); + extendWindowOperations(window, {inspectedApplication: chromeWindowExtensions}); }; const extendWindowOperations = (target, classImpl: T) => { @@ -37,17 +38,16 @@ const chromeWindowExtensions = { return node.nativeElement; }, findPropertyByPosition: (args): any => { - const { directivePosition, objectPath } = JSON.parse(args); + const {directivePosition, objectPath} = JSON.parse(args); const node = queryDirectiveForest(directivePosition.element, buildDirectiveForest()); if (node === null) { console.error(`Cannot find element associated with node ${directivePosition}`); return undefined; } - const isDirective = - directivePosition.directive !== undefined && - node.directives[directivePosition.directive] && - typeof node.directives[directivePosition.directive] === 'object'; + const isDirective = directivePosition.directive !== undefined && + node.directives[directivePosition.directive] && + typeof node.directives[directivePosition.directive] === 'object'; if (isDirective) { return traverseDirective(node.directives[directivePosition.directive].instance, objectPath); } diff --git a/devtools/projects/shell-chrome/src/app/content-script.ts b/devtools/projects/shell-chrome/src/app/content-script.ts index c8b3c3b210b..243143d536f 100644 --- a/devtools/projects/shell-chrome/src/app/content-script.ts +++ b/devtools/projects/shell-chrome/src/app/content-script.ts @@ -1,5 +1,5 @@ -import { ChromeMessageBus } from './chrome-message-bus'; -import { SamePageMessageBus } from './same-page-message-bus'; +import {ChromeMessageBus} from './chrome-message-bus'; +import {SamePageMessageBus} from './same-page-message-bus'; export const main = () => { let backgroundDisconnected = false; @@ -21,7 +21,8 @@ export const main = () => { port.onDisconnect.addListener(handleDisconnect); - const localMessageBus = new SamePageMessageBus('angular-devtools-content-script', 'angular-devtools-backend'); + const localMessageBus = + new SamePageMessageBus('angular-devtools-content-script', 'angular-devtools-backend'); const chromeMessageBus = new ChromeMessageBus(port); const handshakeWithBackend = (): void => { diff --git a/devtools/projects/shell-chrome/src/app/inject.ts b/devtools/projects/shell-chrome/src/app/inject.ts index 32817e29681..a150da97a21 100644 --- a/devtools/projects/shell-chrome/src/app/inject.ts +++ b/devtools/projects/shell-chrome/src/app/inject.ts @@ -1,14 +1,14 @@ const loadScripts = (urls: string[]) => { return urls - .map((url, idx) => { - return ` + .map((url, idx) => { + return ` const script${idx} = document.constructor.prototype.createElement.call(document, 'script'); script${idx}.src = getScriptName("${url}"); document.documentElement.appendChild(script${idx}); script${idx}.parentNode.removeChild(script${idx}); `; - }) - .join('\n'); + }) + .join('\n'); }; let loaded = false; diff --git a/devtools/projects/shell-chrome/src/app/ng-validate.ts b/devtools/projects/shell-chrome/src/app/ng-validate.ts index 1eb517dc71a..1a86e4d84a0 100644 --- a/devtools/projects/shell-chrome/src/app/ng-validate.ts +++ b/devtools/projects/shell-chrome/src/app/ng-validate.ts @@ -33,17 +33,17 @@ function detectAngular(win: Window): void { } win.postMessage( - { - // Needs to be inline because we're stringifying - // this function and executing it with eval. - isIvy: typeof (window as any).getAllAngularRootElements?.()?.[0]?.__ngContext__ !== 'undefined', - isAngular, - isDebugMode, - isSupportedAngularVersion, - isAngularDevTools: true, - } as AngularDetection, - '*' - ); + { + // Needs to be inline because we're stringifying + // this function and executing it with eval. + isIvy: typeof (window as any).getAllAngularRootElements?.()?.[0]?.__ngContext__ !== + 'undefined', + isAngular, + isDebugMode, + isSupportedAngularVersion, + isAngularDevTools: true, + } as AngularDetection, + '*'); if (!isAngular) { setTimeout(() => detectAngular(win), 1000); diff --git a/devtools/projects/shell-chrome/src/app/same-page-message-bus.ts b/devtools/projects/shell-chrome/src/app/same-page-message-bus.ts index 4aec8211fbf..8d2f3d1a5e4 100644 --- a/devtools/projects/shell-chrome/src/app/same-page-message-bus.ts +++ b/devtools/projects/shell-chrome/src/app/same-page-message-bus.ts @@ -1,4 +1,4 @@ -import { MessageBus, Events, Parameters } from 'protocol'; +import {Events, MessageBus, Parameters} from 'protocol'; type AnyEventCallback = (topic: E, args: Parameters) => void; @@ -56,13 +56,12 @@ export class SamePageMessageBus extends MessageBus { emit(topic: E, args?: Parameters): boolean { window.postMessage( - { - source: this._source, - topic, - args, - }, - '*' - ); + { + source: this._source, + topic, + args, + }, + '*'); return true; } diff --git a/devtools/projects/shell-chrome/src/app/zone-aware-chrome-message-bus.ts b/devtools/projects/shell-chrome/src/app/zone-aware-chrome-message-bus.ts index 02c47a6f29c..20ef1e2d700 100644 --- a/devtools/projects/shell-chrome/src/app/zone-aware-chrome-message-bus.ts +++ b/devtools/projects/shell-chrome/src/app/zone-aware-chrome-message-bus.ts @@ -1,6 +1,7 @@ -import { ChromeMessageBus } from './chrome-message-bus'; -import { MessageBus, Events, Parameters } from 'protocol'; -import { NgZone } from '@angular/core'; +import {NgZone} from '@angular/core'; +import {Events, MessageBus, Parameters} from 'protocol'; + +import {ChromeMessageBus} from './chrome-message-bus'; export class ZoneAwareChromeMessageBus extends MessageBus { private _bus: ChromeMessageBus; @@ -10,21 +11,15 @@ export class ZoneAwareChromeMessageBus extends MessageBus { } on(topic: E, cb: Events[E]): void { - this._bus.on( - topic, - function (): void { - this._ngZone.run(() => cb.apply(null, arguments)); - }.bind(this) - ); + this._bus.on(topic, function(): void { + this._ngZone.run(() => cb.apply(null, arguments)); + }.bind(this)); } once(topic: E, cb: Events[E]): void { - this._bus.once( - topic, - function (): void { - this._ngZone.run(() => cb.apply(null, arguments)); - }.bind(this) - ); + this._bus.once(topic, function(): void { + this._ngZone.run(() => cb.apply(null, arguments)); + }.bind(this)); } emit(topic: E, args?: Parameters): boolean { diff --git a/devtools/projects/shell-chrome/src/environments/environment.ts b/devtools/projects/shell-chrome/src/environments/environment.ts index 464341c5c2b..cfd976264b8 100644 --- a/devtools/projects/shell-chrome/src/environments/environment.ts +++ b/devtools/projects/shell-chrome/src/environments/environment.ts @@ -1,4 +1,4 @@ export const environment = { production: false, - LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel + LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel }; diff --git a/devtools/projects/shell-chrome/src/main.ts b/devtools/projects/shell-chrome/src/main.ts index fa4e0aef337..2da4fd7312b 100644 --- a/devtools/projects/shell-chrome/src/main.ts +++ b/devtools/projects/shell-chrome/src/main.ts @@ -1,13 +1,11 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {enableProdMode} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; +import {AppModule} from './app/app.module'; +import {environment} from './environments/environment'; if (environment.production) { enableProdMode(); } -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err)); diff --git a/devtools/projects/shell-chrome/src/polyfills.ts b/devtools/projects/shell-chrome/src/polyfills.ts index 2f258e56c60..07fda0d3349 100644 --- a/devtools/projects/shell-chrome/src/polyfills.ts +++ b/devtools/projects/shell-chrome/src/polyfills.ts @@ -41,9 +41,10 @@ * * 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 + * (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 diff --git a/devtools/projects/shell-chrome/src/rollup.config.js b/devtools/projects/shell-chrome/src/rollup.config.js index 87158723b33..e97bbe39d53 100644 --- a/devtools/projects/shell-chrome/src/rollup.config.js +++ b/devtools/projects/shell-chrome/src/rollup.config.js @@ -1,4 +1,4 @@ -const { nodeResolve } = require('@rollup/plugin-node-resolve'); +const {nodeResolve} = require('@rollup/plugin-node-resolve'); const commonjs = require('@rollup/plugin-commonjs'); module.exports = { diff --git a/devtools/projects/shell-chrome/src/test.ts b/devtools/projects/shell-chrome/src/test.ts index da9049dc632..6689f8bd3ed 100644 --- a/devtools/projects/shell-chrome/src/test.ts +++ b/devtools/projects/shell-chrome/src/test.ts @@ -1,8 +1,9 @@ // 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'; + +import {getTestBed} from '@angular/core/testing'; +import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; declare const require: any; diff --git a/devtools/src/app/app.component.ts b/devtools/src/app/app.component.ts index 45be5be4f64..16d16dd1212 100644 --- a/devtools/src/app/app.component.ts +++ b/devtools/src/app/app.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; +import {Component} from '@angular/core'; +import {Router} from '@angular/router'; @Component({ selector: 'app-root', diff --git a/devtools/src/app/app.e2e.module.ts b/devtools/src/app/app.e2e.module.ts index 0a3f35f914a..4df03d3e184 100644 --- a/devtools/src/app/app.e2e.module.ts +++ b/devtools/src/app/app.e2e.module.ts @@ -1,11 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {RouterModule} from '@angular/router'; +import {ApplicationEnvironment, ApplicationOperations} from 'ng-devtools'; -import { AppComponent } from './app.component'; -import { DemoApplicationOperations } from '../demo-application-operations'; -import { ApplicationEnvironment, ApplicationOperations } from 'ng-devtools'; -import { DemoApplicationEnvironment } from '../demo-application-environment'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import {DemoApplicationEnvironment} from '../demo-application-environment'; +import {DemoApplicationOperations} from '../demo-application-operations'; + +import {AppComponent} from './app.component'; @NgModule({ declarations: [AppComponent], @@ -14,7 +15,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; RouterModule.forRoot([ { path: '', - loadChildren: () => import('./devtools-app/devtools-app.module').then((m) => m.DevToolsModule), + loadChildren: () => + import('./devtools-app/devtools-app.module').then((m) => m.DevToolsModule), pathMatch: 'full', }, { @@ -35,4 +37,5 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; ], bootstrap: [AppComponent], }) -export class AppModule {} +export class AppModule { +} diff --git a/devtools/src/app/app.module.ts b/devtools/src/app/app.module.ts index 91b0a8c7dc4..6483379a15a 100644 --- a/devtools/src/app/app.module.ts +++ b/devtools/src/app/app.module.ts @@ -1,11 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import {NgModule} from '@angular/core'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {RouterModule} from '@angular/router'; +import {ApplicationEnvironment, ApplicationOperations} from 'ng-devtools'; -import { AppComponent } from './app.component'; -import { DemoApplicationOperations } from '../demo-application-operations'; -import { ApplicationEnvironment, ApplicationOperations } from 'ng-devtools'; -import { DemoApplicationEnvironment } from '../demo-application-environment'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {DemoApplicationEnvironment} from '../demo-application-environment'; +import {DemoApplicationOperations} from '../demo-application-operations'; + +import {AppComponent} from './app.component'; @NgModule({ declarations: [AppComponent], @@ -14,7 +15,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; RouterModule.forRoot([ { path: '', - loadChildren: () => import('./devtools-app/devtools-app.module').then((m) => m.DevToolsModule), + loadChildren: () => + import('./devtools-app/devtools-app.module').then((m) => m.DevToolsModule), pathMatch: 'full', }, { @@ -35,4 +37,5 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ], bootstrap: [AppComponent], }) -export class AppModule {} +export class AppModule { +} diff --git a/devtools/src/app/demo-app/demo-app.component.ts b/devtools/src/app/demo-app/demo-app.component.ts index 8c5166131e6..08e5a49929e 100644 --- a/devtools/src/app/demo-app/demo-app.component.ts +++ b/devtools/src/app/demo-app/demo-app.component.ts @@ -1,5 +1,6 @@ -import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core'; -import { ZippyComponent } from './zippy.component'; +import {Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core'; + +import {ZippyComponent} from './zippy.component'; @Component({ selector: 'app-demo-component', @@ -17,7 +18,7 @@ export class DemoAppComponent { @Output() outputOne = new EventEmitter(); @Output('output_two') outputTwo = new EventEmitter(); - getTitle(): '► Click to expand' | '▼ Click to collapse' { + getTitle(): '► Click to expand'|'▼ Click to collapse' { if (!this.zippy || !this.zippy.visible) { return '► Click to expand'; } diff --git a/devtools/src/app/demo-app/demo-app.module.ts b/devtools/src/app/demo-app/demo-app.module.ts index 69a730ea10e..9f3b74918fb 100644 --- a/devtools/src/app/demo-app/demo-app.module.ts +++ b/devtools/src/app/demo-app/demo-app.module.ts @@ -1,12 +1,13 @@ -import { NgModule, Injector, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { DemoAppComponent } from './demo-app.component'; -import { RouterModule } from '@angular/router'; +import {CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule} from '@angular/core'; +import {createCustomElement} from '@angular/elements'; +import {RouterModule} from '@angular/router'; +import {initializeMessageBus} from 'ng-devtools-backend'; -import { initializeMessageBus } from 'ng-devtools-backend'; -import { ZippyComponent } from './zippy.component'; -import { ZoneUnawareIFrameMessageBus } from '../../zone-unaware-iframe-message-bus'; -import { HeavyComponent } from './heavy.component'; -import { createCustomElement } from '@angular/elements'; +import {ZoneUnawareIFrameMessageBus} from '../../zone-unaware-iframe-message-bus'; + +import {DemoAppComponent} from './demo-app.component'; +import {HeavyComponent} from './heavy.component'; +import {ZippyComponent} from './zippy.component'; @NgModule({ declarations: [DemoAppComponent, HeavyComponent], @@ -29,11 +30,10 @@ import { createCustomElement } from '@angular/elements'; }) export class DemoAppModule { constructor(injector: Injector) { - const el = createCustomElement(ZippyComponent, { injector }); + const el = createCustomElement(ZippyComponent, {injector}); customElements.define('app-zippy', el as any); } } -initializeMessageBus( - new ZoneUnawareIFrameMessageBus('angular-devtools-backend', 'angular-devtools', () => window.parent) -); +initializeMessageBus(new ZoneUnawareIFrameMessageBus( + 'angular-devtools-backend', 'angular-devtools', () => window.parent)); diff --git a/devtools/src/app/demo-app/heavy.component.ts b/devtools/src/app/demo-app/heavy.component.ts index c382123a1e5..c1d4f08c486 100644 --- a/devtools/src/app/demo-app/heavy.component.ts +++ b/devtools/src/app/demo-app/heavy.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; const fib = (n: number) => { if (n === 1 || n === 2) { @@ -13,7 +13,9 @@ const fib = (n: number) => { styleUrls: ['./heavy.component.scss'], }) export class HeavyComponent { - @Input() set foo(_: any) {} + @Input() + set foo(_: any) { + } state = { nested: { @@ -21,12 +23,14 @@ export class HeavyComponent { foo: 1, bar: 2, }, - [Symbol(3)](): number { - return 1.618; - }, - get foo(): number { - return 42; - }, + [Symbol(3)](): + number { + return 1.618; + }, + get foo(): + number { + return 42; + }, }, }; calculate(): number { diff --git a/devtools/src/app/demo-app/todo/about/about.component.ts b/devtools/src/app/demo-app/todo/about/about.component.ts index 18c47aa0f6a..95099b431f9 100644 --- a/devtools/src/app/demo-app/todo/about/about.component.ts +++ b/devtools/src/app/demo-app/todo/about/about.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-about', @@ -9,4 +9,5 @@ import { Component } from '@angular/core'; Home `, }) -export class AboutComponent {} +export class AboutComponent { +} diff --git a/devtools/src/app/demo-app/todo/about/about.module.ts b/devtools/src/app/demo-app/todo/about/about.module.ts index a5628d5db6e..0c86c98d1c6 100644 --- a/devtools/src/app/demo-app/todo/about/about.module.ts +++ b/devtools/src/app/demo-app/todo/about/about.module.ts @@ -1,6 +1,7 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { AboutComponent } from './about.component'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; + +import {AboutComponent} from './about.component'; @NgModule({ imports: [ @@ -15,4 +16,5 @@ import { AboutComponent } from './about.component'; declarations: [AboutComponent], exports: [AboutComponent], }) -export class AboutModule {} +export class AboutModule { +} diff --git a/devtools/src/app/demo-app/todo/app-todo.component.ts b/devtools/src/app/demo-app/todo/app-todo.component.ts index 81c4c7a7ce3..fdfccc02534 100644 --- a/devtools/src/app/demo-app/todo/app-todo.component.ts +++ b/devtools/src/app/demo-app/todo/app-todo.component.ts @@ -1,6 +1,7 @@ -import { Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { DialogComponent } from './dialog.component'; +import {Component} from '@angular/core'; +import {MatDialog} from '@angular/material/dialog'; + +import {DialogComponent} from './dialog.component'; @Component({ selector: 'app-todo-demo', @@ -16,7 +17,7 @@ export class AppTodoComponent { openDialog(): void { const dialogRef = this.dialog.open(DialogComponent, { width: '250px', - data: { name: this.name, animal: this.animal }, + data: {name: this.name, animal: this.animal}, }); dialogRef.afterClosed().subscribe((result) => { diff --git a/devtools/src/app/demo-app/todo/app.module.ts b/devtools/src/app/demo-app/todo/app.module.ts index 4bf8ae71bed..58dde424229 100644 --- a/devtools/src/app/demo-app/todo/app.module.ts +++ b/devtools/src/app/demo-app/todo/app.module.ts @@ -1,17 +1,13 @@ -import { NgModule } from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; +import {RouterModule} from '@angular/router'; -import { CommonModule } from '@angular/common'; - -import { RouterModule } from '@angular/router'; - -import { MatDialogModule } from '@angular/material/dialog'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { FormsModule } from '@angular/forms'; -import { MatInputModule } from '@angular/material/input'; - -import { AppTodoComponent } from './app-todo.component'; - -import { DialogComponent } from './dialog.component'; +import {AppTodoComponent} from './app-todo.component'; +import {DialogComponent} from './dialog.component'; @NgModule({ declarations: [AppTodoComponent, DialogComponent], @@ -49,4 +45,5 @@ import { DialogComponent } from './dialog.component'; exports: [AppTodoComponent], bootstrap: [AppTodoComponent], }) -export class AppModule {} +export class AppModule { +} diff --git a/devtools/src/app/demo-app/todo/dialog.component.ts b/devtools/src/app/demo-app/todo/dialog.component.ts index e3f36172f2b..28dc3e4542e 100644 --- a/devtools/src/app/demo-app/todo/dialog.component.ts +++ b/devtools/src/app/demo-app/todo/dialog.component.ts @@ -1,5 +1,5 @@ -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { Component, Inject } from '@angular/core'; +import {Component, Inject} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; export interface DialogData { animal: string; @@ -11,7 +11,9 @@ export interface DialogData { templateUrl: 'dialog.component.html', }) export class DialogComponent { - constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: DialogData) {} + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: DialogData) {} onNoClick(): void { this.dialogRef.close(); diff --git a/devtools/src/app/demo-app/todo/home/home.module.ts b/devtools/src/app/demo-app/todo/home/home.module.ts index 59b0b96b49e..5966cd0683c 100644 --- a/devtools/src/app/demo-app/todo/home/home.module.ts +++ b/devtools/src/app/demo-app/todo/home/home.module.ts @@ -1,11 +1,12 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { TodosComponent } from './todos.component'; -import { TodoComponent } from './todo.component'; -import { TodosFilter } from './todos.pipe'; -import { TooltipDirective } from './/tooltip.directive'; -import { CommonModule } from '@angular/common'; -import { SamplePipe } from './sample.pipe'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; + +import {TooltipDirective} from './/tooltip.directive'; +import {SamplePipe} from './sample.pipe'; +import {TodoComponent} from './todo.component'; +import {TodosComponent} from './todos.component'; +import {TodosFilter} from './todos.pipe'; @NgModule({ imports: [ @@ -21,4 +22,5 @@ import { SamplePipe } from './sample.pipe'; declarations: [SamplePipe, TodosComponent, TodoComponent, TodosFilter, TooltipDirective], exports: [TodosComponent], }) -export class HomeModule {} +export class HomeModule { +} diff --git a/devtools/src/app/demo-app/todo/home/sample.pipe.ts b/devtools/src/app/demo-app/todo/home/sample.pipe.ts index 6bfa29f37c6..a9738f74e81 100644 --- a/devtools/src/app/demo-app/todo/home/sample.pipe.ts +++ b/devtools/src/app/demo-app/todo/home/sample.pipe.ts @@ -1,4 +1,4 @@ -import { Pipe, OnDestroy, PipeTransform } from '@angular/core'; +import {OnDestroy, Pipe, PipeTransform} from '@angular/core'; @Pipe({ name: 'sample', diff --git a/devtools/src/app/demo-app/todo/home/todo.component.ts b/devtools/src/app/demo-app/todo/home/todo.component.ts index 23044d163cc..3757e0484b4 100644 --- a/devtools/src/app/demo-app/todo/home/todo.component.ts +++ b/devtools/src/app/demo-app/todo/home/todo.component.ts @@ -1,5 +1,6 @@ -import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core'; -import { Todo } from './todo'; +import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core'; + +import {Todo} from './todo'; @Component({ templateUrl: 'todo.component.html', diff --git a/devtools/src/app/demo-app/todo/home/todos.component.ts b/devtools/src/app/demo-app/todo/home/todos.component.ts index 6321998c3e3..b2099ef2096 100644 --- a/devtools/src/app/demo-app/todo/home/todos.component.ts +++ b/devtools/src/app/demo-app/todo/home/todos.component.ts @@ -1,6 +1,7 @@ -import { Component, EventEmitter, Output, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; -import { Todo } from './todo'; -import { TodoFilter } from './todos.pipe'; +import {ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core'; + +import {Todo} from './todo'; +import {TodoFilter} from './todos.pipe'; const fib = (n: number) => { if (n === 1 || n === 2) { @@ -68,7 +69,7 @@ export class TodosComponent implements OnInit, OnDestroy { completed: false, label: input.value, }; - const result: Todo = { ...todo, id: Math.random().toString() }; + const result: Todo = {...todo, id: Math.random().toString()}; this.todos.push(result); input.value = ''; } diff --git a/devtools/src/app/demo-app/todo/home/todos.pipe.ts b/devtools/src/app/demo-app/todo/home/todos.pipe.ts index c99828574cf..c3090a3446d 100644 --- a/devtools/src/app/demo-app/todo/home/todos.pipe.ts +++ b/devtools/src/app/demo-app/todo/home/todos.pipe.ts @@ -1,5 +1,6 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { Todo } from './todo'; +import {Pipe, PipeTransform} from '@angular/core'; + +import {Todo} from './todo'; export const enum TodoFilter { All = 'all', diff --git a/devtools/src/app/demo-app/todo/home/todos.service.ts b/devtools/src/app/demo-app/todo/home/todos.service.ts index 9f9c6fce58a..549c9fb4840 100644 --- a/devtools/src/app/demo-app/todo/home/todos.service.ts +++ b/devtools/src/app/demo-app/todo/home/todos.service.ts @@ -1,4 +1,4 @@ -import { Todo } from './todo'; +import {Todo} from './todo'; export abstract class TodosService { getAll(): Promise { @@ -10,7 +10,7 @@ export abstract class TodosService { updateTodo(todo: Todo): Promise { throw new Error('Not implemented'); } - deleteTodo({ id }: { id: string }): Promise { + deleteTodo({id}: {id: string}): Promise { throw new Error('Not implemented'); } } diff --git a/devtools/src/app/demo-app/todo/home/tooltip.directive.ts b/devtools/src/app/demo-app/todo/home/tooltip.directive.ts index a3a3ff81d7d..c24ded83368 100644 --- a/devtools/src/app/demo-app/todo/home/tooltip.directive.ts +++ b/devtools/src/app/demo-app/todo/home/tooltip.directive.ts @@ -1,4 +1,4 @@ -import { Directive, HostListener } from '@angular/core'; +import {Directive, HostListener} from '@angular/core'; @Directive({ selector: '[appTooltip]', diff --git a/devtools/src/app/demo-app/zippy.component.ts b/devtools/src/app/demo-app/zippy.component.ts index 2853b005fd6..3495a6f5054 100644 --- a/devtools/src/app/demo-app/zippy.component.ts +++ b/devtools/src/app/demo-app/zippy.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import {Component, Input} from '@angular/core'; @Component({ selector: 'app-zippy', diff --git a/devtools/src/app/devtools-app/devtools-app.component.ts b/devtools/src/app/devtools-app/devtools-app.component.ts index 0f141ea8e7a..799cdfcd95c 100644 --- a/devtools/src/app/devtools-app/devtools-app.component.ts +++ b/devtools/src/app/devtools-app/devtools-app.component.ts @@ -1,6 +1,7 @@ -import { Component, ViewChild, ElementRef } from '@angular/core'; -import { IFrameMessageBus } from '../../iframe-message-bus'; -import { PriorityAwareMessageBus, MessageBus, Events } from 'protocol'; +import {Component, ElementRef, ViewChild} from '@angular/core'; +import {Events, MessageBus, PriorityAwareMessageBus} from 'protocol'; + +import {IFrameMessageBus} from '../../iframe-message-bus'; @Component({ templateUrl: './devtools-app.component.html', @@ -9,19 +10,15 @@ import { PriorityAwareMessageBus, MessageBus, Events } from 'protocol'; { provide: MessageBus, useFactory(): MessageBus { - return new PriorityAwareMessageBus( - new IFrameMessageBus( - 'angular-devtools', - 'angular-devtools-backend', + return new PriorityAwareMessageBus(new IFrameMessageBus( + 'angular-devtools', 'angular-devtools-backend', // tslint:disable-next-line: no-non-null-assertion - () => (document.querySelector('#sample-app') as HTMLIFrameElement).contentWindow! - ) - ); + () => (document.querySelector('#sample-app') as HTMLIFrameElement).contentWindow!)); }, }, ], }) export class DevToolsComponent { - messageBus: IFrameMessageBus | null = null; + messageBus: IFrameMessageBus|null = null; @ViewChild('ref') iframe: ElementRef; } diff --git a/devtools/src/app/devtools-app/devtools-app.module.ts b/devtools/src/app/devtools-app/devtools-app.module.ts index 6c0cb08daa8..51b1d366eac 100644 --- a/devtools/src/app/devtools-app/devtools-app.module.ts +++ b/devtools/src/app/devtools-app/devtools-app.module.ts @@ -1,10 +1,9 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {DevToolsModule as NgDevToolsModule} from 'ng-devtools'; -import { DevToolsModule as NgDevToolsModule } from 'ng-devtools'; - -import { DevToolsComponent } from './devtools-app.component'; +import {DevToolsComponent} from './devtools-app.component'; @NgModule({ declarations: [DevToolsComponent], @@ -20,4 +19,5 @@ import { DevToolsComponent } from './devtools-app.component'; ]), ], }) -export class DevToolsModule {} +export class DevToolsModule { +} diff --git a/devtools/src/demo-application-environment.ts b/devtools/src/demo-application-environment.ts index f30b54972dd..3957c2f56d0 100644 --- a/devtools/src/demo-application-environment.ts +++ b/devtools/src/demo-application-environment.ts @@ -1,5 +1,6 @@ -import { ApplicationEnvironment, Environment } from 'ng-devtools'; -import { environment } from './environments/environment'; +import {ApplicationEnvironment, Environment} from 'ng-devtools'; + +import {environment} from './environments/environment'; export class DemoApplicationEnvironment extends ApplicationEnvironment { get environment(): Environment { diff --git a/devtools/src/demo-application-operations.ts b/devtools/src/demo-application-operations.ts index f7c48c5d796..dcc4601b1aa 100644 --- a/devtools/src/demo-application-operations.ts +++ b/devtools/src/demo-application-operations.ts @@ -1,5 +1,5 @@ -import { ApplicationOperations } from 'ng-devtools'; -import { DirectivePosition, ElementPosition } from 'protocol'; +import {ApplicationOperations} from 'ng-devtools'; +import {DirectivePosition, ElementPosition} from 'protocol'; export class DemoApplicationOperations extends ApplicationOperations { viewSource(position: ElementPosition): void { diff --git a/devtools/src/environments/environment.ts b/devtools/src/environments/environment.ts index fedfaa5f491..641ad2ee7c0 100644 --- a/devtools/src/environments/environment.ts +++ b/devtools/src/environments/environment.ts @@ -1,6 +1,6 @@ -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; export const environment = { production: false, - LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel + LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel }; diff --git a/devtools/src/iframe-message-bus.ts b/devtools/src/iframe-message-bus.ts index fe444ffdaae..ea180074457 100644 --- a/devtools/src/iframe-message-bus.ts +++ b/devtools/src/iframe-message-bus.ts @@ -1,11 +1,12 @@ -import { MessageBus, Events, Parameters } from 'protocol'; +import {Events, MessageBus, Parameters} from 'protocol'; type AnyEventCallback = (topic: E, args: Parameters) => void; export class IFrameMessageBus extends MessageBus { private _listeners: any[] = []; - constructor(private _source: string, private _destination: string, private _docWindow: () => Window) { + constructor( + private _source: string, private _destination: string, private _docWindow: () => Window) { super(); } @@ -56,13 +57,12 @@ export class IFrameMessageBus extends MessageBus { emit(topic: E, args?: Parameters): boolean { this._docWindow().postMessage( - { - source: this._source, - topic, - args, - }, - '*' - ); + { + source: this._source, + topic, + args, + }, + '*'); return true; } diff --git a/devtools/src/main.e2e.ts b/devtools/src/main.e2e.ts index 7c0ff97d9a3..d9ed43db570 100644 --- a/devtools/src/main.e2e.ts +++ b/devtools/src/main.e2e.ts @@ -1,13 +1,11 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {enableProdMode} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.e2e.module'; -import { environment } from './environments/environment'; +import {AppModule} from './app/app.e2e.module'; +import {environment} from './environments/environment'; if (environment.production) { enableProdMode(); } -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err)); diff --git a/devtools/src/main.ts b/devtools/src/main.ts index d9a2e7e4a58..e9f3d949d53 100644 --- a/devtools/src/main.ts +++ b/devtools/src/main.ts @@ -1,13 +1,11 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import {enableProdMode} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; +import {AppModule} from './app/app.module'; +import {environment} from './environments/environment'; if (environment.production) { enableProdMode(); } -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err)); diff --git a/devtools/src/polyfills.ts b/devtools/src/polyfills.ts index 07050e6c22f..c835d0ad7eb 100644 --- a/devtools/src/polyfills.ts +++ b/devtools/src/polyfills.ts @@ -41,9 +41,10 @@ * * 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 + * (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 @@ -56,7 +57,6 @@ * Zone JS is required by default for Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI. - /*************************************************************************************************** * APPLICATION IMPORTS */ diff --git a/devtools/src/rollup.config.js b/devtools/src/rollup.config.js index 87158723b33..e97bbe39d53 100644 --- a/devtools/src/rollup.config.js +++ b/devtools/src/rollup.config.js @@ -1,4 +1,4 @@ -const { nodeResolve } = require('@rollup/plugin-node-resolve'); +const {nodeResolve} = require('@rollup/plugin-node-resolve'); const commonjs = require('@rollup/plugin-commonjs'); module.exports = { diff --git a/devtools/src/test.ts b/devtools/src/test.ts index da9049dc632..6689f8bd3ed 100644 --- a/devtools/src/test.ts +++ b/devtools/src/test.ts @@ -1,8 +1,9 @@ // 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'; + +import {getTestBed} from '@angular/core/testing'; +import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; declare const require: any; diff --git a/devtools/src/zone-unaware-iframe-message-bus.ts b/devtools/src/zone-unaware-iframe-message-bus.ts index cbaba6fee5e..9950f1b426e 100644 --- a/devtools/src/zone-unaware-iframe-message-bus.ts +++ b/devtools/src/zone-unaware-iframe-message-bus.ts @@ -1,5 +1,6 @@ -import { IFrameMessageBus } from './iframe-message-bus'; -import { Events, MessageBus, Parameters } from 'protocol'; +import {Events, MessageBus, Parameters} from 'protocol'; + +import {IFrameMessageBus} from './iframe-message-bus'; type AnyEventCallback = (topic: E, args: Parameters) => void; diff --git a/devtools/yarn.lock b/devtools/yarn.lock index 7cc83e1b387..69fa50cac24 100644 --- a/devtools/yarn.lock +++ b/devtools/yarn.lock @@ -4011,15 +4011,7 @@ chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" -chalk@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" - integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== - dependencies: - ansi-styles "^4.1.0" - supports-color "^7.1.0" - -chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1: +chalk@^4.1.0, chalk@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad" integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg== @@ -4091,11 +4083,6 @@ chrome-trace-event@^1.0.2: resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac" integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg== -ci-info@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46" - integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ== - ci-info@^3.1.1: version "3.2.0" resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6" @@ -4354,11 +4341,6 @@ commondir@^1.0.1: resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs= -compare-versions@^3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62" - integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA== - comparify@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/comparify/-/comparify-0.2.0.tgz#c1fd6aa1e1df222bbf10b0bbf17198397e70c66d" @@ -5883,21 +5865,6 @@ execa@^1.0.0: signal-exit "^3.0.0" strip-eof "^1.0.0" -execa@^4.0.0: - version "4.0.3" - resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2" - integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A== - dependencies: - cross-spawn "^7.0.0" - get-stream "^5.0.0" - human-signals "^1.1.1" - is-stream "^2.0.0" - merge-stream "^2.0.0" - npm-run-path "^4.0.0" - onetime "^5.1.0" - signal-exit "^3.0.2" - strip-final-newline "^2.0.0" - executable@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c" @@ -6166,13 +6133,6 @@ find-up@^5.0.0: locate-path "^6.0.0" path-exists "^4.0.0" -find-versions@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-4.0.0.tgz#3c57e573bf97769b8cb8df16934b627915da4965" - integrity sha512-wgpWy002tA+wgmO27buH/9KzyEOQnKsG/R0yrcjPT9BOFm0zRBVQbZ95nRGXWMywS8YR5knRbpohio0bcJABxQ== - dependencies: - semver-regex "^3.1.2" - flatted@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" @@ -6827,22 +6787,6 @@ humanize-ms@^1.2.1: dependencies: ms "^2.0.0" -husky@^4.3.8: - version "4.3.8" - resolved "https://registry.yarnpkg.com/husky/-/husky-4.3.8.tgz#31144060be963fd6850e5cc8f019a1dfe194296d" - integrity sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow== - dependencies: - chalk "^4.0.0" - ci-info "^2.0.0" - compare-versions "^3.6.0" - cosmiconfig "^7.0.0" - find-versions "^4.0.0" - opencollective-postinstall "^2.0.2" - pkg-dir "^5.0.0" - please-upgrade-node "^3.2.0" - slash "^3.0.0" - which-pm-runs "^1.0.0" - husky@^7.0.1: version "7.0.4" resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535" @@ -8434,11 +8378,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -mri@^1.1.5: - version "1.1.6" - resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6" - integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ== - ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" @@ -8472,17 +8411,6 @@ multicast-dns@^6.0.1: dns-packet "^1.3.1" thunky "^1.0.2" -multimatch@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-4.0.0.tgz#8c3c0f6e3e8449ada0af3dd29efb491a375191b3" - integrity sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ== - dependencies: - "@types/minimatch" "^3.0.3" - array-differ "^3.0.0" - array-union "^2.1.0" - arrify "^2.0.1" - minimatch "^3.0.4" - multimatch@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-5.0.0.tgz#932b800963cea7a31a033328fa1e0c3a1874dbe6" @@ -8980,11 +8908,6 @@ open@^8.0.9: is-docker "^2.1.1" is-wsl "^2.2.0" -opencollective-postinstall@^2.0.2: - version "2.0.3" - resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259" - integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q== - opn@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc" @@ -9369,20 +9292,6 @@ pkg-dir@^3.0.0: dependencies: find-up "^3.0.0" -pkg-dir@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760" - integrity sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA== - dependencies: - find-up "^5.0.0" - -please-upgrade-node@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942" - integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg== - dependencies: - semver-compare "^1.0.0" - portfinder@^1.0.26, portfinder@^1.0.28: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -10018,11 +9927,6 @@ prettier@^1.15.1: resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== -prettier@^2.0.0: - version "2.3.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d" - integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ== - prettier@^2.3.2: version "2.4.1" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c" @@ -10033,18 +9937,6 @@ pretty-bytes@^5.3.0, pretty-bytes@^5.6.0: resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg== -pretty-quick@^3.0.0: - version "3.1.1" - resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-3.1.1.tgz#93ca4e2dd38cc4e970e3f54a0ead317a25454688" - integrity sha512-ZYLGiMoV2jcaas3vTJrLvKAYsxDoXQBUn8OSTxkl67Fyov9lyXivJTl0+2WVh+y6EovGcw7Lm5ThYpH+Sh3XxQ== - dependencies: - chalk "^3.0.0" - execa "^4.0.0" - find-up "^4.1.0" - ignore "^5.1.4" - mri "^1.1.5" - multimatch "^4.0.0" - process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -10828,11 +10720,6 @@ selfsigned@^1.10.11, selfsigned@^1.10.8: dependencies: node-forge "^0.10.0" -semver-compare@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc" - integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w= - semver-dsl@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/semver-dsl/-/semver-dsl-1.0.1.tgz#d3678de5555e8a61f629eed025366ae5f27340a0" @@ -10840,11 +10727,6 @@ semver-dsl@^1.0.1: dependencies: semver "^5.3.0" -semver-regex@^3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.2.tgz#34b4c0d361eef262e07199dbef316d0f2ab11807" - integrity sha512-bXWyL6EAKOJa81XG1OZ/Yyuq+oT0b2YLlxx7c+mrdYPaPbnj6WgVULXhinMIeZGufuUBu/eVRqXEhiv4imfwxA== - "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" @@ -12564,11 +12446,6 @@ which-module@^2.0.0: resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= -which-pm-runs@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb" - integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs= - which@^1.2.1, which@^1.2.9: version "1.3.1" resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" diff --git a/tsconfig-tslint.json b/tsconfig-tslint.json index 7c9ad1ac928..4e6bb1911fc 100644 --- a/tsconfig-tslint.json +++ b/tsconfig-tslint.json @@ -6,6 +6,7 @@ "packages/**/*", "modules/**/*", "tools/**/*", - "scripts/**/*" + "scripts/**/*", + "devtools/**/*", ] } diff --git a/tslint.json b/tslint.json index cdac3ee7b0d..a3829138d11 100644 --- a/tslint.json +++ b/tslint.json @@ -139,7 +139,11 @@ "./modules/benchmarks_external/**/*", // Ignore zone.js directory // TODO(JiaLiPassion): add zone.js back later - "./packages/zone.js/**/*" + "./packages/zone.js/**/*", + "./devtools/node_modules/**/*", + "./devtools/dist/**/*", + "./devtools/bazel-bin/**/*", + "./devtools/bazel-out/**/*" ] } }