Code Monkey home page Code Monkey logo

js's People

Contributors

amedeedaboville avatar bbqbaron avatar chaitanyya avatar cipher-tech avatar cos avatar gitstart-app[bot] avatar ilevyor avatar mharris717 avatar morgante avatar nsbradford avatar porterehunley avatar sarthaksingh31 avatar seren5240 avatar srijan-paul avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

js's Issues

Import rewrites incorrectly insert new imports in front of shebang

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

moment.js -> date-fns migration

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.

Pattern to find uncaught HTTP requests

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

Improve react2hooks pattern

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.

replace_import doesn't work if there are no other AST nodes

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.

Material UI v4->v5

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

Mux migration

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

Migrating from Jest to Vitest

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

openai v4 might be missing a codemod

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

Insert imports as part of FlowToTypeScript

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

[React2Hooks] Default exports

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.