Skip to content

Commit 2295749

Browse files
mnoconGrabowskiM
authored andcommitted
Readme suggestions (#35)
* Readme suggestions * Apply suggestions from code review Co-authored-by: Michał Grabowski <[email protected]> --------- Co-authored-by: Michał Grabowski <[email protected]>
1 parent d4f7454 commit 2295749

File tree

1 file changed

+97
-63
lines changed

1 file changed

+97
-63
lines changed

js/README.md

Lines changed: 97 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
# Get ready to run
2-
```
1+
# JavaScript Transform module
2+
3+
The JavaScript Transform module is a command-line tool you can use to automatically refactor your JavaScript code.
4+
5+
# Usage
6+
7+
## Install dependencies
8+
9+
To install the dependencies, execute the following command:
10+
``` bash
311
yarn --cwd ./vendor/ibexa/rector/js install
412
```
5-
`--cwd` argument should point to directory where JS transform module is installed (for example `./vendor/ibexa/rector/js`). This installs node_modules inside vendor bundle.
13+
`--cwd` argument must point to the directory where the transform module is installed, by default `./vendor/ibexa/rector/js`.
614

7-
# How to run
8-
```
15+
# Running transformations
16+
17+
``` bash
918
yarn --cwd ./vendor/ibexa/rector/js transform
1019
```
11-
`--cwd` argument should point to directory where JS transform module is installed (for example `./vendor/ibexa/rector/js`).
20+
`--cwd` argument must point to the directory where the transform module is installed, by default `./vendor/ibexa/rector/js`.
1221

13-
## Configuration file
14-
If you need to modify default config, plugins or configuration for rules, use `rector.config.js` from main directory of bundle.
15-
```
22+
## Configuration
23+
24+
To adjust the default configuration, plugins, or rules, modify the `rector.config.js` file present in your project or bundle directory:
25+
26+
``` js
1627
module.exports = {
1728
config: {
1829
paths: [{
@@ -34,21 +45,27 @@ module.exports = {
3445
};
3546
```
3647

37-
### config
48+
### Configuration options
3849

39-
#### paths
40-
Array of objects with input and output directories for transformed files. By default it's relative to main bundle root. While transforming, structure of directories is maintained.
50+
#### `paths`
4151

42-
#### prettierConfigPath
43-
Optional. At the end of transform there's mandatory prettier execution, which by default is taken from package https://github.com/ibexa/eslint-config-ibexa/blob/main/prettier.js
52+
Array of objects with input and output directories for transformed files, relative to your project or bundle root.
53+
Directory structure is not modified during the transformation.
4454

45-
### plugins
46-
Allows to modify enabled plugins (more about plugin below).
55+
#### `prettierConfigPath`
4756

48-
### pluginsConfig
49-
Allows to modify config for plugins.
50-
Example config:
51-
```
57+
[Prettier](https://prettier.io/) is run at the end of the transformation.
58+
You can provide the path to your own configuration file, otherwise [the default file](https://github.com/ibexa/eslint-config-ibexa/blob/main/prettier.js) is used.
59+
60+
### `plugins`
61+
62+
Use it to modify enabled plugins.
63+
To learn more about plugins, see [the list of plugins](#list-of-plugins).
64+
65+
### `pluginsConfig`
66+
67+
Use this setting to modify the plugins configuration, as in the example below:
68+
``` js
5269
{
5370
"ibexa-rename-string-values": {
5471
"ez-form-error": "ibexa-form-error",
@@ -67,25 +84,29 @@ Example config:
6784
}
6885
}
6986
```
70-
Plugin config is kept as object with key being plugin name (`ibexa-rename-string-values` in example).
7187

72-
Property key inside this object is string that is supposed to be changed, can be either standard string or regex (`(^|\\s)\\.ez-`, `ezform-error"` in example)
88+
The plugin configuration is an object with plugin names as keys, for example `ibexa-rename-string-values`.
89+
Inside a single plugin configuration, the property names are values that should be replaced.
90+
They can be specified explicitly (`ezform-error`) or by using regexp (`(^|\\s)\\.ez-`).
7391

7492
#### Shorthand expression
7593

76-
`"ez-form-error": "ibexa-form-error"` - change all `ez-form-error` occurences to `ibexa-form-error`
94+
You can use a shorthand form to specify the configuration:
7795

78-
#### Full object config properties
96+
- `"ez-form-error": "ibexa-form-error"` - changes all `ez-form-error` occurrences to `ibexa-form-error`
7997

80-
`"to": "ibexa-selection-settings"` - what string should be replaced with
98+
#### Complete plugin configuration
8199

82-
`"regexp": true/false` - should config use regexp to match original value
100+
When not using the shorthand configuration, the following options are available:
83101

84-
`"exactMatch": true` - should match only full values, using example config, this won't change `ez-selection-settings__field` as `ez-selection-settings` is not exact match.
102+
- `"to": "ibexa-selection-settings"` - specifies the new value
103+
- `"regexp": true/false` - use regexp to find the matching values. Use capture groups to reuse parts of the original value in the new value
104+
- `"exactMatch": true` - replace matching values only when the whole value is matched. Using the example configuration, `ez-selection-settings__field` would not be replaced as it doesn't match `ez-selection-settings` exactly
85105

86106
#### Special "shared" property
87-
Except named plugins config, there is also possibility to create config for all plugins - its rules are later overwritten by specific plugin config if there is intersection in rules names.
88-
```
107+
108+
You can create a shared configuration for all plugins by using the `shared` keyword, as in the example below:
109+
``` js
89110
"shared": {
90111
"ez": {
91112
"to": "ibexa",
@@ -94,21 +115,26 @@ Except named plugins config, there is also possibility to create config for all
94115
}
95116
```
96117

97-
## Default plugins
118+
Values specifies in the `shared` configuration can be overwritten using configuration for specific plugins.
119+
120+
## List of plugins
121+
98122
### Rename eZ global variables
123+
99124
This plugin changes all `eZ` variables to `ibexa`.
100125

101-
**Plugin name in config:** `./ibexa-rename-ez-global.js`
126+
**Name:** `ibexa-rename-ez-global`
102127

103-
**Example config:** none
128+
**Configuration:** none
104129

105130
### Rename variables
106-
This plugin allows to change any variable to any other value.
131+
This plugin allows to rename any variable.
107132

108-
**Plugin name in config:** `./ibexa-rename-variables.js`
133+
**Name:** `ibexa-rename-variables`
109134

110-
**Example config:**
111-
```
135+
**Configuration example:**
136+
137+
``` js
112138
{
113139
"^Ez(.*?)Validator$": {
114140
"to": "Ibexa$1Validator",
@@ -121,18 +147,20 @@ This plugin allows to change any variable to any other value.
121147
}
122148
```
123149

124-
**Example output:**
125-
126-
`class EzBooleanValidator extends eZ.BaseFieldValidator` => `class IbexaBooleanValidator extends ibexa.BaseFieldValidator`
150+
**Example:**
127151

128-
`const EZ_INPUT_SELECTOR = 'ezselection-settings__input';` => `const IBEXA_INPUT_SELECTOR = 'ezselection-settings__input';`
152+
| Before | After |
153+
|---|---|
154+
| `class EzBooleanValidator extends eZ.BaseFieldValidator` | `class IbexaBooleanValidator extends ibexa.BaseFieldValidator` |
155+
| `const EZ_INPUT_SELECTOR = 'ezselection-settings__input';` | `const IBEXA_INPUT_SELECTOR = 'ezselection-settings__input';` |
129156

130157
### Rename string values
131-
This plugin allows to change any string value - except translations. Can be used to transform selectors etc.
132158

133-
**Plugin name in config:** `./ibexa-rename-string-values.js`
159+
This plugin changes any string value - except translations. You can use it to transform selectors and other values.
134160

135-
**Example config:**
161+
**Name:** `ibexa-rename-string-values`
162+
163+
**Configuration example:**
136164
```
137165
{
138166
"(^|\\s)\\.ez-": {
@@ -149,17 +177,19 @@ This plugin allows to change any string value - except translations. Can be used
149177

150178
**Example output:**
151179

152-
`const SELECTOR_FIELD = '.ez-field-edit--ezboolean';` => `const SELECTOR_FIELD = ".ibexa-field-edit--ezboolean"`
153-
154-
`const SELECTOR_FIELD = '.ibexa-field-edit--ezboolean';` => `const SELECTOR_FIELD = '.ibexa-field-edit--ibexaboolean';`
180+
| Before | After |
181+
|---|---|
182+
| `const SELECTOR_FIELD = '.ez-field-edit--ezboolean';` | `const SELECTOR_FIELD = '.ibexa-field-edit--ezboolean'` |
183+
| `const SELECTOR_FIELD = '.ibexa-field-edit--ezboolean';` | `const SELECTOR_FIELD = '.ibexa-field-edit--ibexaboolean';` |
155184

156185
### Rename translation IDs
157-
This plugin allows to change translation ids. Remember to extract translations afterwards!
186+
This plugin allows to change translation ids.
187+
Extract translations after running this transformation.
158188

159-
**Plugin name in config:** `./ibexa-rename-trans-id.js`
189+
**Name:** `ibexa-rename-trans-id`
160190

161-
**Example config:**
162-
```
191+
**Configuration example:**
192+
``` js
163193
{
164194
"^ez": {
165195
"to": "ibexa",
@@ -170,30 +200,34 @@ This plugin allows to change translation ids. Remember to extract translations a
170200

171201
**Example output:**
172202

173-
`'ez_boolean.limitation.pick.ez_error'` => `'ibexa_boolean.limitation.pick.ez_error'`
203+
| Before | After |
204+
|---|---|
205+
|`'ez_boolean.limitation.pick.ez_error'` | `'ibexa_boolean.limitation.pick.ez_error'` |
174206

175207
### Rename translation strings
176-
This plugin allows to change translations. Remember to extract translations afterwards!
208+
This plugin changes values in translations.
209+
Extract translations after running this transformation.
177210

178-
**Plugin name in config:** `./ibexa-rename-in-translations.js`
211+
**Name:** `ibexa-rename-in-translations`
179212

180-
**Example config:**
181-
```
213+
**Configuration example:**
214+
215+
``` js
182216
{
183217
"to": "ibexa-not-$1--show-modal",
184218
"regexp": true,
185219
"selectors-only": true
186220
}
187221
```
188222

189-
**selectors-only config:**
190-
191-
If this property is set to `true`, this plugin changes only strings inside html tags (like classes and other html parameters). Set to `false` or remove property to change also normal strings as well.
223+
**`selectors-only`:**
192224

193-
**Example output with selectors-only=true:**
225+
If this property is set to `true`, this plugin changes only strings inside HTML tags.
226+
Set to `false` or remove property to change text values as well.
194227

195-
`/*@Desc("<p class='ez-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/` => `/*@Desc("<p class='ibexa-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/`
196-
197-
**Example output with selectors-only=false:**
228+
**Example output:**
198229

199-
`/*@Desc("<p class='ez-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/` => `/*@Desc("<p class='ibexa-not-error--show-modal'>Show message</p> for ibexa-not-error--show-modal")*/`
230+
| `selectors-only` value | Before | After |
231+
|---|---|---|
232+
| true | `/*@Desc("<p class='ez-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/` | `/*@Desc("<p class='ibexa-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/` |
233+
| false | `/*@Desc("<p class='ez-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/` | `/*@Desc("<p class='ibexa-not-error--show-modal'>Show message</p> for ibexa-not-error--show-modal")*/` |

0 commit comments

Comments
 (0)