diff --git a/src/js/prettyplan.ts b/src/js/prettyplan.ts index 5f35124..cf52bee 100644 --- 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 b/src/js/releases.ts similarity index 83% rename from src/js/releases.js rename to src/js/releases.ts index 821b782..f1c24a7 100644 --- a/src/js/releases.js +++ b/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 b/src/js/render.ts similarity index 79% rename from src/js/render.js rename to src/js/render.ts index 0d8bacf..c819e74 100644 --- a/src/js/render.js +++ b/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 => ` ${label} `, - id: (id) => ` + id: (id: ResourceId): string => ` ${id.prefixes.map(prefix => `${prefix}` @@ -60,7 +61,7 @@ const components = { `, - warning: (warning) => ` + warning: (warning: Warning): string => `
  • ${components.badge('warning')} ${components.id(warning.id)} @@ -68,13 +69,13 @@ const components = {
  • `, - changeCount: (count) => ` + changeCount: (count: number): string => ` ${count + ' change' + (count > 1 ? 's' : '')} `, - change: (change) => ` + change: (change: Diff): string => ` ${change.property} @@ -85,7 +86,7 @@ const components = { `, - action: (action) => ` + action: (action: Action): string => `
  • ${components.badge(action.type)} @@ -100,7 +101,7 @@ const components = {
  • `, - modal: (content) => ` + modal: (content: string): string => ` `, - releaseNotes: (releases) => ` + releaseNotes: (releases: Release[]): string => `

    Release Notes

    ${releases.map(components.release).join('')}
    `, - release: (release) => ` + release: (release: Release): string => `

    ${release.version}

    `, - releaseNotification: (version) => ` + releaseNotification: (version: string): string => ` Welcome to ${version}! (or ) ` }; -function prettify(value) { +function prettify(value: string): string { if (value === '') { return `<computed>`; @@ -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 b/src/js/ui.ts similarity index 75% rename from src/js/ui.js rename to src/js/ui.ts index 6cbc0f6..59ab779 100644 --- a/src/js/ui.js +++ b/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); } \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 2487884..eb5a9f5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,6 @@ "compilerOptions": { "outDir": "./dist/", "module": "es6", - "target": "es5" + "target": "es6" } } \ No newline at end of file