From 557fceff7001abc2dc19eeb242efe75aff9f258e Mon Sep 17 00:00:00 2001
From: Masashi Hirano <shisama07@gmail.com>
Date: Sun, 24 Mar 2019 16:53:17 +0900
Subject: [PATCH] Convert to typescript (#7)

* convert to typescript

* Improve build options to check strictly

* Remove unnecessary build options
---
 .npmignore                     |  4 ++-
 demo/demo.bundle.js            | 11 ++++---
 demo/demo.bundle.js.map        |  1 +
 demo/demo.js                   |  2 +-
 lib/pulsator.d.ts              | 10 ++++++
 lib/pulsator.js                | 47 ++++++++++++++++++++++++++
 package-lock.json              |  8 ++++-
 package.json                   | 11 +++++--
 pulsator.js => src/pulsator.ts | 11 +++++--
 tsconfig.json                  | 60 ++++++++++++++++++++++++++++++++++
 10 files changed, 151 insertions(+), 14 deletions(-)
 create mode 100644 demo/demo.bundle.js.map
 create mode 100644 lib/pulsator.d.ts
 create mode 100644 lib/pulsator.js
 rename pulsator.js => src/pulsator.ts (76%)
 create mode 100644 tsconfig.json

diff --git a/.npmignore b/.npmignore
index c9c8465..eb757e3 100644
--- a/.npmignore
+++ b/.npmignore
@@ -2,5 +2,7 @@
 .cache
 capture
 demo
+src
 .gitignore
-renovate.json
\ No newline at end of file
+renovate.json
+tsconfig.json
diff --git a/demo/demo.bundle.js b/demo/demo.bundle.js
index 1dd78e7..f35f846 100644
--- a/demo/demo.bundle.js
+++ b/demo/demo.bundle.js
@@ -1,5 +1,6 @@
-require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;i<n.length;i++)t(n[i]);return t}({3:[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var n=function(){function n(e,i){t(this,n),this.element=document.createElement("div"),e.appendChild(this.element);Object.assign(this.element.style,{display:"none",width:"15px",height:"15px",borderRadius:"50%",borderColor:"red",background:"red",boxShadow:"0 0 0 rgba(255,0,0, 0.4)"},i),this.animation=this.element.animate({boxShadow:["0 0 0 0 rgba(255,0,0, 1)","0 0 0 20px rgba(255,0,0, 0)"]},{duration:1500,iterations:"Infinity"}),this.animation.cancel()}return e(n,[{key:"start",value:function(){this.element.style.display="block",this.animation.play()}},{key:"stop",value:function(){this.animation.cancel(),this.element.style.display="none"}},{key:"pause",value:function(){this.animation.pause()}},{key:"reverse",value:function(){this.animation.reverse()}},{key:"getElement",value:function(){return this.element}}]),n}();exports.default=n;
-},{}],1:[function(require,module,exports) {
-"use strict";var e=require("../pulsator.js"),t=n(e);function n(e){return e&&e.__esModule?e:{default:e}}var o={width:"20px",height:"20px"},s=document.querySelector(".demo-space"),u=new t.default(s,o),r=u.getElement();r.style.position="absolute",s.addEventListener("click",function(e){r.style.left=e.pageX-10+"px",r.style.top=e.pageY-10+"px",u.start()}),r.onmouseover=function(e){u.pause()},r.onmouseleave=function(e){u.start()},window.onkeydown=function(e){"Escape"===e.key&&u.stop(),"Enter"===e.key&&u.reverse()};
-},{"../pulsator.js":3}]},{},[1])
\ No newline at end of file
+parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"hqs/":[function(require,module,exports) {
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(){function e(e,t){this.element=document.createElement("div"),e.appendChild(this.element);Object.assign(this.element.style,{display:"none",width:"15px",height:"15px",borderRadius:"50%",borderColor:"red",background:"red",boxShadow:"0 0 0 rgba(255,0,0, 0.4)"},t),this.animation=this.element.animate({boxShadow:["0 0 0 0 rgba(255,0,0, 1)","0 0 0 20px rgba(255,0,0, 0)"]},{duration:1500,iterations:1/0}),this.animation.cancel()}return e.prototype.start=function(){this.element.style.display="block",this.animation.play()},e.prototype.stop=function(){this.animation.cancel(),this.element.style.display="none"},e.prototype.pause=function(){this.animation.pause()},e.prototype.reverse=function(){this.animation.reverse()},e.prototype.getElement=function(){return this.element},e}();exports.default=e;
+},{}],"lgAh":[function(require,module,exports) {
+"use strict";var e=t(require("../lib/pulsator.js"));function t(e){return e&&e.__esModule?e:{default:e}}var n={width:"20px",height:"20px"},o=document.querySelector(".demo-space"),s=new e.default(o,n),u=s.getElement();u.style.position="absolute",o.addEventListener("click",function(e){u.style.left=e.pageX-10+"px",u.style.top=e.pageY-10+"px",s.start()}),u.onmouseover=function(e){s.pause()},u.onmouseleave=function(e){s.start()},window.onkeydown=function(e){"Escape"===e.key&&s.stop(),"Enter"===e.key&&s.reverse()};
+},{"../lib/pulsator.js":"hqs/"}]},{},["lgAh"], null)
+//# sourceMappingURL=/demo.bundle.js.map
\ No newline at end of file
diff --git a/demo/demo.bundle.js.map b/demo/demo.bundle.js.map
new file mode 100644
index 0000000..4564042
--- /dev/null
+++ b/demo/demo.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/pulsator.js","demo.js"],"names":["Object","defineProperty","exports","value","Pulsator","parent","options","element","document","createElement","appendChild","assign","style","display","width","height","borderRadius","borderColor","background","boxShadow","animation","animate","duration","iterations","Infinity","cancel","prototype","start","play","stop","pause","reverse","getElement","default","querySelector","pulsator","el","position","addEventListener","event","left","pageX","top","pageY","onmouseover","onmouseleave","window","onkeydown","key"],"mappings":";AAAA,aACAA,OAAOC,eAAeC,QAAS,aAAc,CAAEC,OAAO,IACtD,IAAIC,EAA0B,WACjBA,SAAAA,EAASC,EAAQC,GACjBC,KAAAA,QAAUC,SAASC,cAAc,OACtCJ,EAAOK,YAAY,KAAKH,SAUxBP,OAAOW,OAAO,KAAKJ,QAAQK,MATf,CACRC,QAAS,OACTC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,YAAa,MACbC,WAAY,MACZC,UAAW,4BAE0Bb,GACpCc,KAAAA,UAAY,KAAKb,QAAQc,QAAQ,CACrB,UAAA,CACT,2BACA,gCAEL,CACCC,SAAU,KACVC,WAAYC,EAAAA,IAEXJ,KAAAA,UAAUK,SAmBZrB,OAjBPA,EAASsB,UAAUC,MAAQ,WAClBpB,KAAAA,QAAQK,MAAMC,QAAU,QACxBO,KAAAA,UAAUQ,QAEnBxB,EAASsB,UAAUG,KAAO,WACjBT,KAAAA,UAAUK,SACVlB,KAAAA,QAAQK,MAAMC,QAAU,QAEjCT,EAASsB,UAAUI,MAAQ,WAClBV,KAAAA,UAAUU,SAEnB1B,EAASsB,UAAUK,QAAU,WACpBX,KAAAA,UAAUW,WAEnB3B,EAASsB,UAAUM,WAAa,WACrB,OAAA,KAAKzB,SAETH,EA1CmB,GA4C9BF,QAAQ+B,QAAU7B;;ACrBlB,aAzBA,IAAA,EAAA,EAAA,QAAA,uBAyBA,SAAA,EAAA,GAAA,OAAA,GAAA,EAAA,WAAA,EAAA,CAAA,QAAA,GAvBA,IAAME,EAAU,CACdQ,MAAO,OACPC,OAAQ,QAEJV,EAASG,SAAS0B,cAAc,eAChCC,EAAW,IAAI/B,EAAJ,QAAaC,EAAQC,GAChC8B,EAAKD,EAASH,aACpBI,EAAGxB,MAAMyB,SAAW,WAEpBhC,EAAOiC,iBAAiB,QAAS,SAASC,GACxCH,EAAGxB,MAAM4B,KAAQD,EAAME,MAAQ,GAA+C,KAC9EL,EAAGxB,MAAM8B,IAAOH,EAAMI,MAAQ,GAAgD,KAC9ER,EAASR,UAGXS,EAAGQ,YAAc,SAASL,GACxBJ,EAASL,SAGXM,EAAGS,aAAe,SAASN,GACzBJ,EAASR,SAGXmB,OAAOC,UAAY,SAASR,GACR,WAAdA,EAAMS,KACRb,EAASN,OAEO,UAAdU,EAAMS,KACRb,EAASJ","file":"demo.bundle.js","sourceRoot":"","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Pulsator = /** @class */ (function () {\n    function Pulsator(parent, options) {\n        this.element = document.createElement(\"div\");\n        parent.appendChild(this.element);\n        var style = {\n            display: \"none\",\n            width: \"15px\",\n            height: \"15px\",\n            borderRadius: \"50%\",\n            borderColor: \"red\",\n            background: \"red\",\n            boxShadow: \"0 0 0 rgba(255,0,0, 0.4)\"\n        };\n        Object.assign(this.element.style, style, options);\n        this.animation = this.element.animate({\n            \"boxShadow\": [\n                \"0 0 0 0 rgba(255,0,0, 1)\",\n                \"0 0 0 20px rgba(255,0,0, 0)\"\n            ]\n        }, {\n            duration: 1500,\n            iterations: Infinity\n        });\n        this.animation.cancel();\n    }\n    Pulsator.prototype.start = function () {\n        this.element.style.display = \"block\";\n        this.animation.play();\n    };\n    Pulsator.prototype.stop = function () {\n        this.animation.cancel();\n        this.element.style.display = \"none\";\n    };\n    Pulsator.prototype.pause = function () {\n        this.animation.pause();\n    };\n    Pulsator.prototype.reverse = function () {\n        this.animation.reverse();\n    };\n    Pulsator.prototype.getElement = function () {\n        return this.element;\n    };\n    return Pulsator;\n}());\nexports.default = Pulsator;\n","import Pulsator from \"../lib/pulsator.js\";\n\nconst options = {\n  width: \"20px\",\n  height: \"20px\"\n};\nconst parent = document.querySelector(\".demo-space\");\nconst pulsator = new Pulsator(parent, options);\nconst el = pulsator.getElement();\nel.style.position = \"absolute\";\n\nparent.addEventListener(\"click\", function(event) {\n  el.style.left = (event.pageX - 10 /* 10px is the half of pulsator width */) + \"px\";\n  el.style.top = (event.pageY - 10 /* 10px is the half of pulsator height */) + \"px\";\n  pulsator.start();\n});\n\nel.onmouseover = function(event) {\n  pulsator.pause();\n};\n\nel.onmouseleave = function(event) {\n  pulsator.start();\n};\n\nwindow.onkeydown = function(event) {\n  if (event.key === \"Escape\") {\n    pulsator.stop();\n  }\n  if (event.key === \"Enter\") {\n    pulsator.reverse();\n  }\n};"]}
\ No newline at end of file
diff --git a/demo/demo.js b/demo/demo.js
index 0cd6819..dd81960 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,4 +1,4 @@
-import Pulsator from "../pulsator.js";
+import Pulsator from "../lib/pulsator.js";
 
 const options = {
   width: "20px",
diff --git a/lib/pulsator.d.ts b/lib/pulsator.d.ts
new file mode 100644
index 0000000..13aa4bb
--- /dev/null
+++ b/lib/pulsator.d.ts
@@ -0,0 +1,10 @@
+export default class Pulsator {
+    private element;
+    private animation;
+    constructor(parent: Element, options: unknown);
+    start(): void;
+    stop(): void;
+    pause(): void;
+    reverse(): void;
+    getElement(): HTMLElement;
+}
diff --git a/lib/pulsator.js b/lib/pulsator.js
new file mode 100644
index 0000000..7814e49
--- /dev/null
+++ b/lib/pulsator.js
@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Pulsator = /** @class */ (function () {
+    function Pulsator(parent, options) {
+        this.element = document.createElement("div");
+        parent.appendChild(this.element);
+        var style = {
+            display: "none",
+            width: "15px",
+            height: "15px",
+            borderRadius: "50%",
+            borderColor: "red",
+            background: "red",
+            boxShadow: "0 0 0 rgba(255,0,0, 0.4)"
+        };
+        Object.assign(this.element.style, style, options);
+        this.animation = this.element.animate({
+            "boxShadow": [
+                "0 0 0 0 rgba(255,0,0, 1)",
+                "0 0 0 20px rgba(255,0,0, 0)"
+            ]
+        }, {
+            duration: 1500,
+            iterations: Infinity
+        });
+        this.animation.cancel();
+    }
+    Pulsator.prototype.start = function () {
+        this.element.style.display = "block";
+        this.animation.play();
+    };
+    Pulsator.prototype.stop = function () {
+        this.animation.cancel();
+        this.element.style.display = "none";
+    };
+    Pulsator.prototype.pause = function () {
+        this.animation.pause();
+    };
+    Pulsator.prototype.reverse = function () {
+        this.animation.reverse();
+    };
+    Pulsator.prototype.getElement = function () {
+        return this.element;
+    };
+    return Pulsator;
+}());
+exports.default = Pulsator;
diff --git a/package-lock.json b/package-lock.json
index 0302a8a..1530572 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "pulsator",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6822,6 +6822,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.3.4000",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.4000.tgz",
+      "integrity": "sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==",
+      "dev": true
+    },
     "uncss": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/uncss/-/uncss-0.16.2.tgz",
diff --git a/package.json b/package.json
index f3dc173..4928b0e 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,13 @@
   "name": "pulsator",
   "version": "0.2.1",
   "description": "Pulse animation with JavaScript.",
-  "main": "pulsator.js",
+  "main": "lib/pulsator.js",
+  "types": "lib/pulsator.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:demo": "parcel build demo/demo.js -d demo -o demo.bundle.js"
+    "build": "rimraf lib && tsc",
+    "build:demo": "parcel build demo/demo.js -d demo -o demo.bundle.js",
+    "build:all": "npm run build && npm run build:demo"
   },
   "repository": {
     "type": "git",
@@ -23,6 +26,8 @@
   },
   "homepage": "https://github.com/shisama/Pulsator-JS#readme",
   "devDependencies": {
-    "parcel-bundler": "^1.12.3"
+    "parcel-bundler": "^1.12.3",
+    "rimraf": "^2.6.3",
+    "typescript": "^3.3.4000"
   }
 }
