You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/authoring.mdx
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ Which one to use depends on your particular use case.
14
14
## 1. Contribute to the Community Folder
15
15
16
16
The Community Folder is the public directory of codemods hosted and published directly from this repository, [visible here](https://github.com/CodeshiftCommunity/CodeshiftCommunity/tree/main/community).
17
-
This directory can be compared to and treated the same as the Typescript type definition regisistry: [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped).
17
+
This directory can be compared to and treated the same as the Typescript type definition registry: [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped).
18
18
19
19
_Please see the [Contribution guide](contribution) for more information._
20
20
@@ -23,7 +23,7 @@ Use this method if you want:
23
23
- Your codemods to be open source
24
24
- Build tooling, dependency management and project setup to be handled for you
25
25
- The community to help maintain and contribute to your codemods
26
-
- Documentation to be automatically generated and available on the [Regisistry page](registry)
26
+
- Documentation to be automatically generated and available on the [Registry page](registry)
27
27
28
28
Do not use this method if:
29
29
@@ -46,7 +46,7 @@ Use this method if you want:
46
46
47
47
Do not use this method if:
48
48
49
-
- You want docs to be automatically generated and available on the [Regisistry page](registry)
49
+
- You want docs to be automatically generated and available on the [Registry page](registry)
Copy file name to clipboardExpand all lines: website/docs/guides/css-codemods.mdx
+2-5Lines changed: 2 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ slug: /css-codemods
7
7
In some cases, it's possible that you may need to write a codemod that applies changes across different programming languages JS, CSS, etc.
8
8
It could be because the package you're writing a codemod for has an API that spans across both JS and CSS, for example a Design System or CSS-in-JS library. Where some of your consumers may be using the JS interface and some the CSS interface.
9
9
10
-
In this scenario, it's possible to repurpose JSCodeshift to handle this by treating JSCodeshift purely as a "Runner", or in otherwords, as the entrypoint to the files you're looking to modify and substitute a transformation library of your choice.
10
+
In this scenario, it's possible to repurpose JSCodeshift to handle this by treating JSCodeshift purely as a "Runner", or in other words, as the entrypoint to the files you're looking to modify and substitute a transformation library of your choice.
11
11
For example [PostCSS](https://postcss.org/), [Babel](https://babeljs.io/), etc.
12
12
13
13
However, this does come with drawbacks, you will no longer have access to JSCodeshift parsers and transformation API. This guide will explain how to handle these yourself.
Copy file name to clipboardExpand all lines: website/docs/guides/monorepos.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -90,7 +90,7 @@ ie:
90
90
91
91
And show an interactive list for you to search and can choose from.
92
92
93
-
## Publising
93
+
## Publishing
94
94
95
95
The workflow to publishing your codemod enhanced packages should remain completely unchanged.
96
96
However, it's important to verify that your `codeshift.config.js` and codemods are not ignored by npm (via `.npmignore` or similar) so that they are successfully published to the registry.
Copy file name to clipboardExpand all lines: website/docs/guides/prompting-for-human-input.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ Or in other words: **"Insert a comment"**.
13
13
Inserting comments as codemod output is a completely valid thing to do and highlights to maintainers that they need to manually complete the migration.
14
14
When leaving comments, it's helpful to be as descriptive as possible, including all or as much of the context required for the maintainer.
15
15
16
-
Comments are also helpful because when a PR is raised, these prompts can easily be seen in the diff and actioned at the maintainers discression. The key is to make the surface area of your codemod known and let maintainers know where they're needed.
16
+
Comments are also helpful because when a PR is raised, these prompts can easily be seen in the diff and actioned at the maintainers discretion. The key is to make the surface area of your codemod known and let maintainers know where they're needed.
Copy file name to clipboardExpand all lines: website/docs/guides/understanding-asts.mdx
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ Before writing your first codemod, it’s important to first have a good concept
14
14
15
15
Abstract Syntax Trees can be thought of as simply the object representation of your code after being parsed.
16
16
You might already be familiar with the tools and libraries that do this, for example [babeljs](https://babeljs.io/), [recast](https://github.com/benjamn/recast), [eslint](https://eslint.org/) etc.
17
-
These tools parse files into ASTs in preperaton for some work, which generally consists of breaking a raw file down into "Nodes" which are then organized and categorized into a hierarchial format that can be reasoned about, manipulated and output back into a file.
17
+
These tools parse files into ASTs in preparation for some work, which generally consists of breaking a raw file down into "Nodes" which are then organized and categorized into a hierarchial format that can be reasoned about, manipulated and output back into a file.
18
18
19
19

20
20
@@ -28,7 +28,7 @@ For instance, consider this snippet:
28
28
console.log('Hello, World');
29
29
```
30
30
31
-
The way you might catagorise the anatomy of this expression in your mind is probably not too dissimilar to how it's actually done in [recast](https://github.com/benjamn/recast) (which is what is used in this project).
31
+
The way you might categorise the anatomy of this expression in your mind is probably not too dissimilar to how it's actually done in [recast](https://github.com/benjamn/recast) (which is what is used in this project).
32
32
So now compare it to the actual resulting AST, generated by recast.
33
33
34
34
```js
@@ -76,7 +76,7 @@ Every [Node](/docs/glossary#node) in this tree is given a "type", these types ar
76
76
77
77
So for example, if you want to know the arguments this method contains, you could first look at the `arguments` property on the `ExpressionStatement`.
78
78
Arguments in functions can be conceptually thought of as arrays, so it's no surprise that we're presented with an array here.
79
-
Now we can see that in our array we have one element, which is of the type `StringLiteral` and has it's own meta data attached to it containing the value we're looking for: `Hello, World` – Hooray 🎉.
79
+
Now we can see that in our array we have one element, which is of the type `StringLiteral` and has its own metadata attached to it containing the value we're looking for: `Hello, World` – Hooray 🎉.
80
80
81
81
Great but where do we go from here? Well it totally depends on what you're trying to achieve.
82
82
If you want to replace the message that's logged, all you'd have to do is replace the `StringLiteral` node with one containing the appropriate message.
@@ -94,7 +94,7 @@ How can one make sense of it all? Well luckily there are indispensable tools out
94
94

95
95
96
96
It provides a real-time representation of your code as an AST which is inspectable and lets you write and test transforms against it live in the browser.
97
-
It also supports other ASTs like babel, typescript etc. so for our usecase we'll need to configure it a bit to support recast + jscodeshift.
97
+
It also supports other ASTs like babel, typescript etc. so for our use-case we'll need to configure it a bit to support recast + jscodeshift.
If you prefer a more declarative approach, you can provide a second argument to `find` describing the expected shape of the node you are looking for.
51
51
52
52
```ts
53
-
const imports =source
54
-
.find(j.ImportDeclaration, { source: { value: 'my-module' } }) // Find all import declarations that match this shape
53
+
const imports =source.find(j.ImportDeclaration, {
54
+
source: { value: 'my-module' },
55
+
}); // Find all import declarations that match this shape
55
56
```
56
57
57
58
This behaves like a fuzzy searcher: The more details provided the more narrow the search is.
58
59
59
60
## Modify & Insert
60
61
61
62
Now let's say that we want to pull in a new import from 'my-module' called `baz`. Luckily you've already written a majority of the code above.
62
-
All we'll need to do now is "insert" an new ImportSpecifier into the ImportDeclaration node that we've just retrieved.
63
+
All we'll need to do now is "insert" an new `ImportSpecifier` into the `ImportDeclaration` node that we've just retrieved.
63
64
64
65
Now inserting can look a little awkward at first, because what we're really doing is building a new node based on what we've found and replacing it with a modified version of itself.
65
66
@@ -92,7 +93,7 @@ Now there are a few moving pieces in this example, let's step through them:
92
93
93
94
(1) Here we "build" a new node of type `ImportSpecifier`.
94
95
95
-
You can build a node by using the camelCase variant methos of a node type.
96
+
You can build a node by using the camelCase variant method of its node type.
96
97
So to build an `ImportSpecifier` you use `j.importSpecifier(...)` and when you want to search for one, you use the CapitalCase variant `j.ImportSpecifier`.
97
98
98
99
(2) Create a new import declaration
@@ -106,7 +107,7 @@ Here we push our new import specifier into the array of existing specifiers.
106
107
107
108
(4) Replace the node
108
109
109
-
Finally we replace our ImportDeclaration with our new one and the resulting output should look like this:
110
+
Finally we replace our `ImportDeclaration` with our new one and the resulting output should look like this:
Copy file name to clipboardExpand all lines: website/docs/guiding-principles.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ In these cases we recommend that you are aware of [when not to codemod](/docs/wh
30
30
## Codemods should do as much as can be safely done automatically or prompt for human intervention
31
31
32
32
Writing a codemod to completely migrate a package from one working state to another is not always feasible. Some edge cases might simply be too hard to support.
33
-
When this is the case, bailing out and pompting for human intervention should be your first fallback.
33
+
When this is the case, bailing out and prompting for human intervention should be your first fallback.
34
34
This gives consumers a chance to review the changes of the codemod, read the prompts containing context about the changes they need to action and make the remaining manual steps as painless and straight forward as possible.
35
35
36
36
For more information, please see the [Prompting for human input](/docs/prompting-for-human-input) guide.
Copy file name to clipboardExpand all lines: website/docs/introduction.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -57,12 +57,12 @@ By consolidating codemods in the same way, the ecosystem can benefit from:
57
57
Ultimately, with the wider JS community collaborating to produce high quality versioned codemods, our goal is to achieve solid coverage over common js dependencies (ie react, jest, chalk, etc), in a similar way to how quality type definitions are created and shared within the DefinitelyTyped community.
58
58
59
59
CodeshiftCommunity provides a similar registry that hosts and automatically publishes codemods for you under the [/community directory](https://github.com/CodeshiftCommunity/CodeshiftCommunity/tree/main/community).
60
-
The community directory organizes codemods by package name and version. They are then published to npm as modules that can be retrospectivally patched or improved.
60
+
The community directory organizes codemods by package name and version. They are then published to npm as modules that can be retrospectively patched or improved.
61
61
This ensures that users running codemods are always getting the latest and greatest version of your codemod.
62
62
63
63
### Rich documentation
64
64
65
-
CodeshiftCommunity is a documentation hub first, by provding guides, recipes and reference material we aim demystify codemods, which are often seen as "arcane knowledge".
65
+
CodeshiftCommunity is a documentation hub first, by providing guides, recipes and reference material we aim demystify codemods, which are often seen as "arcane knowledge".
66
66
67
67
With the right documentation and guidance in place, it will be significantly easier to normalize codemods and reduce their learning curve.
68
68
We want to remove the stigma that "codemods are hard" or "they take a long time to write" and get everyone into the healthy practice of writing them.
0 commit comments