Converted remaining js files to ts

chrislewisdev · Feb 10, 2019 · 3ca546e · 3ca546e
1 parent 50a6743
commit 3ca546e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 40 deletions.
diff --git a/src/js/prettyplan.ts b/src/js/prettyplan.ts
@@ -1,6 +1,6 @@
-import { getCurrentVersion, getLastUsedVersion, updateLastUsedVersion } from './releases.js';
-import { expandAll, collapseAll, accordion, closeModal } from './ui.js';
-import { showReleaseNotification, hideReleaseNotification, showReleaseNotes, displayParsingErrorMessage, hideParsingErrorMessage, clearExistingOutput, unHidePlan, render } from './render.js';
+import { getCurrentVersion, getLastUsedVersion, updateLastUsedVersion } from './releases';
+import { expandAll, collapseAll, accordion, closeModal } from './ui';
+import { showReleaseNotification, hideReleaseNotification, showReleaseNotes, displayParsingErrorMessage, hideParsingErrorMessage, clearExistingOutput, unHidePlan, render } from './render';
 import { parse } from './parse';
 
 window.addEventListener('load', function () {

diff --git a/src/js/releases.js → src/js/releases.ts b/src/js/releases.js → src/js/releases.ts
@@ -1,21 +1,26 @@
-export function getCurrentVersion() {
+export interface Release {
+    version: string;
+    notes: string[];
+}
+
+export function getCurrentVersion(): string {
     return releases[0].version;
 }
 
-export function getLastUsedVersion() {
+export function getLastUsedVersion(): string {
     return window.localStorage.getItem('lastUsedVersion');
 }
 
-export function updateLastUsedVersion() {
+export function updateLastUsedVersion(): void {
     window.localStorage.setItem('lastUsedVersion', getCurrentVersion());
 }
 
-export function getReleases() {
+export function getReleases(): Release[] {
     return releases;
 }
 
 //New releases should always go at the top of this list.
-var releases = [
+let releases: Release[] = [
     {
         version: 'v1.2',
         notes: [

diff --git a/src/js/render.js → src/js/render.ts b/src/js/render.js → src/js/render.ts
@@ -1,39 +1,40 @@
-import { removeChildren, addClass, removeClass, createModalContainer } from './ui.js';
-import { getReleases } from './releases.js';
+import { Plan, Action, Diff, Warning, ResourceId } from './parse'
+import { removeChildren, addClass, removeClass, createModalContainer } from './ui';
+import { Release, getReleases } from './releases';
 
-export function clearExistingOutput() {
+export function clearExistingOutput(): void {
     removeChildren(document.getElementById('errors'));
     removeChildren(document.getElementById('warnings'));
     removeChildren(document.getElementById('actions'));
 }
 
-export function hideParsingErrorMessage() {
+export function hideParsingErrorMessage(): void {
     addClass(document.getElementById('parsing-error-message'), 'hidden');
 }
 
-export function displayParsingErrorMessage() {
+export function displayParsingErrorMessage(): void {
     removeClass(document.getElementById('parsing-error-message'), 'hidden');
 }
 
-export function unHidePlan() {
+export function unHidePlan(): void {
     removeClass(document.getElementById('prettyplan'), 'hidden');
 }
 
-export function showReleaseNotification(version) {
+export function showReleaseNotification(version: string): void {
     const notificationElement = document.getElementById('release-notification');
     notificationElement.innerHTML = components.releaseNotification(version);
     removeClass(notificationElement, 'hidden');
 }
 
-export function hideReleaseNotification() {
+export function hideReleaseNotification(): void {
     addClass(document.getElementById('release-notification'), 'dismissed');
 }
 
-export function showReleaseNotes() {
+export function showReleaseNotes(): void {
     createModalContainer().innerHTML = components.modal(components.releaseNotes(getReleases()));
 }
 
-export function render(plan) {
+export function render(plan: Plan): void {
     if (plan.warnings) {
         const warningList = document.getElementById('warnings');
         warningList.innerHTML = plan.warnings.map(components.warning).join('');
@@ -46,11 +47,11 @@ export function render(plan) {
 }
 
 const components = {
-    badge: (label) => `
+    badge: (label: string): string => `
         <span class="badge">${label}</span>
     `,
 
-    id: (id) => `
+    id: (id: ResourceId): string => `
         <span class="id">
             ${id.prefixes.map(prefix => 
                 `<span class="id-segment prefix">${prefix}</span>`
@@ -60,21 +61,21 @@ const components = {
         </span>
     `,
 
-    warning: (warning) => `
+    warning: (warning: Warning): string => `
         <li>
             ${components.badge('warning')}
             ${components.id(warning.id)}
             <span>${warning.detail}</span>
         </li>
     `,
 
-    changeCount: (count) => `
+    changeCount: (count: number): string => `
         <span class="change-count">
             ${count + ' change' + (count > 1 ? 's' : '')}
         </span>
     `,
 
-    change: (change) => `
+    change: (change: Diff): string => `
         <tr>
             <td class="property">
                 ${change.property}
@@ -85,7 +86,7 @@ const components = {
         </tr>
     `,
 
-    action: (action) => `
+    action: (action: Action): string => `
         <li class="${action.type}">
             <div class="summary" onclick="accordion(this)">
                 ${components.badge(action.type)}
@@ -100,36 +101,36 @@ const components = {
         </li>
     `,
 
-    modal: (content) => `
+    modal: (content: string): string => `
         <div class="modal-pane" onclick="closeModal()"></div>
         <div class="modal-content">
             <div class="modal-close"><button class="text-button" onclick="closeModal()">close</button></div>
             ${content}
         </div>
     `,
 
-    releaseNotes: (releases) => `
+    releaseNotes: (releases: Release[]): string => `
         <div class="release-notes">
             <h1>Release Notes</h1>
             ${releases.map(components.release).join('')}
         </div>
     `,
 
-    release: (release) => `
+    release: (release: Release): string => `
         <h2>${release.version}</h2>
         <ul>
             ${release.notes.map((note) => `<li>${note}</li>`).join('')}
         </ul>
     `,
 
-    releaseNotification: (version) => `
+    releaseNotification: (version: string): string => `
         Welcome to ${version}!
         <button class="text-button" onclick="showReleaseNotes(); hideReleaseNotification()">View release notes?</button>
         (or <button class="text-button" onclick="hideReleaseNotification()">ignore</button>)
     `
 };
 
-function prettify(value) {
+function prettify(value: string): string {
     if (value === '<computed>')
     {
         return `<em>&lt;computed&gt;</em>`;
@@ -149,7 +150,7 @@ function prettify(value) {
     }
 }
 
-function prettifyJson(maybeJson) {
+function prettifyJson(maybeJson: string): string {
     try {
         return JSON.stringify(JSON.parse(maybeJson), null, 2);
     }

diff --git a/src/js/ui.js → src/js/ui.ts b/src/js/ui.js → src/js/ui.ts
@@ -1,11 +1,11 @@
-export function accordion(element) {
+export function accordion(element: Element): void {
     const changes = element.parentElement.getElementsByClassName('changes');
     for (var i = 0; i < changes.length; i++) {
         toggleClass(changes[i], 'collapsed');
     }
 }
 
-export function toggleClass(element, className) {
+export function toggleClass(element: Element, className: string): void {
     if (!element.className.match(className)) {
         element.className += ' ' + className;
     }
@@ -14,15 +14,15 @@ export function toggleClass(element, className) {
     }
 }
 
-export function addClass(element, className) {
+export function addClass(element: Element, className: string): void {
     if (!element.className.match(className)) element.className += ' ' + className;
 }
 
-export function removeClass(element, className) {
+export function removeClass(element: Element, className: string): void {
     element.className = element.className.replace(className, '');
 }
 
-export function expandAll() {
+export function expandAll(): void {
     const sections = document.querySelectorAll('.changes.collapsed');
 
     for (var i = 0; i < sections.length; i++) {
@@ -33,7 +33,7 @@ export function expandAll() {
     toggleClass(document.querySelector('.collapse-all'), 'hidden');
 }
 
-export function collapseAll() {
+export function collapseAll(): void {
     const sections = document.querySelectorAll('.changes:not(.collapsed)');
 
     for (var i = 0; i < sections.length; i++) {
@@ -44,13 +44,13 @@ export function collapseAll() {
     toggleClass(document.querySelector('.collapse-all'), 'hidden');
 }
 
-export function removeChildren(element) {
+export function removeChildren(element: Element): void {
     while (element.lastChild) {
         element.removeChild(element.lastChild);
     }
 }
 
-export function createModalContainer() {
+export function createModalContainer(): HTMLElement {
     const modalElement = document.createElement('div');
     modalElement.id = 'modal-container';
 
@@ -59,7 +59,7 @@ export function createModalContainer() {
     return modalElement;
 }
 
-export function closeModal() {
+export function closeModal(): void {
     const modalElement = document.getElementById('modal-container');
     document.body.removeChild(modalElement);
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,6 +2,6 @@
     "compilerOptions": {
         "outDir": "./dist/",
         "module": "es6",
-        "target": "es5"
+        "target": "es6"
     }
 }