Material-components-web: Convert packages to TypeScript

[kfranqueiro]

Overview

One of our Q1 2019 goals is to convert our packages' JS to TypeScript, as an increasing number of our consumers have TypeScript codebases and would benefit from this change.

The primary goal is to convert the packages themselves - converting the unit tests would be a plus (and would likely help test the conversion) but ideally we should be able to first convert packages one-by-one and continue to test them with the existing JS unit tests to confirm no unintended changes.

The intent of this conversion is ideally to involve no breaking changes, and to continue to provide both the ES6 and ES5 formats that we currently distribute in addition to TS.

This is a master issue for tracking all packages during the conversion, rather than creating 20 separate issues. I'm listing the components with JS below in a rough chronological order of approach (generally prioritizing dependencies ahead of dependents).

Packages to convert

• [x] base (dependency of everything) (@moog16, #4241 along with infrastructure)
• [x] dom (@acdvorak, #4269)
• [x] animation (@acdvorak, #4271)
• [x] linear-progress (@acdvorak, #4272)
• [x] ripple (@moog16, #4300)
• [x] menu-surface (@acdvorak, #4273)
• [x] switch (@mmalerba)
• [x] form-field (@moog16, #4327)
• [x] selection-control (exists solely for closure annotations; dependency of checkbox/radio) (@moog16, #4327)
• [x] checkbox (depends on form-field) (@moog16 and @acdvorak, #4319)
• [x] radio (@moog16 and @acdvorak, #4329)
• [x] icon-button (@abhiomkar and @acdvorak, #4325)
• [x] list (@moog16 and @acdvorak, #4334)
• [x] menu (depends on menu-surface and list) (@acdvorak, #4342)
• [x] dialog (note: focus-trap has its own .d.ts) (@moog16 and @acdvorak, #4333)
• [x] chips (@moog16 and @acdvorak, #4332)
• [x] grid-list (@moog16 and @acdvorak, #4337)
• [x] snackbar (@acdvorak, #4363)
• [x] slider (@acdvorak, #4378)
• [x] line-ripple (@acdvorak, #4373)
• [x] floating-label (@acdvorak, #4374)
• [x] notched-outline (depends on floating-label) (@acdvorak, #4375)
• [x] tab-indicator (@acdvorak, #4391)
• [x] tab-scroller (@acdvorak, #4392)
• [x] tab (depends on tab-indicator) (@acdvorak, #4393)
• [x] tab-bar (depends on tab and tab-scroller) (@acdvorak, #4394)
• [x] textfield (depends on line-ripple, floating-label, and notched-outline) (@acdvorak, #4377)
• [x] select (@acdvorak, #4386)
• [x] drawer (note: focus-trap has its own .d.ts) (@acdvorak, #4390)
• [x] top-app-bar (@acdvorak, #4397)
• [x] auto-init (@acdvorak, #4395)
• [x] toolbar (superseded by top-app-bar, but keeping due to unique features) (@acdvorak, #4410)
• [x] material-components-web (@acdvorak, #4396)
• [x] tabs (superseded by tab-bar, tab-scroller, tab, and tab-indicator, but keeping due to unique features) (@acdvorak, #4412)

Additional tasks

• [x] Replace Object.assign with spread where possible (@acdvorak, #4389)
• [x] Create factory type definitions for components that need them (e.g., MDCRippleFactory) (@acdvorak, #4407)
• [x] Move component definitions from index.ts to component.ts (@acdvorak, #4407)
• [x] Standardize interface and type names (e.g., ~Point, MenuPoint, or~ MDCMenuPoint) (@acdvorak, #4407)
• [x] Create *EventDetail interfaces for all custom events that emit a detail property, and use generic signature of emit<*EventDetail>() to prevent accidental type errors (@acdvorak, #4407)
• [x] Fix internal linter errors (@acdvorak, #4440)
• [x] Clean up mentions of JS from scripts / configs after everything in packages is TS (@moog16, #4435)
• [x] Update docs (readme, getting-started, importing-js, best practices, etc.) (@moog16, #4432)
• [x] Review check-imports.js script and ensure it is still working

Packages to remove

We should consider removing the following deprecated packages rather than spending time converting them:

• [x] icon-toggle (superseded by icon-button) (@moog16, #4415)
• [x] selection-control (not used anywhere)(@kfranqueiro, #4442)

[nemethmik]

This is great. All JS teams developing any beyond-to-do-list-and-hello-world application should use TypeScript, it's astounding, TypeScript brings JS to the level of feature-rich business application development.

[gugu]

How can I help you with this task?

[moog16]

@gugu we're actually nearing the end of our rewrite. All the components have been written, we're just cleaning up code and putting the finishing touches on everything. Thanks for offering!

[acdvorak]

@gugu You rock! 🤜 🤛 Early testing and feedback would be _super_ useful, so if you're able and willing, you could check out the feat/typescript branch (currently at 72e8b66), compile it with
npm i && npm run build, and let us know if you see anything unexpected or odd. Thanks! 😀

[gugu]

I did sed s!@material/!@shortcm/! in typescript branch and published them in @Shortcm organization (https://www.npmjs.com/org/shortcm). Tomorrow will start switching react module to the typescript material-web. When this branch will be published I'll try to have a pull request ready

[gugu]

@acdvorak do you plan to continue to use webpack?

I created packages with tsc and instead of 100kB files they are 8kB

https://imgur.com/a/fVCA2sW

[moog16]

@gugu - did you see changes outlined in #4409? We're also using tsc to achieve smaller file sizes, and allow for tree-shaking. I haven't measured the file sizes, but I'm sure it is smaller than the UMD bundles.

Yes we are _not_ removing webpack from our build.

[acdvorak]

Pre-release version 1.0.0-0 has been published on npm 🎉

[kfranqueiro]

All of this work has been done across various PRs (see updates on original description).

Some follow-up is being done regarding #4463 as James has begun testing RMWC against the pre-release.