feat(animation): Annotate for closure compiler

Resolves #332

.eslintrc.yaml

@@ -18,7 +18,7 @@ rules:
   no-unused-vars:
     - error
     # Account for closure compiler conventions. See docs/closure-compiler.md
-    # Ingores: MDC[PascalCase]Adapter (records), [PascalCase]Type (typedefs)
+    # Ignores: MDC[PascalCase]Adapter (records), [PascalCase]Type (typedefs)
     - varsIgnorePattern: ^(?:(?:MDC(?:(?:[A-Z][a-z0-9]+)+)Adapter)|(?:(?:(?:[A-Z][a-z0-9]+)+)Type))$
 
   # TODO: Enable once https://github.com/material-components/material-components-web/milestone/4

.travis.yml

@@ -13,6 +13,7 @@ matrix:
         sauce_connect: true
         jwt:
           secure: e4MtddCSnfI/7wT6Vd58w5P5gGVSCIUF9AXWJsGwqfSMosVZ0l1voadWdYCNpLju2qxQFfx48k+ojSCIZq5ZCbwGL8hIJyiTM88pkGSC5iASv0YYkDEIniwz3Pd4Acj0GSGrSa0JkrNyA7rP+7ZAFcizCP8fHdW5pvIq1GJ9vEJttC0pk3OsbX8SLdRjtiOuXHXDOTlZZW9JQv0HyaFvKQNz6hK7KDLn8yq+QFB/17OSPqtMfFUKG83VlddPYTGQKsixl63Bfu+mkJ45D4akS+Gd5Hcg87sKYcXW09+eqE3l5qihRIz3vZXJ8u94heWP4TebV+WeIbrBGGMsNtmqEe7VfOmr5xe+B8wOClUqlpBlu7y0ZFzFxgs31Q0JhsWB6b4vs24Yr6IlPWox7uJckig8XMJX5iFHIHGFEknzAcZBpqSpYkiT2BC8eLaybGwl5VYz23cko3rxHLPxahbMVMW6i5B8XiZozsh4NFKqbERv4bJPPXyybLyR31MOrFMj6hdUd1Gk56RfEulNbCek0aSxuV3Vzxl8+5csTtAdQeqMGImTFDxlmQEoKk8dReOLFxDfNXj7W4YNXpof6YyzXIFelUJ148iODIwE8ET0EJvzR7+mOLmFMKnTWb4Uf8k6Jp4ZZa3zEWzZszG7UfAC4klGoiWhUGS/DpyF0G2BFs8=
+      script: npm run pretest && npm run test:unit && npm run posttest
       after_success:
         - codecov
     # Unit tests on LTS
@@ -24,6 +25,7 @@ matrix:
         sauce_connect: true
         jwt:
           secure: e4MtddCSnfI/7wT6Vd58w5P5gGVSCIUF9AXWJsGwqfSMosVZ0l1voadWdYCNpLju2qxQFfx48k+ojSCIZq5ZCbwGL8hIJyiTM88pkGSC5iASv0YYkDEIniwz3Pd4Acj0GSGrSa0JkrNyA7rP+7ZAFcizCP8fHdW5pvIq1GJ9vEJttC0pk3OsbX8SLdRjtiOuXHXDOTlZZW9JQv0HyaFvKQNz6hK7KDLn8yq+QFB/17OSPqtMfFUKG83VlddPYTGQKsixl63Bfu+mkJ45D4akS+Gd5Hcg87sKYcXW09+eqE3l5qihRIz3vZXJ8u94heWP4TebV+WeIbrBGGMsNtmqEe7VfOmr5xe+B8wOClUqlpBlu7y0ZFzFxgs31Q0JhsWB6b4vs24Yr6IlPWox7uJckig8XMJX5iFHIHGFEknzAcZBpqSpYkiT2BC8eLaybGwl5VYz23cko3rxHLPxahbMVMW6i5B8XiZozsh4NFKqbERv4bJPPXyybLyR31MOrFMj6hdUd1Gk56RfEulNbCek0aSxuV3Vzxl8+5csTtAdQeqMGImTFDxlmQEoKk8dReOLFxDfNXj7W4YNXpof6YyzXIFelUJ148iODIwE8ET0EJvzR7+mOLmFMKnTWb4Uf8k6Jp4ZZa3zEWzZszG7UfAC4klGoiWhUGS/DpyF0G2BFs8=
+      script: npm run pretest && npm run test:unit && npm run posttest
     # Closure compiler type checking. Note that TravisCI has Java 7 enabled by default which should
     # work for using closure.
     - node_js: node

CONTRIBUTING.md

@@ -91,7 +91,8 @@ npm run fix # Runs both of the above commands in parallel
 
 npm run test:watch # Runs karma on Chrome, re-running when source files change
 
