This repository has been archived by the owner on Jan 13, 2025. It is now read-only.
feat: Convert packages to TypeScript #4451
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…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
Also moves `mdc-dom/events.ts` to `mdc-base/types.ts` and adds `CustomEventListener<E extends Event>` type.
All TS packages now:
* Have hybrid default+object _export_ syntax: `export {MDCFoo as default, MDCFoo}`
* Use object _import_ syntax: `import {MDCComponent}`
* Export foundation, adapter, and types in `index.ts`
moog16
suggested changes
Feb 26, 2019
|
All 624 screenshot tests passed for commit 216d975 vs. |
|
All 624 screenshot tests passed for commit d349fea vs. |
kfranqueiro
reviewed
Feb 27, 2019
There was a problem hiding this comment.
I just found what seems like a regression on this branch when testing the catalog with it. On the Menu page, the "open menu" button should open a menu upwards due to being near the bottom of the viewport, but on this branch it opens downwards. This might point to a regression in menu-surface.
Oddly, the Enhanced Selects on the Select catalog page aren't affected.
(Tested using my script to copy packages from a MDC branch into a project that depends on it)
This reverts commit 60c9498.
|
All 624 screenshot tests passed for commit 2abfb30 vs. |
|
PR #4351 introduced a BREAKING CHANGE to the MDC React and/or the Catalog Site need to be updated to work with that change in |
Closed
moog16
approved these changes
Feb 27, 2019
kfranqueiro
approved these changes
Feb 27, 2019
There was a problem hiding this comment.
The reason I brought up the catalog regression here is because it is only happening against the TypeScript branch. It works fine against master, which means that change alone is not what caused it.
I'll approve this but I am going to re-test what I saw and look at the foundations, because I am concerned that something shifted during the conversion.
acdvorak
added a commit
that referenced
this pull request
Feb 27, 2019
Changes that didn't make it into #4451: - Remove `feat/typescript` branch from `.travis.yml` - Replace `any` with `unknown` in all TS files - Add screenshot test for menu anchored in bottom-right corner - Remove unnecessary ternary
|
It's certainly possible that a subtle change snuck into |
acdvorak
added a commit
that referenced
this pull request
Mar 7, 2019
### New features
* Converts custom linter from JS to strict TypeScript
* Adds new custom linter rules (see below)
* Adds `curly: true` and `quotemark: avoid-escape` to `tslint.json` to match internal style guide
* Fixes all linter violations (including missing/typo'd methods in `README.md` files)
* Renames `npm run lint:imports` to `lint:mdc`
* Renames `lint-imports.js` to `lint-mdc.ts`
### New linter rules
#### Leading underscores are prohibited in function and property names
```ts
function _emit() {} // linter error
class MDCFoo {
_bar = false; // linter error
}
```
#### Trailing underscores are only allowed on class properties and methods
```ts
interface MDCFooAdapter {
bar_(): void; // linter error (trailing underscore not allowed in interface)
}
class MDCFooFoundation {
private bar_() {} // OK
}
```
#### Trailing underscore members must be marked `private` or `protected` (and vice versa)
```ts
class MDCFoo {
root_!: HTMLElement; // OK (there's an exception for root_)
foo_ = false; // linter error (missing private/protected)
private bar_ = 1; // OK
protected baz = 2; // linter error (missing trailing underscore)
}
```
#### Inline-initialized properties that could overwrite method-assigned values are not allowed in `component.ts` files
```ts
class MDCFoo {
private foo_ = -1; // linter error (this.foo_ is reassigned below)
private bar_ = -1; // OK (value is never reassigned)
initialize() {
this.foo_ = someCondition ? 16 : 0;
}
}
```
#### `@returns` (plural) annotations are prohibited in favor of `@return` (singular)
```ts
class MDCFoo {
/**
* @returns Whether the foo is a bar. // linter error (use `@return` instead)
*/
isBar() {
return true;
}
/**
* @return Whether the foo is a baz. // OK
*/
isBaz() {
return true;
}
}
```
#### Public class methods and properties must be documented in the package's `README.md` file
This includes interfaces in `adapter.ts` as well.
```markdown
### `MDCFooAdapter`
Method Signature | Description
--- | ---
`deregisterFoo() => void` | Deregisters the foo.
### `MDCFooFoundation`
Method Signature | Description
--- | ---
`setFoo(foo: boolean) => void` | Sets the value of `foo`.
```
```ts
/** @fileoverview adapter.ts */
interface MDCFooAdapter {
registerFoo(): void; // linter error (missing from README)
deregisterFoo(): void; // OK (method appears in README)
}
```
```ts
/** @fileoverview foundation.ts */
class MDCFooFoundation {
foo = true; // OK (property appears in README)
bar = true; // linter error (missing from README)
setFoo(foo) { this.foo = foo; } // OK (method appears in README)
setBar(bar) { this.bar = bar; } // linter error (missing from README)
}
```
```ts
/** @fileoverview types.ts */
interface MDCMenuPoint {
x: number; // OK (non-adapter interfaces are exempt)
y: number; // OK (non-adapter interfaces are exempt)
}
```
### Backward-incompatible changes
Several internal methods had typos in their names prior to the [TS conversion](#4451). This PR fixes them.
Realistically, the changes shouldn't affect any clients, but it's technically possible that someone could be relying on one of these methods:
* `MDCTextField.initialSyncWithDom()` has been renamed to `initialSyncWithDOM()` to override the [base method in `MDCComponent`](https://github.com/material-components/material-components-web/blob/720bef02fe5d55cffe827614de89f6eac8b0526b/packages/mdc-base/component.ts#L50). This typo was [already present in the JS version](https://github.com/material-components/material-components-web/blob/aa4499148b39d1e7a77d68822047df536946fdb6/packages/mdc-textfield/index.js#L199).
* `MDCDismissibleDrawerFoundation` methods `opened()` and `closed()` have been renamed to `opened_()` and `closed_()` to reflect their `protected` accessibility.
* All methods with trailing underscores are now explicitly marked `private` or `protected`.
adrianschmidt
pushed a commit
to Lundalogik/material-components-web
that referenced
this pull request
Mar 29, 2019
### New features
* Converts custom linter from JS to strict TypeScript
* Adds new custom linter rules (see below)
* Adds `curly: true` and `quotemark: avoid-escape` to `tslint.json` to match internal style guide
* Fixes all linter violations (including missing/typo'd methods in `README.md` files)
* Renames `npm run lint:imports` to `lint:mdc`
* Renames `lint-imports.js` to `lint-mdc.ts`
### New linter rules
#### Leading underscores are prohibited in function and property names
```ts
function _emit() {} // linter error
class MDCFoo {
_bar = false; // linter error
}
```
#### Trailing underscores are only allowed on class properties and methods
```ts
interface MDCFooAdapter {
bar_(): void; // linter error (trailing underscore not allowed in interface)
}
class MDCFooFoundation {
private bar_() {} // OK
}
```
#### Trailing underscore members must be marked `private` or `protected` (and vice versa)
```ts
class MDCFoo {
root_!: HTMLElement; // OK (there's an exception for root_)
foo_ = false; // linter error (missing private/protected)
private bar_ = 1; // OK
protected baz = 2; // linter error (missing trailing underscore)
}
```
#### Inline-initialized properties that could overwrite method-assigned values are not allowed in `component.ts` files
```ts
class MDCFoo {
private foo_ = -1; // linter error (this.foo_ is reassigned below)
private bar_ = -1; // OK (value is never reassigned)
initialize() {
this.foo_ = someCondition ? 16 : 0;
}
}
```
#### `@returns` (plural) annotations are prohibited in favor of `@return` (singular)
```ts
class MDCFoo {
/**
* @returns Whether the foo is a bar. // linter error (use `@return` instead)
*/
isBar() {
return true;
}
/**
* @return Whether the foo is a baz. // OK
*/
isBaz() {
return true;
}
}
```
#### Public class methods and properties must be documented in the package's `README.md` file
This includes interfaces in `adapter.ts` as well.
```markdown
### `MDCFooAdapter`
Method Signature | Description
--- | ---
`deregisterFoo() => void` | Deregisters the foo.
### `MDCFooFoundation`
Method Signature | Description
--- | ---
`setFoo(foo: boolean) => void` | Sets the value of `foo`.
```
```ts
/** @fileoverview adapter.ts */
interface MDCFooAdapter {
registerFoo(): void; // linter error (missing from README)
deregisterFoo(): void; // OK (method appears in README)
}
```
```ts
/** @fileoverview foundation.ts */
class MDCFooFoundation {
foo = true; // OK (property appears in README)
bar = true; // linter error (missing from README)
setFoo(foo) { this.foo = foo; } // OK (method appears in README)
setBar(bar) { this.bar = bar; } // linter error (missing from README)
}
```
```ts
/** @fileoverview types.ts */
interface MDCMenuPoint {
x: number; // OK (non-adapter interfaces are exempt)
y: number; // OK (non-adapter interfaces are exempt)
}
```
### Backward-incompatible changes
Several internal methods had typos in their names prior to the [TS conversion](material-components#4451). This PR fixes them.
Realistically, the changes shouldn't affect any clients, but it's technically possible that someone could be relying on one of these methods:
* `MDCTextField.initialSyncWithDom()` has been renamed to `initialSyncWithDOM()` to override the [base method in `MDCComponent`](https://github.com/material-components/material-components-web/blob/720bef02fe5d55cffe827614de89f6eac8b0526b/packages/mdc-base/component.ts#L50). This typo was [already present in the JS version](https://github.com/material-components/material-components-web/blob/aa4499148b39d1e7a77d68822047df536946fdb6/packages/mdc-textfield/index.js#L199).
* `MDCDismissibleDrawerFoundation` methods `opened()` and `closed()` have been renamed to `opened_()` and `closed_()` to reflect their `protected` accessibility.
* All methods with trailing underscores are now explicitly marked `private` or `protected`.
(cherry picked from commit 7357170)
adrianschmidt
pushed a commit
to Lundalogik/material-components-web
that referenced
this pull request
Mar 29, 2019
### New features
* Converts custom linter from JS to strict TypeScript
* Adds new custom linter rules (see below)
* Adds `curly: true` and `quotemark: avoid-escape` to `tslint.json` to match internal style guide
* Fixes all linter violations (including missing/typo'd methods in `README.md` files)
* Renames `npm run lint:imports` to `lint:mdc`
* Renames `lint-imports.js` to `lint-mdc.ts`
### New linter rules
#### Leading underscores are prohibited in function and property names
```ts
function _emit() {} // linter error
class MDCFoo {
_bar = false; // linter error
}
```
#### Trailing underscores are only allowed on class properties and methods
```ts
interface MDCFooAdapter {
bar_(): void; // linter error (trailing underscore not allowed in interface)
}
class MDCFooFoundation {
private bar_() {} // OK
}
```
#### Trailing underscore members must be marked `private` or `protected` (and vice versa)
```ts
class MDCFoo {
root_!: HTMLElement; // OK (there's an exception for root_)
foo_ = false; // linter error (missing private/protected)
private bar_ = 1; // OK
protected baz = 2; // linter error (missing trailing underscore)
}
```
#### Inline-initialized properties that could overwrite method-assigned values are not allowed in `component.ts` files
```ts
class MDCFoo {
private foo_ = -1; // linter error (this.foo_ is reassigned below)
private bar_ = -1; // OK (value is never reassigned)
initialize() {
this.foo_ = someCondition ? 16 : 0;
}
}
```
#### `@returns` (plural) annotations are prohibited in favor of `@return` (singular)
```ts
class MDCFoo {
/**
* @returns Whether the foo is a bar. // linter error (use `@return` instead)
*/
isBar() {
return true;
}
/**
* @return Whether the foo is a baz. // OK
*/
isBaz() {
return true;
}
}
```
#### Public class methods and properties must be documented in the package's `README.md` file
This includes interfaces in `adapter.ts` as well.
```markdown
### `MDCFooAdapter`
Method Signature | Description
--- | ---
`deregisterFoo() => void` | Deregisters the foo.
### `MDCFooFoundation`
Method Signature | Description
--- | ---
`setFoo(foo: boolean) => void` | Sets the value of `foo`.
```
```ts
/** @fileoverview adapter.ts */
interface MDCFooAdapter {
registerFoo(): void; // linter error (missing from README)
deregisterFoo(): void; // OK (method appears in README)
}
```
```ts
/** @fileoverview foundation.ts */
class MDCFooFoundation {
foo = true; // OK (property appears in README)
bar = true; // linter error (missing from README)
setFoo(foo) { this.foo = foo; } // OK (method appears in README)
setBar(bar) { this.bar = bar; } // linter error (missing from README)
}
```
```ts
/** @fileoverview types.ts */
interface MDCMenuPoint {
x: number; // OK (non-adapter interfaces are exempt)
y: number; // OK (non-adapter interfaces are exempt)
}
```
### Backward-incompatible changes
Several internal methods had typos in their names prior to the [TS conversion](material-components#4451). This PR fixes them.
Realistically, the changes shouldn't affect any clients, but it's technically possible that someone could be relying on one of these methods:
* `MDCTextField.initialSyncWithDom()` has been renamed to `initialSyncWithDOM()` to override the [base method in `MDCComponent`](https://github.com/material-components/material-components-web/blob/720bef02fe5d55cffe827614de89f6eac8b0526b/packages/mdc-base/component.ts#L50). This typo was [already present in the JS version](https://github.com/material-components/material-components-web/blob/aa4499148b39d1e7a77d68822047df536946fdb6/packages/mdc-textfield/index.js#L199).
* `MDCDismissibleDrawerFoundation` methods `opened()` and `closed()` have been renamed to `opened_()` and `closed_()` to reflect their `protected` accessibility.
* All methods with trailing underscores are now explicitly marked `private` or `protected`.
(cherry picked from commit 7357170)
nshahan
pushed a commit
to angulardart/angular_components
that referenced
this pull request
Apr 1, 2019
This CL includes several minor TypeScript refactorings from PRs #4451, #4461, and #4409. Clients and unit tests should be unaffected. https://github.com/material-components/material-components-web/releases/tag/v1.0.0-0 material-components/material-components-web#4451 material-components/material-components-web#4461 material-components/material-components-web#4409 PiperOrigin-RevId: 239228044
nshahan
pushed a commit
to angulardart/angular_components
that referenced
this pull request
Apr 15, 2019
This CL includes several minor TypeScript refactorings from PRs #4451, #4461, and #4409. Clients and unit tests should be unaffected. https://github.com/material-components/material-components-web/releases/tag/v1.0.0-0 material-components/material-components-web#4451 material-components/material-components-web#4461 material-components/material-components-web#4409 PiperOrigin-RevId: 239228044
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #4225
BREAKING CHANGE: The previously deprecated mdc-icon-toggle package has been removed; use mdc-icon-button instead.