build(*): set up testing environment

Tests are written in TypeScript
Uses mocha, karma, puppeteer

.github/CONTRIBUTING.md

@@ -0,0 +1,89 @@
+# Contributing to Panzoom
+
+- Prettier enforces the style guide and should at least format on commit. Make sure those changes are added to the commit.
+- Run unit tests with `yarn test`, and make sure `demo/index.html` works as it should.
+
+**Supported browsers**: IE11+, Edge, Firefox, Chrome, Safari, Opera, iOS & Android.
+
+Contributions are always welcome. Before contributing please [search the issue tracker](https://github.com/timmywil/panzoom/issues); your issue
+may have already been discussed or fixed in `master`. To contribute,
+[fork](https://help.github.com/articles/fork-a-repo/) Panzoom, commit your changes,
+& [send a pull request](https://help.github.com/articles/using-pull-requests/).
+
+## Feature Requests
+
+Feature requests should be submitted in the
+[issue tracker](https://github.com/timmywil/panzoom/issues), with a description of
+the expected behavior & use case, where they’ll remain closed until sufficient interest,
+[e.g. :+1: reactions](https://help.github.com/articles/about-discussions-in-issues-and-pull-requests/),
+has been [shown by the community](https://github.com/timmywil/panzoom/issues?q=label%3A%22votes+needed%22+sort%3Areactions-%2B1-desc).
+Before submitting a request, please search for similar ones in the
+[closed issues](https://github.com/timmywil/panzoom/issues?q=is%3Aissue+is%3Aclosed+label%3Aenhancement).
+
+I got this convention from [lodash](https://github.com/lodash/lodash). It helps keep the issues list as empty as possible.
+
+## Pull Requests
+
+For additions or bug fixes you should only need to modify `panzoom.ts`. Include
+updated unit tests in the `test` directory as part of your pull request. Don’t
+worry about regenerating the built files or docs.
+
+Before running the unit tests you’ll need to install, `yarn` or `npm i`,
+[development dependencies](https://docs.npmjs.com/files/package.json#devdependencies).
+Run unit tests from the command-line via `yarn test` or `npm test`, or open `test/index.html` &
+`test/demo.html` in a web browser.
+
+## Coding Guidelines
+
+In addition to the following guidelines, please follow the conventions already
+established in the code.
+
+- **Spacing**:<br>
+  Use two spaces for indentation. No tabs.
+
+- **Naming**:<br>
+  Keep variable & method names concise & descriptive.<br>
+  Variable names `index`, `array`, & `iteratee` are preferable to
+  `i`, `arr`, & `fn`.
+
+- **Quotes**:<br>
+  Single-quoted strings are preferred to double-quoted strings; however,
+  please use a double-quoted string if the value contains a single-quote
+  character to avoid unnecessary escaping.
+
+- **Comments**:<br>
+  Comments are kept to a minimum, but are encouraged to explain confusing bits of code.
+
+- **Types**:<br>
+  Panzoom is written in TypeScript and documentation is generated from the type annotations.
+  Any code additions should be properly typed, with no use of `any`.
+
+Guidelines are enforced using [TSLint](https://github.com/palantir/tslint) and [Prettier](https://github.com/prettier/prettier):
+
+```bash
+$ yarn lint # or npm run lint
+```
+
+Some things are fixable automatically.
+
+```bash
+$ yarn lint:fix
+```
+
+This script is run on commit, which means that the commit may need amending if any changes were made as a result of the commit.
+
+Check the working directory is clean of all changes after committing.
+
+## Commit message guidelines
+
+Commit messages should follow [Conventional Commits Specification(https://www.conventionalcommits.org).
+
+This is also enforced on commit using a commit message hook.
+
+Panzoom includes a helpful prompt for committing to guide you in the process of writing a valid commit message.
+
+Run the following after staging files:
+
+```bash
+$ yarn commit
+```

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,20 @@
+### Subject of the issue
+
+<!-- Describe your issue here. -->
+
+### Your environment
+
+- Version of panzoom
+- Browser and browser version
+
+### Expected behaviour
+
+<!-- Describe what should happen. -->
+
+### Actual behaviour
+
+<!-- Describe what happens instead. -->
+
+### Steps to reproduce
+
+<!-- Describe how to reproduce this issue. Please provide a working demo; you can use [this template](https://jsbin.com/mofeli/edit?html,js,output) as a base. -->

PULL_REQUEST_TEMPLATE.md → .github/PULL_REQUEST_TEMPLATE.md

@@ -1,14 +1,16 @@
 ### PR Checklist
+
 Please review the [guidelines for contributing](CONTRIBUTING.md) to this repository.
 
-- [ ] I am requesting to **pull a topic/feature/bugfix branch** (right side). In other words, not *master*.
-- [ ] I have run `grunt` against my changes and both linting and tests pass.
-- [ ] I have added tests to prove my fix is affective or my feature works. This can be done in the form of unit tests in `test/bdd/test.js` or a new demo on `demo/index.html`.
-- [ ] I have added or edited necessary documentation in the README.md (if appropriate).
+- [ ] I am requesting to **pull a topic/feature/bugfix branch** (right side). In other words, not _master_.
+- [ ] I have run `yarn test` against my changes and tests pass.
+- [ ] I have added tests to prove my fix is affective or my feature works. This can be done in the form of unit tests in `test/unit/test.js` or a new or altered demo on `test/demo.html`.
+- [ ] I have added or edited necessary documentation in the README.md or no docs changes are needed.
 
 ### Description
+
 <!--Please describe your pull request. Thank you!-->
 
-<!--List the issue this PR is fixing. If one does not exist, please [create one](https://github.com/timmywil/jquery.panzoom/issues).-->
-**Fixes**: #
+<!--List the issue this PR is fixing. If one does not exist, please [create one](https://github.com/timmywil/panzoom/issues).-->
 
+**Fixes**: #

.gitignore

@@ -1,5 +1,7 @@
 node_modules
 package-lock.json
 *.log
-panzoom.*
 .rpt2_cache/
+*.d.ts
+dist/
+coverage/

.prettierignore

@@ -6,5 +6,4 @@ coverage/**
 .*
 docs/**
 *.d.ts
-panzoom.js
-panzoom.min.js
+dist/**

karma.conf.js

@@ -0,0 +1,24 @@
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['mocha', 'karma-typescript'],
+    files: ['panzoom.ts', 'test/unit/*.test.ts'],
+    preprocessors: {
+      '**/*.ts': ['karma-typescript']
+    },
+    karmaTypescriptConfig: {
+      tsconfig: './tsconfig.json',
+      compilerOptions: {
+        sourceMap: true
+      }
+    },
+    reporters: ['progress', 'karma-typescript'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    singleRun: true,
+    browsers: ['ChromeHeadless'],
+    concurrency: Infinity
+  })
+}

package.json

@@ -2,22 +2,29 @@
   "name": "panzoom",
   "version": "4.0.0-pre",
   "description": "Pan and zoom elements using CSS transforms.",
-  "main": "panzoom.js",
+  "main": "dist/panzoom.js",
   "scripts": {
-    "types": "tsc -p tsconfig.json --noEmit",
+    "type-check": "tsc -p tsconfig.json --noEmit",
     "tslint": "tslint -p tsconfig.json -c tslint.json",
-    "prettier": "prettier --check \"**/*.tsx\" \"**/*.ts\" \"**/*.js\"",
-    "lint": "concurrently \"yarn types\" \"yarn tslint\" \"yarn prettier\"",
-    "lint:fix": "concurrently \"yarn types\" \"yarn tslint --fix\" \"precise-commits\"",
+    "prettier": "prettier --check \"**/*.tsx\" \"**/*.ts\" \"**/*.js\" \"test/demo.html\"",
+    "lint": "concurrently \"yarn type-check\" \"yarn tslint\" \"yarn prettier\"",
+    "lint:fix": "concurrently \"yarn type-check\" \"yarn tslint --fix\" \"precise-commits\"",
+    "test:unit": "karma start",
+    "test:unit:watch": "karma start --singleRun=false --autoWatch",
+    "test": "yarn lint && yarn test:unit",
     "dev": "rollup --config --watch",
     "docs": "yarn typedoc --out docs/",
-    "build": "rollup --config && uglifyjs --compress --mangle --output panzoom.min.js -- panzoom.js",
+    "clean": "rm -rf dist/",
+    "minify": "uglifyjs --compress --mangle --output dist/panzoom.min.js -- dist/panzoom.js",
+    "build": "yarn clean && rollup --config && yarn minify",
     "release": "semantic-release"
   },
   "files": [
     "MIT-License.txt",
-    "panzoom.js",
-    "panzoom.min.js",
+    "panzoom.ts",
+    "panzoom.d.ts",
+    "dist/panzoom.js",
+    "dist/panzoom.min.js",
     "README.md"
   ],
   "keywords": [
@@ -42,15 +49,23 @@
     "@commitlint/prompt": "^7.5.0",
     "@semantic-release/exec": "^3.3.2",
     "@semantic-release/git": "^7.0.8",
+    "@types/mocha": "^5.2.6",
     "commitizen": "^3.1.1",
     "commitlint": "^7.5.2",
     "concurrently": "^4.1.0",
     "husky": "^2.1.0",
+    "karma": "^4.1.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-mocha": "^1.3.0",
+    "karma-typescript": "^4.0.0",
+    "mocha": "^6.1.4",
     "precise-commits": "^1.0.2",
     "prettier": "^1.17.0",
+    "puppeteer": "^1.15.0",
     "rollup": "^1.10.1",
     "rollup-plugin-typescript2": "^0.21.0",
     "semantic-release": "^15.13.3",
+    "serve": "^11.0.0",
     "tslint": "^5.16.0",
     "tslint-config-prettier": "^1.18.0",
     "typedoc": "^0.14.2",
@@ -88,8 +103,7 @@
         {
           "assets": [
             "docs",
-            "panzoom.js",
-            "panzoom.min.js",
+            "dist",
             "package.json"
           ]
         }

index.ts → panzoom.ts

@@ -5,4 +5,4 @@ const Panzoom: { awesome?: string } = {}
 Panzoom.awesome = 'awesome'
 console.log(Panzoom)
 
-export { Panzoom }
+export default Panzoom

rollup.config.js

@@ -1,13 +1,22 @@
 import typescript from 'rollup-plugin-typescript2'
 export default {
-  input: './index.ts',
-  plugins: [typescript()],
+  input: './panzoom.ts',
+  plugins: [
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          module: 'ES2015'
+        }
+      },
+      exclude: ['node_modules', '**/*.test.ts']
+    })
+  ],
   output: {
     format: 'umd',
     name: 'Panzoom',
-    file: 'panzoom.js'
+    file: 'dist/panzoom.js'
   },
   watch: {
-    include: './index.ts'
+    include: './panzoom.ts'
   }
 }