-npm test # Lints all files, runs karma, and then runs coverage enforcement checks.
+npm test # Lints all files, runs karma, runs closure tests, and then runs coverage enforcement checks.
+npm run test:unit # Only runs the karma tests
 npm run test:closure # Runs closure build tests against all closurized files
 ```
 

closure_externs.js

@@ -33,8 +33,8 @@
  * app.b.return10 = () => app.a.return5() * 2;
  *
  * The way that closure reconciles this with path-based module loading systems
- * such as CommonJS and ES2015 is by using the `goog:` prefix to load any `goog.provide()`'d
- * modules using path-based module loading methods.
+ * such as CommonJS and ES2015 is by using the `goog:` prefix to load any modules exported via
+ * `goog.provide()` using path-based module loading methods.
  *
  * For example, given this source file:
  *
@@ -48,7 +48,7 @@
  *
  * Our convention here is as follows:
  *
- * - All third party modules should be `goog.provide()`'d using the namespace
+ * - All third party modules should exported via `goog.provide()` using the namespace
  *   `mdc.thirdparty.<CAMEL_CASE_MODULE_NAME>`. E.g. 'focus-trap' is provided as
  *   `goog.provide('mdc.thirdparty.focusTrap')`.
  * - Any default exports from a module MUST be attached to the namespace as a property

package.json

@@ -18,9 +18,10 @@
     "lint": "npm-run-all --parallel lint:*",
     "postinstall": "lerna bootstrap",
     "pretest": "npm run lint",
-    "test": "karma start --single-run",
+    "test": "npm run test:unit && npm run test:closure",
     "posttest": "istanbul report --root coverage text-summary && istanbul check-coverage --lines 95 --statements 95 --branches 95 --functions 95",
     "test:watch": "karma start --auto-watch",
+    "test:unit": "karma start --single-run",
     "test:closure": "./scripts/closure-test.sh"
   },
   "devDependencies": {
@@ -152,5 +153,7 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "closureWhitelist": []
+  "closureWhitelist": [
+    "mdc-animation"
+  ]
 }

packages/mdc-animation/index.js

@@ -14,76 +14,96 @@
  * limitations under the License.
  */
 
+/**
+ * @typedef {{
+ *   noPrefix: string,
+ *   webkitPrefix: string
+ * }}
+ */
+let VendorPropertyMapType;
+
+/** @const {Object<string, !VendorPropertyMapType>} */
 const eventTypeMap = {
-  animationstart: {
+  'animationstart': {
     noPrefix: 'animationstart',
     webkitPrefix: 'webkitAnimationStart',
     styleProperty: 'animation',
   },
-  animationend: {
+  'animationend': {
     noPrefix: 'animationend',
     webkitPrefix: 'webkitAnimationEnd',
     styleProperty: 'animation',
   },
-  animationiteration: {
+  'animationiteration': {
     noPrefix: 'animationiteration',
     webkitPrefix: 'webkitAnimationIteration',
     styleProperty: 'animation',
   },
-  transitionend: {
+  'transitionend': {
     noPrefix: 'transitionend',
     webkitPrefix: 'webkitTransitionEnd',
     styleProperty: 'transition',
   },
 };
 
+/** @const {Object<string, !VendorPropertyMapType>} */
 const cssPropertyMap = {
-  animation: {
+  'animation': {
     noPrefix: 'animation',
     webkitPrefix: '-webkit-animation',
   },
-  transform: {
+  'transform': {
     noPrefix: 'transform',
     webkitPrefix: '-webkit-transform',
   },
-  transition: {
+  'transition': {
     noPrefix: 'transition',
     webkitPrefix: '-webkit-transition',
   },
 };
 
+/**
+ * @param {!Object} windowObj
+ * @return {boolean}
+ */
 function hasProperShape(windowObj) {
-  return (windowObj.document !== undefined && typeof windowObj.document.createElement === 'function');
+  return (windowObj['document'] !== undefined && typeof windowObj['document']['createElement'] === 'function');
 }
 
+/**
+ * @param {string} eventType
+ * @return {boolean}
+ */
 function eventFoundInMaps(eventType) {
   return (eventType in eventTypeMap || eventType in cssPropertyMap);
 }
 
-// If 'animation' or 'transition' exist as style property, webkit prefix isn't necessary. Since we are unable to
-// see the event types on the element, we must rely on the corresponding style properties.
+/**
+ * @param {string} eventType
+ * @param {!Object<string, !VendorPropertyMapType>} map
+ * @param {!Element} el
+ * @return {string}
+ */
 function getJavaScriptEventName(eventType, map, el) {
   return map[eventType].styleProperty in el.style ? map[eventType].noPrefix : map[eventType].webkitPrefix;
 }
 
-// Helper function to determine browser prefix for CSS3 animation events
-// and property names
-//
-// Parameters:
-// windowObject: Object -- Contains Document with a `createElement()` method
-// eventType: string -- The type of animation
-//
-// returns the value of the event as a string, prefixed if necessary.
-// If proper arguments are not supplied, this function will return
-// the property or event type without webkit prefix.
-//
+/**
+ * Helper function to determine browser prefix for CSS3 animation events
+ * and property names.
+ * @param {!Object} windowObj
+ * @param {string} eventType
+ * @return {string}
+ */
 function getAnimationName(windowObj, eventType) {
   if (!hasProperShape(windowObj) || !eventFoundInMaps(eventType)) {
     return eventType;
   }
 
-  const map = eventType in eventTypeMap ? eventTypeMap : cssPropertyMap;
-  const el = windowObj.document.createElement('div');
+  const map = /** @type {!Object<string, !VendorPropertyMapType>} */ (
+    eventType in eventTypeMap ? eventTypeMap : cssPropertyMap
+  );
+  const el = windowObj['document']['createElement']('div');
   let eventName = '';
 
   if (map === eventTypeMap) {
@@ -97,19 +117,21 @@ function getAnimationName(windowObj, eventType) {
 
 // Public functions to access getAnimationName() for JavaScript events or CSS
 // property names.
-//
-// Parameters:
-// windowObject: Object -- Contains Document with a `createElement()` method
-// eventType: string -- The type of animation
-//
-// returns the value of the event as a string, prefixed if necessary.
-// If proper arguments are not supplied, this function will return
-// the property or event type without webkit prefix.
-//
+
+/**
+ * @param {!Object} windowObj
+ * @param {string} eventType
+ * @return {string}
+ */
 export function getCorrectEventName(windowObj, eventType) {
   return getAnimationName(windowObj, eventType);
 }
 
+/**
+ * @param {!Object} windowObj
+ * @param {string} eventType
+ * @return {string}
+ */
 export function getCorrectPropertyName(windowObj, eventType) {
   return getAnimationName(windowObj, eventType);
 }