refactor: Make TS easier to wrap #4407

acdvorak · 2019-02-12T10:25:41Z

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:
```
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

### 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: * Moves all component definitions from `index.ts` to `component.ts` - `index.ts` retains a default component export for backward compatibility * Moves all component-dependent types from `types.ts` to `component.ts` - Every framework-related type is 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; ``` ### Packages * [x] `animation` * [x] `checkbox` * [x] `chips` * [ ] `dialog` * [x] `dom` * [ ] `drawer` * [ ] `floating-label` * [ ] `form-field` * [ ] `grid-list` * [ ] `icon-button` * [ ] `icon-toggle` _(deprecated)_ * [ ] `line-ripple` * [ ] `linear-progress` * [ ] `list` * [ ] `menu` * [ ] `menu-surface` * [ ] `notched-outline` * [ ] `radio` * [x] `ripple` * [ ] `select` * [x] `selection-control` * [ ] `slider` * [ ] `snackbar` * [ ] `switch` * [ ] `tab` * [ ] `tab-bar` * [ ] `tab-indicator` * [ ] `tab-scroller` * [ ] `tab-tabs` _(deprecated)_ * [ ] `textfield` * [ ] `toolbar` _(deprecated)_ * [ ] `top-app-bar`

codecov-io · 2019-02-12T10:33:35Z

Codecov Report

Merging #4407 into feat/typescript will increase coverage by <.01%.
The diff coverage is 98.11%.

@@                 Coverage Diff                 @@
##           feat/typescript    #4407      +/-   ##
===================================================
+ Coverage            99.05%   99.06%   +<.01%     
===================================================
  Files                   98      130      +32     
  Lines                 6166     6230      +64     
  Branches               808      811       +3     
===================================================
+ Hits                  6108     6172      +64     
  Misses                  57       57              
  Partials                 1        1

Impacted Files	Coverage Δ
packages/mdc-auto-init/index.ts	`95.23% <ø> (ø)`	⬆️
packages/mdc-toolbar/component.ts	`100% <100%> (ø)`	⬆️
packages/mdc-grid-list/index.ts	`100% <100%> (ø)`	⬆️
packages/mdc-line-ripple/index.ts	`100% <100%> (ø)`	⬆️
packages/mdc-chips/chip-set/index.ts	`100% <100%> (+1.66%)`	⬆️
packages/mdc-select/helper-text/index.ts	`100% <100%> (ø)`	⬆️
packages/mdc-base/foundation.ts	`100% <100%> (ø)`	⬆️
packages/mdc-grid-list/foundation.ts	`100% <100%> (ø)`	⬆️
packages/mdc-form-field/foundation.ts	`100% <100%> (ø)`	⬆️
packages/mdc-tab-bar/foundation.ts	`100% <100%> (ø)`	⬆️
... and 145 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1ec12b6...56a0650. Read the comment docs.

mdc-web-bot · 2019-02-12T10:41:47Z

All 624 screenshot tests passed for commit d4320a3 vs. feat/typescript! 💯🎉

mdc-web-bot · 2019-02-12T11:32:54Z

All 624 screenshot tests passed for commit 80223a1 vs. feat/typescript! 💯🎉

…cript--refactor

mdc-web-bot · 2019-02-13T01:08:36Z

All 624 screenshot tests passed for commit 7e85e42 vs. feat/typescript! 💯🎉

packages/mdc-chips/chip-set/component.ts

packages/mdc-dialog/component.ts

packages/mdc-dialog/index.ts

kfranqueiro · 2019-02-13T22:50:34Z

packages/mdc-dom/externs.d.ts

@@ -24,3 +24,7 @@
 declare interface Element {
  msMatchesSelector?: (selector: string) => boolean;
 }
