Pattern Library

Grit comes with 58 out of the box patterns that can be leveraged immediately.

Migration Patterns

Migration patterns can be used to automatically migrate you to a new framework or library.

Chai to Jest (chai_to_jest)

Convert Chai test assertions to Jest.

Function expressions to arrow functions (es6_arrow_functions)

Converts function expressions to ES6 arrow functions

Prefer ES6-style exports over module.exports (es6_exports)

Converts CommonJS module.exports to ES6-style exports.

Prefer imports over require (es6_imports)

Converts require statements to ES6-style import.

Upgrade Hathora to Dedicated TS SDK (hathora_ts)

Jest to Vitest (jest_to_vitest)

Convert Jest tests to Vitest

Migrate Knockout to React (knockout_to_react)

Knockout.js is an older JavaScript framework that is still used by many developers. This migration helps with migrating your Knockout code to React.

Upgrade Mux SDK to v8 (mux_v8)

Upgrade OpenAI SDK to v4 (openai_v4)

Upgrade the OpenAI SDK to v4 following this guide.

Adopt OpenRouter (openrouter)

Protractor to Playwright (protractor_to_playwright)

Protractor to Playwright.

Convert React Class Components to Functional Components (react_to_hooks)

This pattern converts React class components to functional components, with hooks.

JavaScript to TypeScript (js_to_ts)

AngularJS to Angular*

Angular to React*

Linters

These patterns can autofix many common JavaScript mistakes, including issues that eslint doesn't fix automatically.

PreferEarlyReturn (prefer_early_return)

Prefer to use early returns to keep functions flat.

Harden DOM usage*

Miscellaneous

Add Type To Caught Errors (add_type_caught_errors)

Add any type annotation to caught errors. It is a common source of tsc errors.

Blocks function (blocks)

The group_blocks function takes a target list and returns a list of lists, where each sublist is a block of items that are adjacent to each other in the original program.

Rewrite PureComponent ⇒ Component (convert_PureComponent_to_Component)

If a PureComponent has the shouldComponentUpdate method, convert it to a regular Component.

Rewrite x == -0 ⇒ Object.is(x, -0) (convert_negative_zero_equality_check_to_object_is)

Convert any equality check with -0 to the more precise Object.is.

Non-strict == ⇒ strict === (enforce_strict_equality_check)

Convert non-strict equality checking, using ==, to the strict version, using ===.

Prefer require over imports (es6_imports_to_require)

Converts ES6-style import to require statements.

⇒ explicit conversion between types (explicit_type_conversion)

Use explicit conversions between types, e.g., '' + x => String(s).

Insert a .jsx extension on files that contain JSX (fix_jsx_file_extension)

Files containing JSX should have a .jsx extension.

Fix for counter direction (for_direction)

If a for counter moves in the wrong direction the loop will run infinitely. Mostly, an infinite for loop is a typo and causes a bug.

Import management (importing)

Grit includes standard patterns for declaratively adding, removing, and updating imports.

Rewrite indexOf(...) === -1 ⇒ includes (index_of_to_includes)

ES7 introduced the includes method for arrays so bitwise and comparisons to -1 are no longer needed.

Rewrite innerHtml ⇒ innerText (inner_html_to_inner_text)

Replaces innerHtml with innerText, which is safer in most cases.

Consolidate Jest arrayContaining assertions (jest_array_containing)

expect.arrayContaining can be used to validate an array containing multiple different elements, so multiple statements are not required.

Remove <a> Tags From Link Components (next13_links)

Migrate Link component children to Next13

Rename anonymous default export functions ⇒ main (no_anonymous_default_export)

Replaces export default function () { } with export default function main () { } and export default () => { } with const main = () => { }; export default main

Rewrite Array(a, b, ...) ⇒ [a, b, ...] (no_array_constructor)

The literal notation avoids the single-argument pitfall or the Array global being redefined.

Remove async from Promise (no_async_promise_executor)

The Promise is already executed asynchronously and exceptions thrown by the function will be lost.

Rewrite & ⇒ &&, | ⇒ || (no_bitwise)

Bitwise operators & or | are often used by mistake instead of && or ||, which can cause unexpected errors.

Remove arguments.caller and arguments.callee (no_caller)

arguments.caller and arguments.called have been deprecated.

Remove console.log (no_console_log)

Remove console.log statements.

Remove unreachable code (no_dead_code)

Remove unreachable code found after return / throw / continue or break statements.

Remove debugger statement (no_debugger)

The code in production should not contain a debugger. It causes the browser to stop executing the code and open the debugger.

Compare null using === or !== (no_eq_null)

Comparing to null needs a type-checking operator (=== or !==), to avoid incorrect results when the value is undefined.

Rewrite __iterator__ property ⇒ _iterator_ (no_iterator)

Use _iterator_ instead of __iterator__. __iterator__ is obsolete and is not implemented by all browsers.

Rewrite new Object() ⇒ {} (no_new_object)

The {} literal form is a more concise way of creating an object.

Rewrite new Symbol ⇒ Symbol (no_new_symbol)

Calling Symbol with the new operator throws a TypeError exception.

Prototype methods ⇒ Object.prototype methods (no_prototype_builtins)

Call hasOwnProperty, isPrototypeOf, propertyIsEnumerable methods only from Object.prototype.
Otherwise it can cause errors.

Hoist assignment out of return statement (no_return_assign)

This rule hoists the assignments out of return. Does not apply when assignment is wrapped in parentheses.

No skipped tests (no_skipped_tests)

Disable skipping Jest tests without an explanation.

Rewrite throw "Err" ⇒ throw new Error("Err") (no_throw_literal)

It is a good practice to throw Error objects on exceptions because they automatically keep track of where they were created.

Rewrite !key in col ⇒ !(key in col) (no_unsafe_negation)

Negates key instead of the entire expression, which is likely a bug.

Yoda conditions not (no_yoda_conditions)

Prefer natural language style conditions in favour of Yoda style conditions.

Rewrite === NaN ⇒ isNaN (prefer_is_nan)

Convert comparisons to NaN (e.g., x == NaN) to use isNaN (e.g., isNaN(x)).

⇒ self-closing JSX tags (prefer_self_closing_tag_jsx)

Components without children can be self-closed to avoid unnecessary extra closing tag.

Remove .escapeMarkup = false (remove_escape_markup)

Some template engines allow disabling HTML escaping, which can allow XSS vulnerabilities.

Remove noAssert from Buffer calls (remove_node_buffer_offset_check_flag)

If the noAssert flag is set, offset can go beyond the end of the Buffer, which is a security vulnerability.

Rewrite shouldComponentUpdate ⇒ . (remove_should_component_update_from_pure_components)

Remove the shouldComponentUpdate method from PureComponent. PureComponent already has an implementation.

Split tRPC Router (split_trpc_router)

Split a tRPC router into multiple files, one per route.

Rewrite Math.pow ⇒ ** (use_exponentiation_operator)

ES7 introduced the exponentiation operator ** so that using Math.pow is no longer necessary.

Literals (util_literal)

Utility patterns for matching literals.

Upsert (util_upsert)

The upsert pattern can be used to update a value in an object, or insert it if the key doesn't already exist.

* Patterns with an asterisk are in private alpha with select customers.