diff --git a/pulsator.js b/src/pulsator.ts
similarity index 76%
rename from pulsator.js
rename to src/pulsator.ts
index e7d74af..27e38f9 100644
--- a/pulsator.js
+++ b/src/pulsator.ts
@@ -1,5 +1,7 @@
 export default class Pulsator {
-  constructor(parent, options) {
+  private element: HTMLElement;
+  private animation: Animation;
+  constructor(parent: Element, options: unknown) {
     this.element = document.createElement("div");
     parent.appendChild(this.element);
     const style = {
@@ -15,10 +17,13 @@ export default class Pulsator {
 
 
     this.animation = this.element.animate({
-      boxShadow: ["0 0 0 0 rgba(255,0,0, 1)", "0 0 0 20px rgba(255,0,0, 0)"]
+      "boxShadow": [
+        "0 0 0 0 rgba(255,0,0, 1)",
+        "0 0 0 20px rgba(255,0,0, 0)"
+      ]
     }, {
       duration: 1500,
-      iterations: "Infinity"
+      iterations: Infinity
     });
     this.animation.cancel();
   }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..285689f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,60 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": ["dom", "es2018"],                             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./lib",                        /* Redirect output structure to the directory. */
+    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true,              /* Enable strict null checks. */
+    "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    "noUnusedLocals": true,                /* Report errors on unused locals. */
+    "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  }
+}