refactor: Added support for strict null checks

Banned use of `null` keyword for simplicity, as peppering code with both `null` and `undefined` isn't the best thing ever.

Author: edcarroll

components/checkbox/checkbox.ts

@@ -37,12 +37,12 @@ export class SuiCheckbox implements ICustomValueAccessorHost<boolean> {
     @Input()
     public isReadonly:boolean;
 
-    public get checkedAttribute():string {
-        return this.isChecked ? "" : null;
+    public get checkedAttribute():string | undefined {
+        return this.isChecked ? "" : undefined;
     }
 
-    public get isDisabledAttribute():string {
-        return this.isDisabled ? "disabled" : null;
+    public get isDisabledAttribute():string | undefined {
+        return this.isDisabled ? "disabled" : undefined;
     }
 
     constructor() {

components/checkbox/radiobutton.ts

@@ -44,12 +44,12 @@ export class SuiRadioButton<T> implements ICustomValueAccessorHost<T> {
     @Input()
     public isReadonly:boolean;
 
-    public get checkedAttribute():string {
-        return this.isChecked ? "" : null;
+    public get checkedAttribute():string | undefined {
+        return this.isChecked ? "" : undefined;
     }
 
-    public get isDisabledAttribute():string {
-        return this.isDisabled ? "disabled" : null;
+    public get isDisabledAttribute():string | undefined {
+        return this.isDisabled ? "disabled" : undefined;
     }
 
     constructor() {

components/dropdown/dropdown.service.ts

@@ -21,7 +21,7 @@ export class DropdownService {
     public autoCloseMode:DropdownAutoCloseType;
 
     // Keep track of the containing dropdown so we can open it as necessary.
-    public parent:DropdownService;
+    public parent?:DropdownService;
     // Also keep track of dropdowns nested in this one so we can close them as necessary.
     public children:DropdownService[];
     public get isNested():boolean {
@@ -94,7 +94,7 @@ export class DropdownService {
     // Wipes any nested data, so all services can be cleanly reattached.
     public clearChildren():void {
         this.children.forEach(c => {
-            c.parent = null;
+            c.parent = undefined;
         });
         this.children = [];
     }

components/dropdown/dropdown.ts

@@ -58,8 +58,8 @@ export class SuiDropdown implements AfterContentInit {
     }
 
     @HostBinding("attr.tabindex")
-    public get tabIndex():number {
-        return (this.isDisabled || this.service.isNested) ? null : 0;
+    public get tabIndex():number | undefined {
+        return (this.isDisabled || this.service.isNested) ? undefined : 0;
     }
 
     @Input()

components/modal/modal-config.ts

@@ -11,14 +11,14 @@ export const ModalSize = {
 };
 
 // Stores a basic set of configuration options for a modal.
-export class ModalConfig<T, U = null, V = null> {
+export class ModalConfig<T, U = undefined, V = undefined> {
     // Determines whether the modal can be closed with a close button, clicking outside, or the escape key.
     public isClosable:boolean;
     // Value to deny with when closing via `isClosable`.
     public closeResult:V;
 
     // Data to pass to the modal instance when opened.
-    public context:T;
+    public context?:T;
 
     // Size used to display the modal.
     public size:ModalSize;
@@ -35,7 +35,7 @@ export class ModalConfig<T, U = null, V = null> {
     // Duration of the modal & dimmer transitions.
     public transitionDuration:number;
 
-    constructor(context:T = null, isClosable:boolean = true) {
+    constructor(context:T | undefined = undefined, isClosable:boolean = true) {
         // Initialise with default values.
         this.isClosable = isClosable;
         this.context = context;
@@ -52,21 +52,21 @@ export class ModalConfig<T, U = null, V = null> {
 }
 
 // Used when creating a modal from a `TemplateRef`.
-export class TemplateModalConfig<T, U = null, V = null> extends ModalConfig<T, U, V> {
+export class TemplateModalConfig<T, U = undefined, V = undefined> extends ModalConfig<T, U, V> {
     public template:ModalTemplate<T, U, V>;
 
-    constructor(template:ModalTemplate<T, U, V>, context:T = null, isClosable:boolean = true) {
+    constructor(template:ModalTemplate<T, U, V>, context:T | undefined = undefined, isClosable:boolean = true) {
         super(context, isClosable);
 
         this.template = template;
     }
 }
 
 // Used when creating a modal from an existing component.
-export class ComponentModalConfig<T, U = null, V = null> extends ModalConfig<T, U, V> {
+export class ComponentModalConfig<T, U = undefined, V = undefined> extends ModalConfig<T, U, V> {
     public component:Function;
 
-    constructor(component:Function, context:T = null, isClosable:boolean = true) {
+    constructor(component:Function, context:T | undefined = undefined, isClosable:boolean = true) {
         super(context, isClosable);
 
         this.component = component;

components/modal/modal-controls.ts

@@ -14,7 +14,7 @@ export class ModalControls<T, U> {
 }
 
 // Injected into custom modal components, to allow control of the modal, and access to a context object.
-export class Modal<T, U = null, V = null> extends ModalControls<U, V> {
+export class Modal<T, U = undefined, V = undefined> extends ModalControls<U, V> {
     public context:T;
 
     constructor(controls:ModalControls<U, V>, context:T) {

components/modal/modal.service.ts

@@ -54,7 +54,7 @@ export class SuiModalService {
             // Move all of the DOM elements inside the component to the main modal element.
             // This is done so that CSS classes apply correctly. It does stop any custom styles from working however,
             // so other ways may have to be investigated.
-            while (contentElement.hasChildNodes()) {
+            while (contentElement.hasChildNodes() && contentElement.parentElement && contentElement.firstChild) {
                 contentElement.parentElement.appendChild(contentElement.removeChild(contentElement.firstChild));
             }
             // Remove the generated component's 'empty shell' from the DOM.
@@ -69,7 +69,7 @@ export class SuiModalService {
         this._applicationRef.attachView(componentRef.hostView);
 
         // Move the new modal component DOM to the document body.
-        document.querySelector("body").appendChild(componentRef.location.nativeElement);
+        document.querySelector("body")!.appendChild(componentRef.location.nativeElement);
 
         // Initialise the generated modal with the provided config.
         modalComponent.loadConfig(modal);

components/modal/modal.ts

@@ -138,7 +138,7 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
 
     constructor(private _renderer:Renderer2) {
         // Initialise with default configuration from `ModalConfig` (to avoid writing defaults twice).
-        const config = new ModalConfig<null, T, U>();
+        const config = new ModalConfig<undefined, T, U>();
         this.loadConfig(config);
 
         // Event emitters for each of the possible modal outcomes.
@@ -219,7 +219,7 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
     // Decides whether the modal needs to reposition to allow scrolling.
     private updateScroll():void {
         // Semantic UI modal margin is 3.5rem, which is relative to the global font size, so for compatibility:
-        const fontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue("font-size"));
+        const fontSize = parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("font-size"));
         const margin = fontSize * 3.5;
 
         // _mustAlwaysScroll works by stopping _mustScroll from being automatically updated, so it stays `true`.

components/popup/popup-arrow.ts

@@ -77,13 +77,13 @@ export class SuiPopupArrow {
     @Input()
     public inverted:boolean;
 
-    public get direction():string {
+    public get direction():string | undefined {
         if (this.placement) {
             return this.placement.split(" ").shift();
         }
     }
 
-    public get alignment():string {
+    public get alignment():string | undefined {
         if (this.placement) {
             const alignment = this.placement.split(" ").pop();
             if (alignment === this.direction) {

components/popup/popup.directive.ts

@@ -81,11 +81,12 @@ export class SuiPopupDirective implements IPopup {
     }
 
     // Stores reference to generated popup component.
-    private _componentRef:ComponentRef<SuiPopup>;
+    private _componentRef?:ComponentRef<SuiPopup>;
 
     // Returns generated popup instance.
     private get _popup():SuiPopup {
-        return this._componentRef.instance;
+        // Use non-null assertion as we only access this when a popup exists.
+        return this._componentRef!.instance;
     }
 
     // `setTimeout` timer pointer for delayed popup open.
@@ -123,14 +124,16 @@ export class SuiPopupDirective implements IPopup {
                     this._popup.anchor = this._element;
 
                     // Move the generated element to the body to avoid any positioning issues.
-                    document.querySelector("body").appendChild(this._componentRef.location.nativeElement);
+                    document.querySelector("body")!.appendChild(this._componentRef.location.nativeElement);
 
                     // When the popup is closed (onClose fires on animation complete),
                     this._popup.onClose.subscribe(() => {
-                        // Destroy the component reference (which removes the popup from the DOM).
-                        this._componentRef.destroy();
-                        // Unset the reference pointer to enable a new popup to be created on next open.
-                        this._componentRef = null;
+                        if (this._componentRef) {
+                            // Destroy the component reference (which removes the popup from the DOM).
+                            this._componentRef.destroy();
+                            // Unset the reference pointer to enable a new popup to be created on next open.
+                            this._componentRef = undefined;
+                        }
                     });
                 }