feat(auto-init): Convert JS to TypeScript

packages/mdc-auto-init/index.js → packages/mdc-auto-init/index.ts

@@ -21,16 +21,32 @@
  * THE SOFTWARE.
  */
 
-const registry = Object.create(null);
+// tslint:disable:only-arrow-functions
 
-const CONSOLE_WARN = console.warn.bind(console);
+import {MDCComponent} from '@material/base/component';
+import {MDCFoundation} from '@material/base/foundation';
+import {MDCAutoInitElement, MDCAutoInitKey} from './types';
 
-function _emit(evtType, evtData, shouldBubble = false) {
+interface ComponentClass {
+  // tslint:disable-next-line:no-any a component can pass in anything it needs to the constructor
+  new<F extends MDCFoundation>(root: Element, foundation?: F, ...args: any[]): MDCComponent<F>;
+  attachTo<F extends MDCFoundation>(root: Element): MDCComponent<F>;
+}
+
+type Registry = {
+  [K in MDCAutoInitKey]?: ComponentClass;
+};
+
+const registry: Registry = {};
+
+const CONSOLE_WARN = console.warn.bind(console); // tslint:disable-line:no-console
+
+function _emit<T extends object>(evtType: string, evtData: T, shouldBubble = false) {
   let evt;
   if (typeof CustomEvent === 'function') {
-    evt = new CustomEvent(evtType, {
-      detail: evtData,
+    evt = new CustomEvent<T>(evtType, {
       bubbles: shouldBubble,
+      detail: evtData,
     });
   } else {
     evt = document.createEvent('CustomEvent');
@@ -40,19 +56,21 @@ function _emit(evtType, evtData, shouldBubble = false) {
   document.dispatchEvent(evt);
 }
 
+/* istanbul ignore next: optional argument is not a branch statement */
 /**
- * Auto-initializes all mdc components on a page.
+ * Auto-initializes all MDC components on a page.
  */
-export default function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
+function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
   const components = [];
-  const nodes = root.querySelectorAll('[data-mdc-auto-init]');
-  for (let i = 0, node; (node = nodes[i]); i++) {
-    const ctorName = node.dataset.mdcAutoInit;
+  const nodes: MDCAutoInitElement[] = [].slice.call(root.querySelectorAll('[data-mdc-auto-init]'));
+
+  for (const node of nodes) {
+    const ctorName = node.getAttribute('data-mdc-auto-init') as MDCAutoInitKey | null;
     if (!ctorName) {
       throw new Error('(mdc-auto-init) Constructor name must be given.');
     }
 
-    const Ctor = registry[ctorName];
+    const Ctor = registry[ctorName]; // tslint:disable-line:variable-name
     if (typeof Ctor !== 'function') {
       throw new Error(
         `(mdc-auto-init) Could not find constructor in registry for ${ctorName}`);
@@ -64,12 +82,13 @@ export default function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
     }
 
     // TODO: Should we make an eslint rule for an attachTo() static method?
+    // See https://github.com/Microsoft/TypeScript/issues/14600 for discussion of static interface support in TS
     const component = Ctor.attachTo(node);
     Object.defineProperty(node, ctorName, {
+      configurable: true,
+      enumerable: false,
       value: component,
       writable: false,
-      enumerable: false,
-      configurable: true,
     });
     components.push(component);
   }
@@ -78,7 +97,8 @@ export default function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
   return components;
 }
 
-mdcAutoInit.register = function(componentName, Ctor, warn = CONSOLE_WARN) {
+// tslint:disable-next-line:variable-name
+mdcAutoInit.register = function(componentName: MDCAutoInitKey, Ctor: ComponentClass, warn = CONSOLE_WARN) {
   if (typeof Ctor !== 'function') {
     throw new Error(`(mdc-auto-init) Invalid Ctor value ${Ctor}. Expected function`);
   }
@@ -90,10 +110,14 @@ mdcAutoInit.register = function(componentName, Ctor, warn = CONSOLE_WARN) {
   registry[componentName] = Ctor;
 };
 
-mdcAutoInit.deregister = function(componentName) {
+mdcAutoInit.deregister = function(componentName: MDCAutoInitKey) {
   delete registry[componentName];
 };
 
 mdcAutoInit.deregisterAll = function() {
-  Object.keys(registry).forEach(this.deregister, this);
+  const keys = Object.keys(registry) as MDCAutoInitKey[];
+  keys.forEach(this.deregister, this);
 };
+
+export {mdcAutoInit as default, mdcAutoInit};
+export * from './types';

packages/mdc-auto-init/package.json

@@ -7,5 +7,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/material-components/material-components-web.git"
+  },
+  "dependencies": {
+    "@material/base": "^0.41.0"
   }
 }

packages/mdc-auto-init/types.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+export type MDCAutoInitKey = (
+  'MDCCheckbox' |
+  'MDCChip' |
+  'MDCChipSet' |
+  'MDCDialog' |
+  'MDCDrawer' |
+  'MDCFloatingLabel' |
+  'MDCFormField' |
+  'MDCGridList' |
+  'MDCIconButtonToggle' |
+  'MDCIconToggle' |
+  'MDCLineRipple' |
+  'MDCLinearProgress' |
+  'MDCList' |
+  'MDCMenu' |
+  'MDCMenuSurface' |
+  'MDCNotchedOutline' |
+  'MDCRadio' |
+  'MDCRipple' |
+  'MDCSelect' |
+  'MDCSlider' |
+  'MDCSnackbar' |
+  'MDCSwitch' |
+  'MDCTabBar' |
+  'MDCTextField' |
+  'MDCToolbar' |
+  'MDCTopAppBar'
+);
+
+export type MDCAutoInitElement = HTMLElement & {
+  [K in MDCAutoInitKey]?: string;
+};

scripts/webpack/js-bundle-factory.js

@@ -153,7 +153,7 @@ class JsBundleFactory {
       bundleName: 'main-js-a-la-carte',
       chunks: {
         animation: getAbsolutePath('/packages/mdc-animation/index.ts'),
-        autoInit: getAbsolutePath('/packages/mdc-auto-init/index.js'),
+        autoInit: getAbsolutePath('/packages/mdc-auto-init/index.ts'),
         base: getAbsolutePath('/packages/mdc-base/index.ts'),
         checkbox: getAbsolutePath('/packages/mdc-checkbox/index.ts'),
         chips: getAbsolutePath('/packages/mdc-chips/index.ts'),