#122 add object-curly-spacing

package.json

@@ -50,6 +50,7 @@
     "load-grunt-config": "^0.19.2",
     "tsify": "^3.0.1",
     "tslint": "^5.2.0",
+    "tslint-eslint-rules": "^4.0.0",
     "typescript": "^2.3.2",
     "whatwg-fetch": "^2.0.3"
   },

src/ts/helpers/svg.ts

@@ -4,7 +4,7 @@
 
 import { addClass } from "./dom";
 
-export interface StringToStringOrNumberMap { [key: string]: string|number; }
+export interface StringToStringOrNumberMap { [key: string]: string | number; }
 export type DomAttributeMap = StringToStringOrNumberMap;
 export type CssStyleMap = StringToStringOrNumberMap;
 
@@ -48,9 +48,9 @@ interface SvgElementOptions {
 function newElement<T extends StylableSVGElement>(tagName: string,
                                                   {
                                                     attributes = {},
-                                                    css = {},
-                                                    text = "",
-                                                    className = "",
+    css = {},
+    text = "",
+    className = "",
                                                   }: SvgElementOptions = {}): T {
   const element = document.createElementNS(svgNamespaceUri, tagName) as T;
   if (className) {
@@ -66,35 +66,35 @@ function newElement<T extends StylableSVGElement>(tagName: string,
 }
 
 export function newSvg(className: string, attributes: DomAttributeMap, css: CssStyleMap = {}): SVGSVGElement {
-  return newElement<SVGSVGElement>("svg", {className, attributes, css});
+  return newElement<SVGSVGElement>("svg", { className, attributes, css });
 }
 
 export function newG(className: string, attributes: DomAttributeMap = {}, css: CssStyleMap = {}): SVGGElement {
-  return newElement<SVGGElement>("g", {className, attributes, css});
+  return newElement<SVGGElement>("g", { className, attributes, css });
 }
 
 export function newClipPath(id: string): SVGClipPathElement {
-  const attributes = {id};
-  return newElement<SVGClipPathElement>("clipPath", {attributes});
+  const attributes = { id };
+  return newElement<SVGClipPathElement>("clipPath", { attributes });
 }
 
 export function newForeignObject(attributes: DomAttributeMap) {
-  return newElement<SVGForeignObjectElement>("foreignObject", {attributes});
+  return newElement<SVGForeignObjectElement>("foreignObject", { attributes });
 }
 
 export function newA(className: string): SVGAElement {
-  return newElement<SVGAElement>("a", {className});
+  return newElement<SVGAElement>("a", { className });
 }
 
 export function newRect(attributes: DomAttributeMap,
                         className: string = "",
                         css: CssStyleMap = {}) {
-  return newElement<SVGRectElement>("rect", {attributes, className, css});
+  return newElement<SVGRectElement>("rect", { attributes, className, css });
 }
 
 export function newLine(attributes: DomAttributeMap,
                         className: string = "") {
-  return newElement<SVGLineElement>("line", {className, attributes});
+  return newElement<SVGLineElement>("line", { className, attributes });
 }
 
 export function newTitle(text: string) {
@@ -106,7 +106,7 @@ export function newTitle(text: string) {
 export function newTextEl(text: string,
                           attributes: DomAttributeMap = {},
                           css: CssStyleMap = {}) {
-  return newElement<SVGTextElement>("text", {text, attributes, css});
+  return newElement<SVGTextElement>("text", { text, attributes, css });
 }
 
 export function newPath(d: string) {
@@ -140,7 +140,7 @@ const getTestSVGEl = (() => {
 
     // needs access to body to measure size
     // TODO: refactor for server side use
-    if (svgTestEl.parentElement === undefined ) {
+    if (svgTestEl.parentElement === undefined) {
       window.document.body.appendChild(svgTestEl);
     }
 

src/ts/transformers/styling-converters.ts

@@ -1,4 +1,4 @@
-import {RequestType, TimingType} from "../typing/waterfall";
+import { RequestType, TimingType } from "../typing/waterfall";
 
 /**
  * Convert a RequestType into a CSS class

src/ts/typing/open-overlay.ts

@@ -1,4 +1,4 @@
-import {WaterfallEntry} from "./waterfall";
+import { WaterfallEntry } from "./waterfall";
 
 export type OnCloseFn = (overlayIndex: number) => void;
 

src/ts/typing/paging.ts

@@ -1,4 +1,4 @@
-import {WaterfallData} from "./waterfall";
+import { WaterfallData } from "./waterfall";
 
 // Callback called when the selected HAR page is changes
 export type OnPagingCb = (pageIndex: number, activePage: WaterfallData) => any;

src/ts/waterfall/row/svg-row-subcomponents.ts

@@ -66,14 +66,14 @@ function createTimingLabel(rectData: RectData, timeTotal: number, firstX: number
   const totalLabel = `${Math.round(timeTotal)} ms`;
 
   let percStart = (rectData.x + rectData.width) / rectData.unit + spacingPerc;
-  let txtEl = svg.newTextEl(totalLabel, {x: `${misc.roundNumber(percStart)}%`, y});
+  let txtEl = svg.newTextEl(totalLabel, { x: `${misc.roundNumber(percStart)}%`, y });
 
   // (pessimistic) estimation of text with to avoid performance penalty of `getBBox`
   const roughTxtWidth = totalLabel.length * 8;
 
   if (percStart + (roughTxtWidth / minWidth * 100) > 100) {
     percStart = firstX / rectData.unit - spacingPerc;
-    txtEl = svg.newTextEl(totalLabel, {x: `${misc.roundNumber(percStart)}%`, y}, {"textAnchor": "end"});
+    txtEl = svg.newTextEl(totalLabel, { x: `${misc.roundNumber(percStart)}%`, y }, { "textAnchor": "end" });
   }
 
   return txtEl;
@@ -121,7 +121,7 @@ export function createRect(rectData: RectData, segments: WaterfallEntryTiming[],
 export function createRequestNumberLabel(x: number, y: number, requestNumber: string, height: number, width: number) {
   y += Math.round(height / 2) + 5;
   x += width;
-  return svg.newTextEl(requestNumber, {x, y}, {"text-anchor": "end"});
+  return svg.newTextEl(requestNumber, { x, y }, { "text-anchor": "end" });
 }
 
 /**
@@ -169,7 +169,7 @@ export function createRequestLabelFull(x: number, y: number, name: string, heigh
 function createRequestLabel(x: number, y: number, name: string, height: number): SVGTextElement {
   const blockName = misc.resourceUrlFormatter(name, 125);
   y = y + Math.round(height / 2) + 5;
-  const blockLabel = svg.newTextEl(blockName, {x, y});
+  const blockLabel = svg.newTextEl(blockName, { x, y });
 
   blockLabel.appendChild(svg.newTitle(name));
   blockLabel.style.opacity = name.match(/js.map$/) ? "0.5" : "1";

src/ts/waterfall/sub-components/svg-alignment-helper.ts

@@ -4,7 +4,7 @@
 
 import { addClass, removeClass } from "../../helpers/dom";
 import * as svg from "../../helpers/svg";
-import {HoverElements, HoverEvtListeners} from "../../typing/svg-alignment-helpers";
+import { HoverElements, HoverEvtListeners } from "../../typing/svg-alignment-helpers";
 
 /**
  * Creates verticale alignment bars

src/ts/waterfall/svg-chart.ts

@@ -1,11 +1,11 @@
 import * as svg from "../helpers/svg";
-import {requestTypeToCssClass} from "../transformers/styling-converters";
-import {Context} from "../typing/context";
-import {ChartRenderOption} from "../typing/options";
-import {RectData} from "../typing/rect-data";
-import {HoverEvtListeners} from "../typing/svg-alignment-helpers";
-import {Mark} from "../typing/waterfall";
-import {WaterfallData, WaterfallEntry} from "../typing/waterfall";
+import { requestTypeToCssClass } from "../transformers/styling-converters";
+import { Context } from "../typing/context";
+import { ChartRenderOption } from "../typing/options";
+import { RectData } from "../typing/rect-data";
+import { HoverEvtListeners } from "../typing/svg-alignment-helpers";
+import { Mark } from "../typing/waterfall";
+import { WaterfallData, WaterfallEntry } from "../typing/waterfall";
 import OverlayManager from "./details-overlay/overlay-manager";
 import { PubSub } from "./details-overlay/pub-sub";
 import * as row from "./row/svg-row";
@@ -36,7 +36,7 @@ function getWidestDigitString(n: number): string {
  */
 function getSvgHeight(marks: Mark[], diagramHeight: number): number {
   const maxMarkTextLength = marks.reduce((currMax: number, currValue: Mark) => {
-    const attributes = {x: 0, y: 0};
+    const attributes = { x: 0, y: 0 };
     return Math.max(currMax, svg.getNodeTextWidth(svg.newTextEl(currValue.name, attributes), true));
   }, 0);
 

tslint.json

@@ -1,10 +1,14 @@
 {
-  "extends": "tslint:recommended",
+  "extends": [
+    "tslint:recommended",
+    "tslint-eslint-rules"
+  ],
   "rules": {
     "interface-name": [false],
 
     // Disable this until https://github.com/palantir/tslint/commit/16e8d0 is released to avoid crash
     "object-literal-key-quotes": [false],
+    "object-curly-spacing": [true],
 
     "no-console": [false],
     "no-string-literal": false,