feat(logmethod): add logNgHTML method to console

Author: nivekcode

projects/pretty-html-log/src/lib/logNgHTML.ts

@@ -0,0 +1,55 @@
+import { ComponentFixture } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { highlight, Theme } from 'pretty-html-log';
+import { prettyPrintFixture } from './pretty-fixture';
+import {
+  prettyPrintDebugElement,
+  prettyPrintDebugElements
+} from './pretty-debugElement';
+import {
+  prettyPrintHtmlEleemnt,
+  prettyPrintHtmlElements
+} from './pretty-htmlelement';
+
+export type NgHTMLElement<T> =
+  | ComponentFixture<T>
+  | DebugElement
+  | DebugElement[]
+  | HTMLElement
+  | HTMLElement[];
+
+export const logNgHTML = <T>(
+  ngHTMLElement: NgHTMLElement<T>,
+  theme?: Theme
+) => {
+  if (ngHTMLElement instanceof ComponentFixture) {
+    prettyPrintFixture<T>(ngHTMLElement);
+    return;
+  }
+
+  if (Array.isArray(ngHTMLElement)) {
+    if (ngHTMLElement[0] instanceof DebugElement) {
+      prettyPrintDebugElements(ngHTMLElement as DebugElement[]);
+      return;
+    }
+
+    if (ngHTMLElement[0] instanceof HTMLElement) {
+      prettyPrintHtmlElements(ngHTMLElement as HTMLElement[]);
+      return;
+    }
+  }
+
+  if (ngHTMLElement instanceof DebugElement) {
+    prettyPrintDebugElement(ngHTMLElement);
+    return;
+  }
+
+  if (ngHTMLElement instanceof HTMLElement) {
+    prettyPrintHtmlEleemnt(ngHTMLElement);
+    return;
+  }
+  console.log(
+    '@angular-extension/pretty-html-log: Unknown type - try to format anyway'
+  );
+  console.log(highlight(ngHTMLElement as any, theme));
+};

projects/pretty-html-log/src/lib/pretty-debugElement.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture } from '@angular/core/testing';
+import { highlight, Theme } from 'pretty-html-log';
+import { DebugElement } from '@angular/core';
+
+export const prettyPrintDebugElement = (
+  debugElement: DebugElement,
+  theme?: Theme
+): void => {
+  console.log(prettyDebugelement(debugElement, theme));
+};
+
+export const prettyPrintDebugElements = (
+  debugElements: DebugElement[],
+  theme?: Theme
+): void => {
+  for (let i = 0; i < debugElements.length; i++) {
+    console.log(`--------- Degubelement ${i} -----------
+        ${prettyDebugelement(debugElements[i], theme)}
+    `);
+  }
+};
+
+export const prettyDebugelement = (
+  debugElement: DebugElement,
+  theme?: Theme
+): string => {
+  return highlight(debugElement.nativeElement.innerHTML, theme);
+};

…etty-html-log/src/lib/pretty-html-log.ts …retty-html-log/src/lib/pretty-fixture.tsprojects/pretty-html-log/src/lib/pretty-html-log.ts renamed to projects/pretty-html-log/src/lib/pretty-fixture.ts projects/pretty-html-log/src/lib/pretty-html-log.ts renamed to projects/pretty-html-log/src/lib/pretty-fixture.ts

@@ -1,6 +1,5 @@
-import { highlight } from 'pretty-html-log';
-import { Theme } from 'pretty-html-log';
 import { ComponentFixture } from '@angular/core/testing';
+import { highlight, Theme } from 'pretty-html-log';
 
 export const prettyPrintFixture = <T>(
   fixture: ComponentFixture<T>,
@@ -15,13 +14,3 @@ export const prettyFixture = <T>(
 ): string => {
   return highlight(fixture.debugElement.nativeElement.innerHTML, theme);
 };
-
-(() => {
-  (console as any).logFixture = prettyPrintFixture;
-})();
-
-declare global {
-  interface Console {
-    logFixture: <T>(fixture: ComponentFixture<T>, theme?: Theme) => void;
-  }
-}

projects/pretty-html-log/src/lib/pretty-htmlelement.ts

@@ -0,0 +1,27 @@
+import { Theme } from 'pretty-html-log';
+import { highlight } from 'pretty-html-log';
+
+export const prettyPrintHtmlEleemnt = (
+  htmlElement: HTMLElement,
+  theme?: Theme
+): void => {
+  console.log(prettyHtmlElement(htmlElement, theme));
+};
+
+export const prettyPrintHtmlElements = (
+  htmlElements: HTMLElement[],
+  theme?: Theme
+): void => {
+  for (let i = 0; i < htmlElements.length; i++) {
+    console.log(`--------- HTMLElement ${i} -----------
+        ${prettyHtmlElement(htmlElements[i], theme)}
+    `);
+  }
+};
+
+export const prettyHtmlElement = (
+  htmlElement: HTMLElement,
+  theme?: Theme
+): string => {
+  return highlight(htmlElement.innerHTML, theme);
+};

projects/pretty-html-log/src/lib/setup-console-methods.ts

@@ -0,0 +1,13 @@
+import { ComponentFixture } from '@angular/core/testing';
+import { Theme } from 'pretty-html-log';
+import { logNgHTML, NgHTMLElement } from './logNgHTML';
+
+(() => {
+  (console as any).logNgHTML = logNgHTML;
+})();
+
+declare global {
+  interface Console {
+    logNgHTML: <T>(ngHTMLElement: any, theme?: Theme) => void;
+  }
+}

projects/pretty-html-log/src/public-api.ts

@@ -2,4 +2,4 @@
  * Public API Surface of pretty-html-log
  */
 
-export * from './lib/pretty-html-log';
+export * from './lib/setup-console-methods';