Move next-codemod to Next.js monorepo (#15536)

Author: timneutkens

.eslintignore

@@ -8,4 +8,8 @@ packages/next/compiled/**/*
 packages/react-refresh-utils/**/*.js
 packages/react-dev-overlay/lib/**
 **/__tmp__/**
-.github/actions/next-stats-action/.work
+.github/actions/next-stats-action/.work
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*
+packages/next-codemod/**/*.js
+packages/next-codemod/**/*.d.ts

.prettierignore

@@ -8,4 +8,8 @@ packages/react-refresh-utils/**/*.d.ts
 packages/react-dev-overlay/lib/**
 **/__tmp__/**
 lerna.json
-.github/actions/next-stats-action/.work
+.github/actions/next-stats-action/.work
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*
+packages/next-codemod/**/*.js
+packages/next-codemod/**/*.d.ts

.prettierignore_staged

@@ -3,3 +3,5 @@
 **/dist/**
 packages/next/compiled/**/*
 lerna.json
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*

package.json

@@ -13,7 +13,7 @@
     "testsafari": "cross-env BROWSER_NAME=safari yarn testonly",
     "testfirefox": "cross-env BROWSER_NAME=firefox yarn testonly",
     "testie": "cross-env BROWSER_NAME=\"internet explorer\" yarn testonly",
-    "testall": "yarn run testonly -- --ci --forceExit",
+    "testall": "yarn run testonly -- --ci --forceExit && lerna run --scope @next/codemod test",
     "genstats": "cross-env LOCAL_STATS=true node .github/actions/next-stats-action/src/index.js",
     "pretest": "yarn run lint",
     "git-reset": "git reset --hard HEAD",

packages/next-codemod/.gitignore

@@ -0,0 +1,5 @@
+*.d.ts
+*.js
+*.js.map
+!transforms/__tests__/**/*.js
+!transforms/__testfixtures__/**/*.js

packages/next-codemod/README.md

@@ -0,0 +1,171 @@
+# Next.js Codemod
+
+This repository contains Codemod transformations to help upgrade Next.js codebases.
+
+## v9
+
+### `name-default-component`
+
+Transforms anonymous components into named components to make sure they work with [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
+
+For example
+
+```jsx
+// my-component.js
+export default function () {
+  return <div>Hello World</div>
+}
+```
+
+Transforms into:
+
+```jsx
+// my-component.js
+export default function MyComponent() {
+  return <div>Hello World</div>
+}
+```
+
+The component will have a camel cased name based on the name of the file, and it also works with arrow functions.
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Download the codemod:
+
+```
+curl -L https://github.com/zeit/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/name-default-component.js
+```
+
+Run the transformation:
+
+```
+npx jscodeshift -t ./name-default-component.js components/**/*.js
+```
+
+TypeScript files can use this codemod too:
+
+```
+npx jscodeshift -t ./name-default-component.js --parser=tsx components/**/*.tsx
+```
+
+If you have components in multiple folders, change the path to `**/*.js` and add `--ignore-pattern="**/node_modules/**"`.
+
+After the transformation is done the `name-default-component.js` file in the root of your project can be removed.
+
+### `withamp-to-config`
+
+Transforms the `withAmp` HOC into Next.js 9 page configuration.
+
+For example:
+
+```js
+// Before
+import { withAmp } from 'next/amp'
+
+function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export default withAmp(Home)
+```
+
+```js
+// After
+export default function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export const config = {
+  amp: true,
+}
+```
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Download the codemod:
+
+```
+curl -L https://github.com/zeit/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js
+```
+
+Run the transformation:
+
+```
+npx jscodeshift -t ./withamp-to-config.js pages/**/*.js
+```
+
+After the transformation is done the `withamp-to-config.js` file in the root of your project can be removed.
+
+## v6
+
+### `url-to-withrouter`
+
+Tranforms the deprecated automatically injected `url` property on top level pages to using `withRouter` and the `router` property it injects. Read more here: [err.sh/next.js/url-deprecated](https://err.sh/next.js/url-deprecated)
+
+For example:
+
+```js
+// From
+import React from 'react'
+export default class extends React.Component {
+  render() {
+    const { pathname } = this.props.url
+    return <div>Current pathname: {pathname}</div>
+  }
+}
+```
+
+```js
+// To
+import React from 'react'
+import { withRouter } from 'next/router'
+export default withRouter(
+  class extends React.Component {
+    render() {
+      const { pathname } = this.props.router
+      return <div>Current pathname: {pathname}</div>
+    }
+  }
+)
+```
+
+This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](./transforms/__testfixtures__/url-to-withrouter).
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Download the codemod:
+
+```
+curl -L https://github.com/zeit/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/url-to-withrouter.js
+```
+
+Run the transformation:
+
+```
+npx jscodeshift -t ./url-to-withrouter.js pages/**/*.js
+```
+
+After the transformation is done the `url-to-withrouter.js` file in the root of your project can be removed.
+
+## Authors
+
+- Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens)) – [ZEIT](https://zeit.co)
+- Joe Haddad ([@timer150](https://twitter.com/timer150)) - [ZEIT](https://zeit.co)

packages/next-codemod/license.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Vercel, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/next-codemod/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@next/codemod",
+  "version": "1.1.0",
+  "license": "MIT",
+  "dependencies": {
+    "jscodeshift": "^0.6.4"
+  },
+  "scripts": {
+    "prepublish": "tsc -d -p tsconfig.json",
+    "build": "tsc -d -w -p tsconfig.json",
+    "test": "jest"
+  }
+}

packages/next-codemod/transforms/__testfixtures__/name-default-component/1-starts-with-number.input.js

@@ -0,0 +1 @@
+export default () => <div>Anonymous function</div>;

packages/next-codemod/transforms/__testfixtures__/name-default-component/1-starts-with-number.output.js

@@ -0,0 +1,11 @@
+class ExistingName2Input {
+	render() {}
+}
+
+class nested {
+	render() {
+		const ExistingName2InputComponent = null;
+	}
+}
+
+export default () => <div>Anonymous function</div>;

packages/next-codemod/transforms/__testfixtures__/name-default-component/existing-name-2.input.js

@@ -0,0 +1,13 @@
+class ExistingName2Input {
+	render() {}
+}
+
+class nested {
+	render() {
+		const ExistingName2InputComponent = null;
+	}
+}
+
+const ExistingName2InputComponent = () => <div>Anonymous function</div>;
+
+export default ExistingName2InputComponent;

packages/next-codemod/transforms/__testfixtures__/name-default-component/existing-name-2.output.js

@@ -0,0 +1,7 @@
+function ExistingName3Input() {}
+
+function nested() {
+	const ExistingName3InputComponent = null;
+}
+
+export default () => <div>Anonymous function</div>;

packages/next-codemod/transforms/__testfixtures__/name-default-component/existing-name-3.input.js

@@ -0,0 +1,9 @@
+function ExistingName3Input() {}
+
+function nested() {
+	const ExistingName3InputComponent = null;
+}
+
+const ExistingName3InputComponent = () => <div>Anonymous function</div>;
+
+export default ExistingName3InputComponent;

packages/next-codemod/transforms/__testfixtures__/name-default-component/existing-name-3.output.js

@@ -0,0 +1,4 @@
+const ExistingNameIgnoreInput = null;
+const ExistingNameIgnoreInputComponent = null;
+
+export default () => <div>Anonymous function</div>;

packages/next-codemod/transforms/__testfixtures__/name-default-component/existing-name-ignore.input.js

@@ -0,0 +1,7 @@
+const ExistingNameInput = null;
+
+function nested() {
+	const ExistingNameInputComponent = null;
+}
+
+export default () => <div>Anonymous function</div>;

packages/next-codemod/transforms/__testfixtures__/name-default-component/existing-name-ignore.output.js

@@ -0,0 +1,9 @@
+const ExistingNameInput = null;
+
+function nested() {
+	const ExistingNameInputComponent = null;
+}
+
+const ExistingNameInputComponent = () => <div>Anonymous function</div>;
+
+export default ExistingNameInputComponent;

packages/next-codemod/transforms/__testfixtures__/name-default-component/existing-name.input.js

@@ -0,0 +1 @@
+export default () => <div>Anonymous function</div>;

packages/next-codemod/transforms/__testfixtures__/name-default-component/existing-name.output.js

@@ -0,0 +1,2 @@
+const FunctionComponent2Input = () => <div>Anonymous function</div>;
+export default FunctionComponent2Input;

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-component-2.input.js

@@ -0,0 +1,7 @@
+export default () => {
+	const x = 'y';
+	if (true) {
+		return '';
+	}
+	return null;
+};

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-component-2.output.js

@@ -0,0 +1,7 @@
+export default () => {
+	const x = 'y';
+	if (true) {
+		return <div>Anonymous function</div>;
+	}
+	return null;
+};

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-component-ignore.input.js

@@ -0,0 +1,9 @@
+const FunctionComponentInput = () => {
+	const x = 'y';
+	if (true) {
+		return <div>Anonymous function</div>;
+	}
+	return null;
+};
+
+export default FunctionComponentInput;

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-component-ignore.output.js

@@ -0,0 +1,7 @@
+export default function Name() {
+	const x = 'y';
+	if (true) {
+		return <div>Anonymous function</div>;
+	}
+	return null;
+}

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-component.input.js

@@ -0,0 +1,7 @@
+export default function () {
+	const x = 'y';
+	if (true) {
+		return <div>Anonymous function</div>;
+	}
+	return null;
+}

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-component.output.js

@@ -0,0 +1,7 @@
+export default function FunctionExpressionInput() {
+	const x = 'y';
+	if (true) {
+		return <div>Anonymous function</div>;
+	}
+	return null;
+}

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-expression-ignore.input.js

@@ -0,0 +1 @@
+export default () => <div>Anonymous function</div>;

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-expression-ignore.output.js

@@ -0,0 +1,7 @@
+import {withRouter} from 'next/router'
+
+export default withRouter(class extends React.Component {
+  render() {
+    const test = this.props.url
+  }
+})

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-expression.input.js

@@ -0,0 +1,7 @@
+import {withRouter} from 'next/router'
+
+export default withRouter(class extends React.Component {
+  render() {
+    const test = this.props.router
+  }
+})

packages/next-codemod/transforms/__testfixtures__/name-default-component/function-expression.output.js

@@ -0,0 +1,3 @@
+export default withAppContainer(withAuth(props => {
+  const test = props.url
+}))