This repository is archived. Please use the JS patterns in the standard library instead.
getgrit / js Goto Github PK
View Code? Open in Web Editor NEWThis repository contains curated Grit patterns for JavaScript.
This repository contains curated Grit patterns for JavaScript.
This repository is archived. Please use the JS patterns in the standard library instead.
We should not remove imports that are from the modern package.
Exports are listed here: https://github.com/openai/openai-node/blob/dc821be3018c832650e21285bade265099f99efb/api.ts#L31
If there is no existing import from 'React' then the useState hooks etc. aren't added on the right library.
https://app.grit.io/studio?key=uUhS0sC_34Xy7rQGdOebq&preset=react_to_hooks&language=JS
For safety, you might want to always catch HTTP requests in a try/catch.
For example:
// Match this
await request("/bar")
// Don't match this
try {
await request("/foo");
} catch { }
One hitch is we also would want to consider traversing to the usage of a function.
For example, this should not match:
async function doRequest() {
return request("/bar");
}
export function main() {
try {
await doRequest();
} catch { }
}
We need a migration for the Mux SDK, similar to this OpenAI migration. Specifically, we need to convert repos from using this SDK to using this SDK.
grit patterns test --filter=your_pattern_name
to test that the pattern transforms before/after correctly.If a file is only a single AST node, using replace_import
fails.
Sample file:
import { ThemeProvider } from '@mui/styles';
Pattern:
engine marzano(0.1)
language js
`ThemeProvider` as $target where {
$target <: replace_import($old, new=`"@mui/material/styles"`),
}
Expected output:
import { ThemeProvider } from "@mui/material/styles";
Actual output:
import { ThemeProvider } from "@mui/material/styles";
import { ThemeProvider } from '@mui/styles';
Adding even a blank after the import is sufficient to restore the expected/correct behavior.
There are several breaking changes which slow down migrations.
Material UI v4 -> v5 includes many breaking changes: https://mui.com/material-ui/migration/migration-v4/
Most of these are covered by codemods, but some are not. Please develop a pattern that covers any cases not covered by codemods.
ex. import * as foo, { bar } from 'baz'
is not syntactically valid JS.
When we add a type annotation in Flow, we might need to import it.
Example:
/**
* @returns {import('somelib').MyType<any, any, any, any>}
*/
export function login(foo: string) /* : MyType*/ {
console.log("do something");
}
Upgrade from v1 to v6
Functions that are called in the constructor or main render function need to be defined before they are invoked.
See this failing case, where initialName is called before it is defined: https://app.grit.io/studio?key=ZlUxi-rn5wh6e20-iuw0c&preset=react_to_hooks&language=JS
The Vitest API is mostly compatible with Jest but it has a few incompatibilities.
We should add an automated migration that handles these:
test
, expect
, etc. from vitest (and removes existing jest imports, if found)jest.mock
with vi.mock
and handles the module mock differencesjest.requireActual
with vi.importActual
JEST_WORKER_ID
with VITEST_POOL_ID
beforeAll
and afterAll
hooks return undefinedAs seen in this PR, the pattern does a poor job when a class component is exported as the default for a package:
export default class Expandable extends React.Component<Props, State> {
...
}
If you have a shebang like this:
#!/usr/bin/env node
import { orderBy } from 'underscore';
import fetch from 'elsewhere';
import { fetch } from 'node-fetch';
import { fetch, more } from 'node-fetch';
import fetch from 'node-fetch';
console.log(orderBy([1, 2, 3]));
console.log(v4());
fetch();
Using ensure_import_from
and replace_import
will put the new imports above the shebang.
Ideally the query should:
Outcome:
import { new} from 'somewhere';
#!/usr/bin/env node
import { orderBy } from 'underscore';
import fetch from 'elsewhere';
import { fetch } from 'node-fetch';
import { fetch, more } from 'node-fetch';
import fetch from 'node-fetch';
console.log(orderBy([1, 2, 3]));
console.log(v4());
fetch();
NativeBase is deprecated and being replaced by Gluestack UI.
We currently have a pattern for converting React class components to functional components.
This pattern works nicely as a "first draft" but doesn't handle many edge cases and other scenarios. We'd like to do a spike refining it by validating and fixing some cases from open source projects.
If a useEffect
depends on layout etc. it should switch to useLayoutEffect
.
Sample file: https://github.com/salazarm/dagster/blob/master/js_modules/dagit/packages/core/src/graph/SVGViewport.tsx
Details: https://kentcdodds.com/blog/useeffect-vs-uselayouteffect
Tried to run it on one of my old repos: https://github.com/yisding/readpanda
Looks like it needs to replace OpenAIApi with OpenAI.
diff --git a/pages/api/image.ts b/pages/api/image.ts
index e2f4f87..1206cda 100644
--- a/pages/api/image.ts
+++ b/pages/api/image.ts
@@ -1,5 +1,5 @@
import type { NextApiRequest, NextApiResponse } from "next";
-import { Configuration, OpenAIApi } from "openai";
+import OpenAI from "openai";
const openai = new OpenAIApi(
new Configuration({
@@ -23,7 +23,7 @@ export default async function handler(
const { word } = req.query;
clip art of ${word}
,We would like to implement a migration from this SDK to the new version.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.