Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add new lint rules to ease migration #2394

Merged
merged 29 commits into from
Apr 18, 2018
Merged

add new lint rules to ease migration #2394

merged 29 commits into from
Apr 18, 2018

Conversation

giladgray
Copy link
Contributor

@giladgray giladgray commented Apr 16, 2018

Fixes #2393

  • two new lint rules (with tests!!) in @blueprintjs/tslint-config package:
    1. blueprint-classes-constants enforces use of Classes.* constants instead of "pt-prefixed-strings".
    2. blueprint-icon-components enforces icon="tick" or icon={<TickIcon />} usage (requires [icons] Enable tree-shaking for SVG icons #2356 for icon components). this rule is disabled in the default config, as it's an opt-in decision to ensure tree shaking of icons is possible.
  • remove default file-header rule config as it references Palantir (still exists in the repo config).
  • fix lint errors in our codebase

Check out the README for usage instructions.

@giladgray giladgray requested review from rcchen and jkillian April 16, 2018 19:20
@blueprint-bot
Copy link

fix lint errors in our codebase due to classes-constants

Preview: documentation | landing | table

@blueprint-bot
Copy link

move stuff inside rules/ dirs, compile to lib/rules/

Preview: documentation | landing | table

@@ -0,0 +1,42 @@
/*
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, this package is only intended for @blueprintjs packages, right? So it doesn't make sense to put rules that will be consumed by end-user apps here, does it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 after this PR, it will contain some blueprint-specific rules, but this package is intended for consumption by who-so-ever wishes.

i proposed putting these rules here or in core itself and we agreed that this package makes more sense as it actually depends on tslint. i'll migrate the internal tslint-config to depend on this (where most of the config came from in the first place).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/palantir/tslint-blueprint was designed for rules like this, consider putting these there

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems a little late for that! Looks like that package already has this rule. But makes sense for these things to live in the blueprint repo, no?

Also 👋👋 hi @adidahiya!!

@blueprint-bot
Copy link

move rules to new tslint-rules package

Preview: documentation | landing | table

@blueprint-bot
Copy link

test linting failures

Preview: documentation | landing | table

@blueprint-bot
Copy link

compile rules before linting in CI

Preview: documentation | landing | table

@blueprint-bot
Copy link

another lint test

Preview: documentation | landing | table

@@ -16,7 +14,7 @@ const fakeFocusEngine = {

const focusEngine =
typeof document !== "undefined"
? new InteractionModeEngine(document.documentElement, FOCUS_DISABLED_CLASS)
? new InteractionModeEngine(document.documentElement, "pt-focus-disabled")
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

expecting lint failure

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

success ✅

*/

/**
* Enable Blueprint-specific TSLint rules defined in this package.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jkillian @rcchen new top-level file in this package that configures blueprint-specific rules.

@blueprint-bot
Copy link

move code back to tslint-config, add blueprint-rules.js module

Preview: documentation | landing | table

@blueprint-bot
Copy link

re-fix linting

Preview: documentation | landing | table

{
"extends": [
"@blueprintjs/tslint-config",
"@blueprintjs/tslint-config/blueprint-rules"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add an example with only this line and make it the basic usage example. There will be a lot more people I think who will want to just use the BP rules than use all the rules.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'll def add a note that the rules can be used on their own

@@ -25,11 +25,6 @@ module.exports = {
// ["assert", "equal", "use assert.strictEqual instead"]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this file should extend blueprint-rules.js, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no i thought that was the whole point of this... that the base config does not include any blueprint-specific stuff?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nah, the purpose is the inverse of that actually, that you can use the blueprint-specific rules (such as no icon strings) without pulling in the rest of the config

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok so default config includes blueprint, but you can also just use blueprint without config?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep! because most apps using BP are going to want to pick up the BP rules and config that say "don't use the .pt- prefix" but not pick up the general TS lint rule config

@giladgray
Copy link
Contributor Author

Check out the README for usage instructions.

};
// tslint:enable:object-literal-sort-keys

public static COMPONENT_MESSAGE = "use <NameIcon /> component for icon prop";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sort of makes me think <NameIcon /> is an actual component

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i might be able to improve the messaging here so it actually mentions icon name, but we gotta merge #2356 first. and i def want to add a fixer for this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well now it's NamedIcon

@blueprint-bot
Copy link

add README and LICENSE to tslint-config package

Preview: documentation | landing | table

@blueprint-bot
Copy link

blueprint-bot commented Apr 16, 2018

🤖 remove default file-header config for non-palantir users

Preview: documentation | landing | table

Copy link
Contributor

@themadcreator themadcreator left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nits

@@ -51,6 +51,7 @@ jobs:
keys:
- v7-dependency-cache-{{ checksum "yarn.lock" }}
- v7-dependency-cache-
- run: yarn compile --scope "@blueprintjs/tslint*"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since circle runs yarn compile above with no scope, shouldn't this already be done?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lint and compile run in parallel so they don't affect each other 😢

@@ -26,7 +26,10 @@ describe("Spinner", () => {
it("value sets stroke-dashoffset", () => {
// dash offset = X * (1 - value)
const root = mount(<Spinner value={0.35} />);
assert.isTrue(root.find(`.${Classes.SPINNER}`).hasClass(Classes.SPINNER_NO_SPIN), "missing class pt-no-spin");
assert.isTrue(
root.find(`.${Classes.SPINNER}`).hasClass(Classes.SPINNER_NO_SPIN),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will this also fail if the class can't be found? (i'm trying to infer why assert.isTrue was used...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"assert that the spinner is not spinning"

@@ -336,11 +336,11 @@ describe("<DateInput>", () => {
wrapper.setState({ isOpen: true });

// try typing a new time
wrapper.find(".pt-timepicker-millisecond").simulate("change", { target: { value: "1" } });
wrapper.find("." + Classes.TIMEPICKER_MILLISECOND).simulate("change", { target: { value: "1" } });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we use backtick interpolation elsewhere. might as well be consistent.

@@ -52,7 +52,7 @@ export class GuideLayer extends React.Component<IGuideLayerProps, {}> {
left: `${offset}px`,
};
const className = classNames(Classes.TABLE_OVERLAY, Classes.TABLE_VERTICAL_GUIDE, {
"pt-table-vertical-guide-flush-left": offset === 0,
[`${Classes.TABLE_VERTICAL_GUIDE}-flush-left`]: offset === 0,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: since our classes have configurable PREFIX, then this will technically work, but it's worth noting this is slightly different that the other uses since we're building a classname string.

const element = <div className={Classes.NAVBAR} />;
```

```json
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change json to js to disable highlighting error? Vanilla JSON doesn't allow comments.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

json5 will also work

@blueprint-bot
Copy link

major readme edits

Preview: documentation | landing | table

@blueprint-bot
Copy link

add fixers to icon-components rule!

Preview: documentation | landing | table

@blueprint-bot
Copy link

revert tslint config change, lint

Preview: documentation | landing | table

@giladgray giladgray merged commit c8e52b8 into develop Apr 18, 2018
@giladgray giladgray deleted the gg/lint-rules branch April 18, 2018 21:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

tslint rules to ease migration
6 participants