+
+declare interface Window {


Does moving this from typings require more things to rely on dom? Are we sure we have the dependency everywhere it's needed? Does this now need to be included explicitly?

Good question. In our repo, TypeScript doesn't seem to care where this file is. Some wrapper frameworks might run into problems though, and would need to add a dep on mdc-dom. Would you rather put this in mdc-base? (I actually considered doing that, but mdc-dom seemed more semantically correct. But maybe convenience is more important than semantics.)

@moog16 @mmalerba Is it OK that these types have the same names as existing types in lib.dom.d.ts? Does TypeScript somehow merge the two type definitions together or something? Or should we create a new interface with a different name that extends Window?

The purpose of this is actually to extend what is in lib.dom.d.ts. The TS lib.dom.d.ts Window definition does not have a CSS property, which is why we can reference it in our code.

I think this actually needs to be in a package and exported. Our clients/users using our packages, might need this for their code as well.

If we don't want to rely on dom as much, I suggest moving it to base.

Exactly, TS merges interfaces: https://www.typescriptlang.org/docs/handbook/declaration-merging.html

Done. Moved from mdc-dom to mdc-base.

…cript--refactor

mdc-web-bot · 2019-02-14T04:28:03Z

All 624 screenshot tests passed for commit 5ef72ad vs. feat/typescript! 💯🎉

packages/mdc-checkbox/component.ts

mdc-web-bot · 2019-02-19T17:01:43Z

All 624 screenshot tests passed for commit 1b8e912 vs. feat/typescript! 💯🎉

mdc-web-bot · 2019-02-19T17:15:12Z

All 624 screenshot tests passed for commit 1e68882 vs. feat/typescript! 💯🎉

…Surface`, which would break backward compatibility)

mdc-web-bot · 2019-02-19T18:10:29Z

All 624 screenshot tests passed for commit 03db3ea vs. feat/typescript! 💯🎉

mdc-web-bot · 2019-02-19T18:30:17Z

All 624 screenshot tests passed for commit 9406e0c vs. feat/typescript! 💯🎉

mdc-web-bot · 2019-02-19T18:33:10Z

All 624 screenshot tests passed for commit 07bc5ea vs. feat/typescript! 💯🎉

.gitignore

kfranqueiro · 2019-02-20T20:46:16Z

packages/mdc-animation/index.ts

-};
+export {util}; // New namespace
+export * from './types';
+export * from './util'; // Old namespace for backward compatibility


In master, animation also exports transformStyleProperties, which seems to have disappeared from the package on the TS branch?

const transformStyleProperties = ['transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'MSTransform'];

It seems very unlikely that anything external would rely on this though... (We relied on it in linear-progress but it no longer does; it uses getCorrectPropertyName now instead.)

Oh yeah, I guess that's technically a breaking change...

Should I mirror this with a PR in master to ensure it ends up in the changelog?

Is it possible and reasonable to do that in master? (I guess it comes down to being able to make a similar change to linear-progress in master.)

packages/mdc-tab-scroller/component.ts

packages/mdc-chips/chip/foundation.ts

packages/mdc-menu/index.ts

packages/mdc-drawer/component.ts

packages/mdc-ripple/types.ts

…()` methods

mdc-web-bot · 2019-02-21T01:32:41Z

All 624 screenshot tests passed for commit eb36503 vs. feat/typescript! 💯🎉

mdc-web-bot · 2019-02-21T01:48:59Z

All 624 screenshot tests passed for commit a09f608 vs. feat/typescript! 💯🎉

packages/mdc-tab-bar/index.ts

packages/mdc-linear-progress/foundation.ts

packages/mdc-radio/foundation.ts

mdc-web-bot · 2019-02-21T19:02:28Z

All 624 screenshot tests passed for commit 56a0650 vs. feat/typescript! 💯🎉

I feel that ken and andy have been focused on this PR that it is not necessary for me to continue.

Mirrors #4407 (comment) from the `feat/typescript` branch. BREAKING CHANGE: The `transformStyleProperties` array export has been removed from `mdc-animation`. Please use `getCorrectPropertyName(window, 'transform')` instead.

acdvorak assigned kfranqueiro and moog16 Feb 12, 2019

acdvorak requested review from kfranqueiro and moog16 February 12, 2019 10:25

googlebot added the cla: yes label Feb 12, 2019

acdvorak added 7 commits February 12, 2019 02:52

WIP: Dialog

64d44bd

WIP: DOM

4b8d7f1

WIP: floating-label

9395509

WIP: form-field

20b4709

WIP: Add missing factory functions

db04534

WIP: icon-button

73525f7

WIP: Revert accidental renames

80223a1

kfranqueiro mentioned this pull request Feb 12, 2019

feat(select): Convert JS to TypeScript #4386

Merged

Merge remote-tracking branch 'origin/feat/typescript' into feat/types…

7e85e42

…cript--refactor

kfranqueiro mentioned this pull request Feb 13, 2019

Convert packages to TypeScript #4225

Closed

45 tasks

kfranqueiro suggested changes Feb 13, 2019

View reviewed changes

acdvorak added 5 commits February 13, 2019 19:58

WIP: Fix typo

ff41340

WIP: Add missing private visibility modifier

482c6e1

WIP: Reorder methods for consistency

e9e0e33

WIP: Reorder exports

a080cda

Merge remote-tracking branch 'origin/feat/typescript' into feat/types…

5ef72ad

…cript--refactor

acdvorak mentioned this pull request Feb 14, 2019

feat(toolbar): Convert JS to TypeScript #4410

Merged

acdvorak commented Feb 14, 2019

View reviewed changes

packages/mdc-checkbox/component.ts Outdated Show resolved Hide resolved

kfranqueiro mentioned this pull request Feb 14, 2019

feat(top-app-bar): Convert JS to TypeScript #4397

Merged

acdvorak added 2 commits February 19, 2019 08:59

WIP: Add missing ./types export to mdc-dialog

08cd3bb

WIP: Make import paths more specific in textfield foundation

1e68882

WIP: Rename most types to include MDC prefix (except `RippleCapable…

03db3ea

…Surface`, which would break backward compatibility)

acdvorak added 2 commits February 19, 2019 10:14

WIP: Delete unused Sass Closure rewrite script (moved internally)

9406e0c

WIP: Update .gitignore and package.json for .rewrite-tmp

07bc5ea

WIP: Style

0f1a813

acdvorak mentioned this pull request Feb 19, 2019

fix(tab): Fix closure test errors #4414

Closed

kfranqueiro reviewed Feb 20, 2019

View reviewed changes

acdvorak added 4 commits February 20, 2019 16:53

WIP: Remove unnecessary export default MDCTabScroller

928628c

WIP: Add missing DO NOT INLINE comment to all `getDefaultFoundation…

0bfcf50

…()` methods

WIP: Rename RippleCapableSurface to MDCRippleCapableSurface

7f6693f

WIP: Organize .gitignore and add comments

eb36503

WIP: Re-indent all TS files to match Google style

a09f608

kfranqueiro suggested changes Feb 21, 2019

View reviewed changes

packages/mdc-tab-bar/index.ts Show resolved Hide resolved

packages/mdc-linear-progress/foundation.ts Show resolved Hide resolved

packages/mdc-radio/foundation.ts Show resolved Hide resolved

WIP: Add missing foundation constructors and ./types export

56a0650

kfranqueiro approved these changes Feb 21, 2019

View reviewed changes

acdvorak merged commit 72e8b66 into feat/typescript Feb 21, 2019

acdvorak deleted the feat/typescript--refactor branch February 21, 2019 20:46

This was referenced Feb 22, 2019

chore(infrastructure): Fix GitHub API authentication bug #4420

Closed

refactor(animation): Remove transformStyleProperties export #4453

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Make TS easier to wrap #4407

refactor: Make TS easier to wrap #4407

acdvorak commented Feb 12, 2019 •

edited

Loading

codecov-io commented Feb 12, 2019 •

edited

Loading

mdc-web-bot commented Feb 12, 2019

mdc-web-bot commented Feb 12, 2019

mdc-web-bot commented Feb 13, 2019

kfranqueiro Feb 13, 2019

acdvorak Feb 14, 2019

moog16 Feb 14, 2019

mmalerba Feb 14, 2019

acdvorak Feb 14, 2019

mdc-web-bot commented Feb 14, 2019

mdc-web-bot commented Feb 19, 2019

mdc-web-bot commented Feb 19, 2019

mdc-web-bot commented Feb 19, 2019

mdc-web-bot commented Feb 19, 2019

mdc-web-bot commented Feb 19, 2019

kfranqueiro Feb 20, 2019

acdvorak Feb 21, 2019

kfranqueiro Feb 21, 2019

mdc-web-bot commented Feb 21, 2019

mdc-web-bot commented Feb 21, 2019

mdc-web-bot commented Feb 21, 2019

refactor: Make TS easier to wrap #4407

refactor: Make TS easier to wrap #4407

Conversation

acdvorak commented Feb 12, 2019 • edited Loading

Goal

How

Packages

codecov-io commented Feb 12, 2019 • edited Loading

Codecov Report

mdc-web-bot commented Feb 12, 2019

mdc-web-bot commented Feb 12, 2019

mdc-web-bot commented Feb 13, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdc-web-bot commented Feb 14, 2019

mdc-web-bot commented Feb 19, 2019

mdc-web-bot commented Feb 19, 2019

mdc-web-bot commented Feb 19, 2019

mdc-web-bot commented Feb 19, 2019

mdc-web-bot commented Feb 19, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdc-web-bot commented Feb 21, 2019

mdc-web-bot commented Feb 21, 2019

mdc-web-bot commented Feb 21, 2019

acdvorak commented Feb 12, 2019 •

edited

Loading

codecov-io commented Feb 12, 2019 •

edited

Loading