💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀

Outdated

💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀💀

---

angular-batscanner

Packages

angular-batscanner-chrome

The chrome extension

angular-batscanner-core

The core functionalities

angular-batscanner-devtool

The timeline devtool

Install

npm install angular-batscanner-core

You will need to replace the default CompilerMetadataResolver with BatscannerCompilerMetadataResolver to be able to extract the activity of the all components at runtime.

Usage

Rainbow comsole

import {
  BATSCANNER_PROVIDERS,
  BATSCANNER_ROOT_COMPONENT,
  BatscannerEventEmitter,
  BatscannerRainbowConsoleEmitter
} from 'angular-batscanner-core'

const compilerOptions = {
  providers: [
    BATSCANNER_PROVIDERS,
    {
      provide: BATSCANNER_ROOT_COMPONENT,
      useValue: TimerAppComponent
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerRainbowConsoleEmitter,
      multi: true
    }
  ]
}

document.addEventListener('DOMContentLoaded', function () {
  ng.platformBrowserDynamic
    .platformBrowserDynamic()
    .bootstrapModule(AppModule, compilerOptions)
})

Devtools performance marks

import {
  BATSCANNER_PROVIDERS,
  BATSCANNER_ROOT_COMPONENT,
  BatscannerEventEmitter,

  BatscannerPerformanceMarkEmitter
} from 'angular-batscanner-core'

const compilerOptions = {
  providers: [
    BATSCANNER_PROVIDERS,
    {
      provide: BATSCANNER_ROOT_COMPONENT,
      useValue: TimerAppComponent
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerPerformanceMarkEmitter,
      multi: true
    }
  ]
}

document.addEventListener('DOMContentLoaded', function () {
  ng.platformBrowserDynamic
    .platformBrowserDynamic()
    .bootstrapModule(AppModule, compilerOptions)
})

Batscanner devtool

Install the batscanner chrome devtool

import {
  BATSCANNER_PROVIDERS,
  BATSCANNER_ROOT_COMPONENT,
  BatscannerEventEmitter,

  BatscannerWindowPostMessageEmitter
} from 'angular-batscanner-core'

const compilerOptions = {
  providers: [
    BATSCANNER_PROVIDERS,
    {
      provide: BATSCANNER_ROOT_COMPONENT,
      useValue: TimerAppComponent
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerWindowPostMessageEmitter,
      multi: true
    }
  ]
}

document.addEventListener('DOMContentLoaded', function () {
  ng.platformBrowserDynamic
    .platformBrowserDynamic()
    .bootstrapModule(AppModule, compilerOptions)
})

Then open the devtool you should see a new tab named Angular Batscanner after you app started. Click on it ;) The devtool is recording by default when it's open. You can go on using your app and see on the devtool the Angular activity.

All for them (because YOLO)

const compilerOptions = {
  providers: [
    BATSCANNER_PROVIDERS,
    {
      provide: BATSCANNER_ROOT_COMPONENT,
      useValue: TimerAppComponent
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerWindowPostMessageEmitter,
      multi: true
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerRainbowConsoleEmitter,
      multi: true
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerPerformanceMarkEmitter,
      multi: true
    }
  ]
}

TODO

• Use standard version and conventional-github-releaser

npm i -D standard-version conventional-github-releaser

License

Copyright © Douglas Duteil <douglasduteil@gmail.com>
This work is free. You can redistribute it and/or modify it under the
terms of the Do What The Fuck You Want To Public License, Version 2,
as published by Sam Hocevar. See the LICENCE file for more details.