Migrating Project to Typescript & updating packages

Author: SamKirkland

dist/knockout-component-documentor.bundle.js

@@ -0,0 +1,4 @@
+declare module "*.html" {
+    const value: DocumentFragment;
+    export default value;
+}

js/@types/html/index.d.ts

@@ -1,25 +1,48 @@
-import CodeMirror from "codemirror/lib/codemirror.js";
-import "codemirror/lib/codemirror.css";
-import "codemirror/theme/mdn-like.css";
-
-import Clipboard from "clipboard";
+import * as CodeMirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/mdn-like.css';
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/xml/xml.js';
+import 'codemirror/mode/htmlmixed/htmlmixed.js';
+
+import * as ClipboardJS from 'clipboard';
+
+class knockoutType {
+	constructor(baseType: string) {
+		this.baseType = baseType;
+
+		this.observable = `${baseType} observable`;
+		this.observableArray = `${baseType} observableArray`;
+		this.computed = `${baseType} computed`;
+	}
 
-import js from 'codemirror/mode/javascript/javascript.js';
-import xml from 'codemirror/mode/xml/xml.js';
-import htmlmixed from 'codemirror/mode/htmlmixed/htmlmixed.js';
+	baseType: string;
+	observable: string;
+	observableArray: string;
+	computed: string;
+}
 
-function knockoutType(baseType) {
-	this.baseType = baseType;
+class Generator {
+	rand = () => {
+		return Math.floor(Math.random() * 26) + Date.now();
+	}
 
-	// knockout types
-	this.observable = `${baseType} observable`;
-	this.observableArray = `${baseType} observableArray`;
-	this.computed = `${baseType} computed`;
+	getId = () => {
+		return 'uniqueID_' + (this.rand() + 1);
+	}
+}
 
-	return this;
+declare global {
+    interface Window {
+		idGen: Generator;
+		paramAsText: (property: any) => string;
+		codeEditorFunction: (element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any) => void;
+	}
 }
 
-window.paramAsText = function(property) {
+window.idGen = new Generator();
+
+window.paramAsText = function(property: any) {
 	if (property === undefined) {
 		return "undefined";
 	}
@@ -31,49 +54,45 @@ window.paramAsText = function(property) {
 	return JSON.stringify(property);
 }
 
-
-function Generator() {};
-Generator.prototype.rand =  Math.floor(Math.random() * 26) + Date.now();
-Generator.prototype.getId = function() { return 'uniqueID_' + this.rand++; };
-window.idGen = new Generator();
-
-
-
-
 // Create uniqueID and run function
 // pass a function that accepts the params (element, allBindings, viewModel, bindingContext)
 ko.bindingHandlers.uniqueIdFunction = {
-    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
+    init: (element, valueAccessor, allBindings, viewModel, bindingContext) => {
 		// bind a unique ID
-		let uniqueID = idGen.getId();
+		let uniqueID = window.idGen.getId();
 		element.setAttribute("id", uniqueID);
 
 		ko.unwrap(valueAccessor)().fn(element, valueAccessor, allBindings, viewModel, bindingContext);
     } 
 };
 
 ko.bindingHandlers.addUniqueID = {
-	init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
-		let uniqueID = idGen.getId();
+	init: (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) => {
+		let uniqueID = window.idGen.getId();
 		element.setAttribute("id", uniqueID);
 		valueAccessor()(uniqueID);
 	}
 };
 
 ko.bindingHandlers.clipboard = {
-	init: function(el, valueAccessor, allBindings, data, context) {
-		new Clipboard(el, {
-			text: function(trigger) {
-				return ko.unwrap(valueAccessor());
-			}
-		}).on('success', function(e) {
-			$(e.trigger).addClass("btn-success").find("span")
-				.removeClass("glyphicon-copy")
-				.addClass("glyphicon-ok");
-			setTimeout(function(){
-				$(e.trigger).removeClass("btn-success").find("span")
-					.addClass("glyphicon-copy")
-					.removeClass("glyphicon-ok");
+	init: (el, valueAccessor, allBindings, data, context) => {
+		new ClipboardJS(el, {
+			text: (trigger) => ko.unwrap(valueAccessor())
+		}).on('success', (e) => {
+			const trigger = e.trigger;
+			trigger.classList.add("btn-success");
+
+			// show copied icon
+			const copyIcon = trigger.querySelector("span");
+			copyIcon.classList.remove("glyphicon-copy");
+			copyIcon.classList.add("glyphicon-ok");
+
+			// revert copy button
+			setTimeout(() => {
+				trigger.classList.remove("btn-success");
+
+				copyIcon.classList.add("glyphicon-copy");
+				copyIcon.classList.remove("glyphicon-ok");
 			}, 750);
 		});
 	}
@@ -99,7 +118,7 @@ ko.bindingHandlers.innerHtml = {
 		// re-add
 		element.innerHTML = `<div data-bind='component: { name: componentName, params: componentParamObject }'>${valueUnwrapped.value()}</div>`;
 		// apply the binding again
-		setTimeout(function(){
+		setTimeout(() => {
 			try {
 				ko.applyBindings(viewModel, element.firstChild);
 			}
@@ -132,7 +151,6 @@ window.codeEditorFunction = function(element, valueAccessor, allBindings, viewMo
 		readOnly: bindingParams.readOnly,
 		lineWrapping: true,
 		indentWithTabs: true,
-		matchBrackets: true,
 		theme: "mdn-like"
 	});
 
@@ -145,7 +163,7 @@ window.codeEditorFunction = function(element, valueAccessor, allBindings, viewMo
 };
 
 
-import "./knockout-documentation-search.js";
-import "./knockout-component-documentor.js";
-import "./random-sample-component.js";
-import "./jsdoc-sample-component.js";
+import "./knockout-documentation-search.ts";
+import "./knockout-component-documentor.ts";
+import "./random-sample-component.ts";
+import "./jsdoc-sample-component.ts";

js/entry.js js/entry.tsjs/entry.js renamed to js/entry.ts

@@ -0,0 +1,38 @@
+import './jsdoc-sample-component.scss';
+import jsdocSampleComponent from './jsdoc-sample-component.html';
+
+class JsDocSampleComponentVM {
+	constructor(params: {
+		observableString: KnockoutObservable<string>,
+		defaultString: KnockoutObservable<string>,
+		numParam: number,
+		observableNumber: KnockoutObservableArray<number>,
+	}) {
+		this.observableString = params.observableString;
+		this.defaultString = params.defaultString || ko.observable("default value");
+		this.numParam = params.numParam;
+		this.observableNumber = params.observableNumber;
+	}
+	
+	observableString: KnockoutObservable<string>;
+	defaultString: KnockoutObservable<string>;
+	numParam: number;
+	observableNumber: KnockoutObservableArray<number>;
+}
+
+ko.components.register('jsdoc-sample-component', {
+	/**
+	 * @component jsdoc-sample-component
+	 * @tags ["demo", "example", "tag", "test"]
+	 * @description A quite wonderful component.
+	 * @category JSDoc Folder
+	 * @param {ko.observable(string)} params.obsString - A observable that is a string type
+	 * @param {string} [params.defaultString=default value] - This param has a default value of "default value"
+	 * @param {number} params.numParam - A param number type
+	 * @param {ko.observable(number)} params.obsNumber - A observable that is a number type
+	 */
+	viewModel: function(params: any) {
+		return new JsDocSampleComponentVM(params);
+	},
+	template: jsdocSampleComponent
+});