Convert packages to TypeScript #4225

kfranqueiro · 2019-01-04T17:33:43Z

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

Additional tasks

Replace Object.assign with spread where possible (@acdvorak, chore: Remove Object.assign from TS files #4389)
Create factory type definitions for components that need them (e.g., MDCRippleFactory) (@acdvorak, refactor: Make TS easier to wrap #4407)
Move component definitions from index.ts to component.ts (@acdvorak, refactor: Make TS easier to wrap #4407)
Standardize interface and type names (e.g., ~~Point, MenuPoint, or~~ MDCMenuPoint) (@acdvorak, refactor: Make TS easier to wrap #4407)
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, refactor: Make TS easier to wrap #4407)
Fix internal linter errors (@acdvorak, chore: Fix internal tslint errors #4440)
Clean up mentions of JS from scripts / configs after everything in packages is TS (@moog16, chore: replace JS for TS #4435)
Update docs (readme, getting-started, importing-js, best practices, etc.) (@moog16, docs: update contribution/getting started guides for TypeScript #4432)
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:

icon-toggle (superseded by icon-button) (@moog16, chore: remove icon-toggle #4415)
selection-control (not used anywhere)(@kfranqueiro, chore(package): Remove selection-control #4442)

The text was updated successfully, but these errors were encountered:

nemethmik · 2019-01-07T09:41:52Z

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.

Refs #4225

Refs #4225 IMO this makes the code a little easier to read/write. https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types

…4287) Refs #4225 IMO this makes the code a little easier to read/write. https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types

Refs #4225

Refs #4225 Removes deprecated package `mdc-icon-toggle` from the all-in-one JS bundle.

Refs #4225

gugu · 2019-02-20T08:52:23Z

How can I help you with this task?

moog16 · 2019-02-20T16:47:28Z

@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!

### Goal Make it easier for frameworks to wrap our TypeScript code. Refs #4225 ### How **Isolate framework-specific code from framework-agnostic code.** Specifically, this PR: * Maintains full backward compatibility with existing code * Moves all component definitions from `index.ts` to `component.ts` - `index.ts` is now purely re-exporting other files * Moves component-dependent types from `types.ts` to `component.ts` - Framework-related types are now quarantined in a single file: `component.ts` - All other files are now purely framework-agnostic, and can be safely wrapped by frameworks that don't use our components * Makes `import` paths more specific by switching from `@material/foo/index` to e.g. `@material/foo/foundation` or `@material/foo/types` - The only exception is `component.ts` files: Since they're basically our default "framework", they can safely import _other_ "framework" types via `@material/foo/index` * Updates class & interface export syntax to isolate the `default` export line for future removal if necessary: ```ts export class MDCFooFoundation { // ... } export default MDCFooFoundation; ``` * Combines `typings/custom.d.ts` and `typings/dom.ie.d.ts` into `packages/mdc-dom/externs.d.ts` so the types will be publicly visible * Adds `MDCFooFactory` types for components that need them (e.g., `MDCRipple`, `MDCList`) ### Packages * [x] `animation` * [x] `checkbox` * [x] `chips` * [x] `dialog` * [x] `dom` * [x] `drawer` * [x] `floating-label` * [x] `form-field` * [x] `grid-list` * [x] `icon-button` * [x] `icon-toggle` _(deprecated)_ * [x] `line-ripple` * [x] `linear-progress` * [x] `list` * [x] `menu` * [x] `menu-surface` * [x] `notched-outline` * [x] `radio` * [x] `ripple` * [x] `select` * [x] `selection-control` * [x] `slider` * [x] `snackbar` * [x] `switch` * [x] `tab` * [x] `tab-bar` * [x] `tab-indicator` * [x] `tab-scroller` * [x] `tab-tabs` _(deprecated)_ * [x] `textfield` * [x] `toolbar` _(deprecated)_ * [x] `top-app-bar`

acdvorak · 2019-02-21T20:53:24Z

@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 · 2019-02-21T21:49:54Z

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

Refs #4225

gugu · 2019-02-23T10:25:25Z

@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 · 2019-02-23T18:47:47Z

@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.

All `tslint:disable:object-literal-sort-keys` comments now include a description that explains why the linter rule needs to be disabled. For the most part, it's to ensure consistent ordering of methods between adapter interfaces and their implementations in the foundation and component. This PR also reorders a few properties in `MDCCheckbox` and `MDCRadio` for consistency. Refs #4225

Resolves #4225 BREAKING CHANGE: The previously deprecated mdc-icon-toggle package has been removed; use mdc-icon-button instead.

acdvorak · 2019-02-28T00:15:16Z

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

kfranqueiro · 2019-03-04T17:11:31Z

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.

kfranqueiro mentioned this issue Jan 4, 2019

Allow finer-grained control of emitted CSS #4227

Closed

35 tasks

kfranqueiro added this to the Package Conversions milestone Jan 4, 2019

moog16 mentioned this issue Jan 16, 2019

feat(infrastructure): add tsconfig, tslint, and build setup #4241

Merged

acdvorak added a commit that referenced this issue Jan 18, 2019

feat(dom): Convert JS to TypeScript

a50f183

Refs #4225

acdvorak mentioned this issue Jan 18, 2019

feat(dom): Convert JS to TypeScript #4269

Merged

acdvorak added a commit that referenced this issue Jan 19, 2019

feat(dom): Convert JS to TypeScript (#4269)

66c8d81

Refs #4225

acdvorak added a commit that referenced this issue Jan 19, 2019

feat(animation): Convert JS to TypeScript

d76279d

Refs #4225

acdvorak mentioned this issue Jan 19, 2019

feat(animation): Convert JS to TypeScript #4271

Merged

acdvorak added a commit that referenced this issue Jan 19, 2019

feat(linear-progress): Convert JS to TypeScript

566ceb3

Refs #4225

acdvorak added a commit that referenced this issue Jan 19, 2019

feat(linear-progress): Convert JS to TypeScript

3a874f5

Refs #4225

This was referenced Jan 19, 2019

feat(linear-progress): Convert JS to TypeScript #4272

Merged

feat(menu-surface): Convert JS to TypeScript #4273

Merged

acdvorak added a commit that referenced this issue Jan 19, 2019

chore(menu-surface): Convert JS to TypeScript

6324518

Refs #4225

acdvorak added a commit that referenced this issue Jan 23, 2019

feat(animation): Convert JS to TypeScript (#4271)

87a5e8e

Refs #4225

acdvorak added a commit that referenced this issue Jan 23, 2019

feat(linear-progress): Convert JS to TypeScript (#4272)

6b958de

Refs #4225

acdvorak added a commit that referenced this issue Jan 24, 2019

refactor(animation): Replace enums with string literal type aliases

186f93e

Refs #4225 IMO this makes the code a little easier to read/write. https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types

acdvorak mentioned this issue Jan 24, 2019

refactor(animation): Replace enums with string literal type aliases #4287

Merged

This was referenced Jan 24, 2019

feat(form-field): typescript conversion #4292

Closed

feat(ripple): convert to ts #4300

Merged

feat(checkbox): typescript conversion #4319

Merged

fix(infrastructure): remove babel loader #4321

Closed

feat(form-field): ts convert #4327

Merged

abhiomkar mentioned this issue Jan 31, 2019

feat(icon-button): Convert to TypeScript #4325

Merged

This was referenced Jan 31, 2019

feat(radio): ts conversion #4329

Merged

feat(chips): ts conversion #4332

Merged

feat(dialog): ts conversion #4333

Merged

feat(list): ts conversion #4334

Merged

feat(grid-list): ts conversion #4337

Merged

acdvorak added a commit that referenced this issue Feb 14, 2019

feat(auto-init): Convert JS to TypeScript (#4395)

4675c95

Refs #4225

acdvorak added a commit that referenced this issue Feb 14, 2019

feat(toolbar): Convert JS to TypeScript (#4410)

6136db3

Refs #4225

acdvorak added a commit that referenced this issue Feb 14, 2019

feat(package): Convert JS to TypeScript (#4396)

ebefb78

Refs #4225 Removes deprecated package `mdc-icon-toggle` from the all-in-one JS bundle.

acdvorak added a commit that referenced this issue Feb 15, 2019

feat(tabs): Convert JS to TypeScript (#4412)

409a6a6

Refs #4225

This was referenced Feb 19, 2019

docs: update contribution/getting started guides for TypeScript #4432

Closed

chore: replace JS for TS #4435

Closed

acdvorak mentioned this issue Feb 22, 2019

chore: Fix internal tslint errors #4440

Merged

acdvorak added a commit that referenced this issue Feb 22, 2019

chore: Fix internal tslint errors (#4440)

b6b6983

Refs #4225

This was referenced Feb 25, 2019

Release version 1.0? #4362

Closed

style: Add explanations to tslint:disable comments #4448

Merged

feat: Convert packages to TypeScript #4451

Merged

moog16 mentioned this issue Feb 26, 2019

chore: grammar mistakes on script comments #4452

Merged

moog16 mentioned this issue Feb 26, 2019

fix: add constants to index #4455

Closed

acdvorak closed this as completed in #4451 Feb 27, 2019

acdvorak added a commit that referenced this issue Feb 27, 2019

feat: Convert packages to TypeScript (#4451)

ad5743a

Resolves #4225 BREAKING CHANGE: The previously deprecated mdc-icon-toggle package has been removed; use mdc-icon-button instead.

acdvorak reopened this Feb 27, 2019

kfranqueiro modified the milestones: Package Conversions, March release (1.0.0) Mar 1, 2019

kfranqueiro closed this as completed Mar 4, 2019

fjorgemota mentioned this issue Apr 2, 2019

ETA on TypeScript's type definitions? :) #1840

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert packages to TypeScript #4225

Convert packages to TypeScript #4225

kfranqueiro commented Jan 4, 2019 •

edited

Loading

nemethmik commented Jan 7, 2019

gugu commented Feb 20, 2019

moog16 commented Feb 20, 2019

acdvorak commented Feb 21, 2019

gugu commented Feb 21, 2019 •

edited

Loading

gugu commented Feb 23, 2019

moog16 commented Feb 23, 2019

acdvorak commented Feb 28, 2019

kfranqueiro commented Mar 4, 2019

Convert packages to TypeScript #4225

Convert packages to TypeScript #4225

Comments

kfranqueiro commented Jan 4, 2019 • edited Loading

Overview

Packages to convert

Additional tasks

Packages to remove

nemethmik commented Jan 7, 2019

gugu commented Feb 20, 2019

moog16 commented Feb 20, 2019

acdvorak commented Feb 21, 2019

gugu commented Feb 21, 2019 • edited Loading

gugu commented Feb 23, 2019

moog16 commented Feb 23, 2019

acdvorak commented Feb 28, 2019

kfranqueiro commented Mar 4, 2019

kfranqueiro commented Jan 4, 2019 •

edited

Loading

gugu commented Feb 21, 2019 •

edited

Loading