katex 0.16.32 → 0.16.34

package/src/{domTree.js → domTree.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * These objects store the data about the DOM nodes we create, as well as some
  * extra data. They can then be transformed into real DOM nodes with the
@@ -21,7 +20,6 @@ import ParseError from "./ParseError";
 
 import type {VirtualNode} from "./tree";
 
-
 /**
  * Create an HTML className based on a list of classes. In addition to joining
  * with spaces, we also remove empty classes.
@@ -30,7 +28,21 @@ export const createClass = function(classes: string[]): string {
     return classes.filter(cls => cls).join(" ");
 };
 
+type InitNodeData = {
+    classes: string[];
+    attributes: Record<string, string>;
+    height: number;
+    depth: number;
+    maxFontSize: number;
+    style: CssStyle;
+};
+
+type HtmlNodeData = InitNodeData & {
+    children: VirtualNode[];
+};
+
 const initNode = function(
+    this: InitNodeData,
     classes?: string[],
     options?: Options,
     style?: CssStyle,
@@ -55,25 +67,20 @@ const initNode = function(
 /**
  * Convert into an HTML node
  */
-const toNode = function(tagName: string): HTMLElement {
+const toNode = function(this: HtmlNodeData, tagName: string): HTMLElement {
     const node = document.createElement(tagName);
 
     // Apply the class
     node.className = createClass(this.classes);
 
     // Apply inline styles
-    for (const style in this.style) {
-        if (this.style.hasOwnProperty(style)) {
-            // $FlowFixMe Flow doesn't seem to understand span.style's type.
-            node.style[style] = this.style[style];
-        }
+    for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
+        (node.style as any)[key] = this.style[key];
     }
 
     // Apply attributes
-    for (const attr in this.attributes) {
-        if (this.attributes.hasOwnProperty(attr)) {
-            node.setAttribute(attr, this.attributes[attr]);
-        }
+    for (const attr of Object.keys(this.attributes)) {
+        node.setAttribute(attr, this.attributes[attr]);
     }
 
     // Append the children, also as HTML nodes
@@ -97,7 +104,7 @@ const invalidAttributeNameRegex = /[\s"'>/=\x00-\x1f]/;
 /**
  * Convert into an HTML markup string
  */
-const toMarkup = function(tagName: string): string {
+const toMarkup = function(this: HtmlNodeData, tagName: string): string {
     let markup = `<${tagName}`;
 
     // Add the class
@@ -108,10 +115,8 @@ const toMarkup = function(tagName: string): string {
     let styles = "";
 
     // Add the styles, after hyphenation
-    for (const style in this.style) {
-        if (this.style.hasOwnProperty(style)) {
-            styles += `${hyphenate(style)}:${this.style[style]};`;
-        }
+    for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
+        styles += `${hyphenate(key)}:${this.style[key]};`;
     }
 
     if (styles) {
@@ -119,13 +124,11 @@ const toMarkup = function(tagName: string): string {
     }
 
     // Add the attributes
-    for (const attr in this.attributes) {
-        if (this.attributes.hasOwnProperty(attr)) {
-            if (invalidAttributeNameRegex.test(attr)) {
-                throw new ParseError(`Invalid attribute name '${attr}'`);
-            }
-            markup += ` ${attr}="${escape(this.attributes[attr])}"`;
+    for (const attr of Object.keys(this.attributes)) {
+        if (invalidAttributeNameRegex.test(attr)) {
+            throw new ParseError(`Invalid attribute name '${attr}'`);
         }
+        markup += ` ${attr}="${escape(this.attributes[attr])}"`;
     }
 
     markup += ">";
@@ -147,30 +150,30 @@ const toMarkup = function(tagName: string): string {
 // above.
 // This type does not include all CSS properties. Additional properties should
 // be added as needed.
-export type CssStyle = $Shape<{
-    backgroundColor: string,
-    borderBottomWidth: string,
-    borderColor: string,
-    borderRightStyle: string,
-    borderRightWidth: string,
-    borderTopWidth: string,
+export type CssStyle = Partial<{
+    backgroundColor: string;
+    borderBottomWidth: string;
+    borderColor: string;
+    borderRightStyle: string;
+    borderRightWidth: string;
+    borderTopWidth: string;
     borderStyle: string;
-    borderWidth: string,
-    bottom: string,
-    color: string,
-    height: string,
-    left: string,
-    margin: string,
-    marginLeft: string,
-    marginRight: string,
-    marginTop: string,
-    minWidth: string,
-    paddingLeft: string,
-    position: string,
-    textShadow: string,
-    top: string,
-    width: string,
-    verticalAlign: string,
+    borderWidth: string;
+    bottom: string;
+    color: string;
+    height: string;
+    left: string;
+    margin: string;
+    marginLeft: string;
+    marginRight: string;
+    marginTop: string;
+    minWidth: string;
+    paddingLeft: string;
+    position: string;
+    textShadow: string;
+    top: string;
+    width: string;
+    verticalAlign: string;
 }> & {};
 
 export interface HtmlDomNode extends VirtualNode {
@@ -179,7 +182,6 @@ export interface HtmlDomNode extends VirtualNode {
     depth: number;
     maxFontSize: number;
     style: CssStyle;
-
     hasClass(className: string): boolean;
 }
 
@@ -191,7 +193,6 @@ export type SvgSpan = Span<SvgNode>;
 export type SvgChildNode = PathNode | LineNode;
 export type documentFragment = DocumentFragment<HtmlDomNode>;
 
-
 /**
  * This node represents a span node, with a className, a list of children, and
  * an inline style. It also contains information about its height, depth, and
@@ -201,15 +202,15 @@ export type documentFragment = DocumentFragment<HtmlDomNode>;
  * otherwise. This typesafety is important when HTML builders access a span's
  * children.
  */
-export class Span<ChildType: VirtualNode> implements HtmlDomNode {
+export class Span<ChildType extends VirtualNode> implements HtmlDomNode {
     children: ChildType[];
-    attributes: {[string]: string};
-    classes: string[];
-    height: number;
-    depth: number;
-    width: ?number;
-    maxFontSize: number;
-    style: CssStyle;
+    attributes!: Record<string, string>;
+    classes!: string[];
+    height!: number;
+    depth!: number;
+    width: number | null | undefined;
+    maxFontSize!: number;
+    style!: CssStyle;
 
     constructor(
         classes?: string[],
@@ -249,12 +250,12 @@ export class Span<ChildType: VirtualNode> implements HtmlDomNode {
  */
 export class Anchor implements HtmlDomNode {
     children: HtmlDomNode[];
-    attributes: {[string]: string};
-    classes: string[];
-    height: number;
-    depth: number;
-    maxFontSize: number;
-    style: CssStyle;
+    attributes!: Record<string, string>;
+    classes!: string[];
+    height!: number;
+    depth!: number;
+    maxFontSize!: number;
+    style!: CssStyle;
 
     constructor(
         href: string,
@@ -304,6 +305,9 @@ export class Img implements VirtualNode {
         this.alt = alt;
         this.src = src;
         this.classes = ["mord"];
+        this.height = 0;
+        this.depth = 0;
+        this.maxFontSize = 0;
         this.style = style;
     }
 
@@ -318,11 +322,8 @@ export class Img implements VirtualNode {
         node.className = "mord";
 
         // Apply inline styles
-        for (const style in this.style) {
-            if (this.style.hasOwnProperty(style)) {
-                // $FlowFixMe
-                node.style[style] = this.style[style];
-            }
+        for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
+            (node.style as any)[key] = this.style[key];
         }
 
         return node;
@@ -334,10 +335,8 @@ export class Img implements VirtualNode {
 
         // Add the styles, after hyphenation
         let styles = "";
-        for (const style in this.style) {
-            if (this.style.hasOwnProperty(style)) {
-                styles += `${hyphenate(style)}:${this.style[style]};`;
-            }
+        for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
+            styles += `${hyphenate(key)}:${this.style[key]};`;
         }
         if (styles) {
             markup += ` style="${escape(styles)}"`;
@@ -348,7 +347,7 @@ export class Img implements VirtualNode {
     }
 }
 
-const iCombinations = {
+const iCombinations: Record<string, string> = {
     'î': '\u0131\u0302',
     'ï': '\u0131\u0308',
     'í': '\u0131\u0301',
@@ -431,12 +430,9 @@ export class SymbolNode implements HtmlDomNode {
             span.className = createClass(this.classes);
         }
 
-        for (const style in this.style) {
-            if (this.style.hasOwnProperty(style)) {
-                span = span || document.createElement("span");
-                // $FlowFixMe Flow doesn't seem to understand span.style's type.
-                span.style[style] = this.style[style];
-            }
+        for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
+            span = span || document.createElement("span");
+            (span.style as any)[key] = this.style[key];
         }
 
         if (span) {
@@ -469,10 +465,8 @@ export class SymbolNode implements HtmlDomNode {
         if (this.italic > 0) {
             styles += "margin-right:" + this.italic + "em;";
         }
-        for (const style in this.style) {
-            if (this.style.hasOwnProperty(style)) {
-                styles += hyphenate(style) + ":" + this.style[style] + ";";
-            }
+        for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
+            styles += hyphenate(key) + ":" + this.style[key] + ";";
         }
 
         if (styles) {
@@ -497,9 +491,12 @@ export class SymbolNode implements HtmlDomNode {
  */
 export class SvgNode implements VirtualNode {
     children: SvgChildNode[];
-    attributes: {[string]: string};
+    attributes: Record<string, string>;
 
-    constructor(children?: SvgChildNode[], attributes?: {[string]: string}) {
+    constructor(
+        children?: SvgChildNode[],
+        attributes?: Record<string, string>,
+    ) {
         this.children = children || [];
         this.attributes = attributes || {};
     }
@@ -509,10 +506,8 @@ export class SvgNode implements VirtualNode {
         const node = document.createElementNS(svgNS, "svg");
 
         // Apply attributes
-        for (const attr in this.attributes) {
-            if (Object.prototype.hasOwnProperty.call(this.attributes, attr)) {
-                node.setAttribute(attr, this.attributes[attr]);
-            }
+        for (const attr of Object.keys(this.attributes)) {
+            node.setAttribute(attr, this.attributes[attr]);
         }
 
         for (let i = 0; i < this.children.length; i++) {
@@ -525,10 +520,8 @@ export class SvgNode implements VirtualNode {
         let markup = `<svg xmlns="http://www.w3.org/2000/svg"`;
 
         // Apply attributes
-        for (const attr in this.attributes) {
-            if (Object.prototype.hasOwnProperty.call(this.attributes, attr)) {
-                markup += ` ${attr}="${escape(this.attributes[attr])}"`;
-            }
+        for (const attr of Object.keys(this.attributes)) {
+            markup += ` ${attr}="${escape(this.attributes[attr])}"`;
         }
 
         markup += ">";
@@ -546,7 +539,7 @@ export class SvgNode implements VirtualNode {
 
 export class PathNode implements VirtualNode {
     pathName: string;
-    alternate: ?string;
+    alternate: string | null | undefined;
 
     constructor(pathName: string, alternate?: string) {
         this.pathName = pathName;
@@ -576,9 +569,11 @@ export class PathNode implements VirtualNode {
 }
 
 export class LineNode implements VirtualNode {
-    attributes: {[string]: string};
+    attributes: Record<string, string>;
 
-    constructor(attributes?: {[string]: string}) {
+    constructor(
+        attributes?: Record<string, string>,
+    ) {
         this.attributes = attributes || {};
     }
 
@@ -587,10 +582,8 @@ export class LineNode implements VirtualNode {
         const node = document.createElementNS(svgNS, "line");
 
         // Apply attributes
-        for (const attr in this.attributes) {
-            if (Object.prototype.hasOwnProperty.call(this.attributes, attr)) {
-                node.setAttribute(attr, this.attributes[attr]);
-            }
+        for (const attr of Object.keys(this.attributes)) {
+            node.setAttribute(attr, this.attributes[attr]);
         }
 
         return node;
@@ -599,10 +592,8 @@ export class LineNode implements VirtualNode {
     toMarkup(): string {
         let markup = "<line";
 
-        for (const attr in this.attributes) {
-            if (Object.prototype.hasOwnProperty.call(this.attributes, attr)) {
-                markup += ` ${attr}="${escape(this.attributes[attr])}"`;
-            }
+        for (const attr of Object.keys(this.attributes)) {
+            markup += ` ${attr}="${escape(this.attributes[attr])}"`;
         }
 
         markup += "/>";