getgrit / js Goto Github PK

We would like to implement a migration from this SDK to the new version.

Acceptance criteria

• The migration should fully cover cases in this repo
• Includes at least 3 test cases in the GritQL file

The Vitest API is mostly compatible with Jest but it has a few incompatibilities.

We should add an automated migration that handles these:

• Explicitly imports test, expect, etc. from vitest (and removes existing jest imports, if found)
• Replaces jest.mock with vi.mock and handles the module mock differences
• Replaces jest.requireActual with vi.importActual
• Replaces JEST_WORKER_ID with VITEST_POOL_ID
• Replaces callbacks with promises
• Ensures beforeAll and afterAll hooks return undefined

Acceptance criteria

• Migration file covering all the above cases
• At least 5 test cases
• Evidence of running this on an open source repo using Jest and getting useful results

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

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

We would like a pattern that successfully converts a project using moment.js to using date-fns.

Acceptance criteria

• Migrate the core moment.js functions and APIs
• At least 3 code samples
• Ideally, find an open source repo using moment.js and correctly migrate it to date-fns.

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

https://github.com/muxinc/stream.new/pull/185/files#r1331925149

https://nextjs-ja-translation-docs.vercel.app/docs/migrating/from-react-router

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.

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

Upgrade from v1 to v6

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

• Find the last import and put it after that.
• If none is find, put imports after any shebang found

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();

ex. import * as foo, { bar } from 'baz' is not syntactically valid JS.

NativeBase is deprecated and being replaced by Gluestack UI.

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 { }
}

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.

Acceptance criteria

• Coverage of all of the breaking changes that codemods don't cover
• At least 5 samples / unit tests

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.

Process

1. Start by gathering a set of before/samples in the markdown file. You can use this repo as a sample to gather things from.
2. Use grit patterns test --filter=your_pattern_name to test that the pattern transforms before/after correctly.
3. Iterate (usually in the studio) until all cases are covered).

Acceptance criteria

1. The pattern must be sufficiently general - it should not cover only a single example.
2. You must include at least 5 test cases in the markdown file.
3. The pattern should fully cover converting this sample repo to the new SDK

There are several breaking changes which slow down migrations.

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;

• const response = await openai.createImage({

• const response = await openai.images.generate({
  prompt: clip art of ${word},

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");
}

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.

Spec

• Run the pattern (as is) on superset repo
• Note the cases that don't work and incrementally add them as additional test scenarios
• Fix the test scenarios

Guidelines

• Please take this incrementally. It's ok to do one PR / test case at a time.