@react-spectrum/codemods 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +12 -10
- package/dist/s1-to-s2/src/codemods/codemod.js +33 -17
- package/dist/s1-to-s2/src/codemods/components/ActionGroup/transform.js +34 -11
- package/dist/s1-to-s2/src/codemods/components/Avatar/transform.js +5 -1
- package/dist/s1-to-s2/src/codemods/components/ContextualHelpTrigger/transform.js +1 -1
- package/dist/s1-to-s2/src/codemods/components/DialogContainer/transform.js +3 -4
- package/dist/s1-to-s2/src/codemods/components/DialogTrigger/transform.js +33 -11
- package/dist/s1-to-s2/src/codemods/components/Item/transform.js +28 -7
- package/dist/s1-to-s2/src/codemods/components/Link/transform.js +6 -4
- package/dist/s1-to-s2/src/codemods/components/Row/transform.js +12 -5
- package/dist/s1-to-s2/src/codemods/components/Section/transform.js +12 -3
- package/dist/s1-to-s2/src/codemods/components/TableView/transform.js +36 -19
- package/dist/s1-to-s2/src/codemods/components/Tabs/transform.js +25 -9
- package/dist/s1-to-s2/src/codemods/icons/iconMap.js +319 -1276
- package/dist/s1-to-s2/src/codemods/shared/dimensions.js +5 -32
- package/dist/s1-to-s2/src/codemods/shared/styleProps.js +55 -19
- package/dist/s1-to-s2/src/codemods/shared/transforms.js +130 -67
- package/dist/s1-to-s2/src/codemods/shared/unsafeStyle.js +102 -48
- package/dist/s1-to-s2/src/codemods/shared/utils.js +31 -28
- package/dist/s1-to-s2/src/getComponents.js +8 -8
- package/dist/s1-to-s2/src/index.js +10 -6
- package/dist/s1-to-s2/src/utils/installPackage.js +5 -1
- package/dist/s1-to-s2/src/utils/waitForKeypress.js +1 -1
- package/dist/test-utils-rc-update/src/codemod.js +236 -0
- package/dist/test-utils-rc-update/src/index.js +13 -0
- package/dist/use-monopackages/src/codemod.js +25 -27
- package/dist/use-subpaths/src/codemod.js +11 -5
- package/dist/use-subpaths/src/specifiers.js +3 -1
- package/package.json +24 -22
package/dist/index.js
CHANGED
|
@@ -3,32 +3,34 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
const { parseArgs } = require('node:util');
|
|
5
5
|
const src_1 = require("./s1-to-s2/src");
|
|
6
|
-
const src_2 = require("./
|
|
7
|
-
const src_3 = require("./use-
|
|
6
|
+
const src_2 = require("./test-utils-rc-update/src");
|
|
7
|
+
const src_3 = require("./use-monopackages/src");
|
|
8
|
+
const src_4 = require("./use-subpaths/src");
|
|
8
9
|
const codemods = {
|
|
9
10
|
's1-to-s2': src_1.s1_to_s2,
|
|
10
|
-
'use-monopackages':
|
|
11
|
-
'use-subpaths':
|
|
11
|
+
'use-monopackages': src_3.use_monopackages,
|
|
12
|
+
'use-subpaths': src_4.use_subpaths,
|
|
13
|
+
'test-utils-rc-update': src_2.test_utils_rc_update
|
|
12
14
|
};
|
|
13
15
|
// https://github.com/facebook/jscodeshift?tab=readme-ov-file#usage-cli
|
|
14
16
|
const options = {
|
|
15
|
-
|
|
17
|
+
parser: {
|
|
16
18
|
type: 'string'
|
|
17
19
|
},
|
|
18
20
|
'ignore-pattern': {
|
|
19
21
|
type: 'string'
|
|
20
22
|
},
|
|
21
|
-
|
|
23
|
+
dry: {
|
|
22
24
|
type: 'boolean',
|
|
23
25
|
short: 'd'
|
|
24
26
|
},
|
|
25
|
-
|
|
27
|
+
path: {
|
|
26
28
|
type: 'string'
|
|
27
29
|
},
|
|
28
|
-
|
|
30
|
+
components: {
|
|
29
31
|
type: 'string'
|
|
30
32
|
},
|
|
31
|
-
|
|
33
|
+
agent: {
|
|
32
34
|
type: 'boolean'
|
|
33
35
|
}
|
|
34
36
|
};
|
|
@@ -55,7 +57,7 @@ async function main() {
|
|
|
55
57
|
...values
|
|
56
58
|
}));
|
|
57
59
|
}
|
|
58
|
-
main().catch(
|
|
60
|
+
main().catch(error => {
|
|
59
61
|
console.error(`Error running codemod: ${error}`);
|
|
60
62
|
process.exit(1);
|
|
61
63
|
});
|
|
@@ -130,7 +130,10 @@ function getComponentSelection(components) {
|
|
|
130
130
|
scopedComponents: new Map()
|
|
131
131
|
};
|
|
132
132
|
}
|
|
133
|
-
let explicitComponents = new Set(components
|
|
133
|
+
let explicitComponents = new Set(components
|
|
134
|
+
.split(',')
|
|
135
|
+
.map(s => s.trim())
|
|
136
|
+
.filter(Boolean));
|
|
134
137
|
let expandedComponents = new Set(explicitComponents);
|
|
135
138
|
let scopedComponents = new Map();
|
|
136
139
|
for (let component of explicitComponents) {
|
|
@@ -162,9 +165,9 @@ function shouldTransformElement(componentName, path, selection) {
|
|
|
162
165
|
if (!allowedParents || allowedParents.size === 0) {
|
|
163
166
|
return true;
|
|
164
167
|
}
|
|
165
|
-
return !!path.findParent(
|
|
166
|
-
|
|
167
|
-
|
|
168
|
+
return !!path.findParent(parentPath => t.isJSXElement(parentPath.node) &&
|
|
169
|
+
t.isJSXIdentifier(parentPath.node.openingElement.name) &&
|
|
170
|
+
allowedParents.has((0, utils_1.getName)(path, parentPath.node.openingElement.name)));
|
|
168
171
|
}
|
|
169
172
|
function transformer(file, api, options) {
|
|
170
173
|
let j = api.jscodeshift.withParser({
|
|
@@ -192,7 +195,9 @@ function transformer(file, api, options) {
|
|
|
192
195
|
programPath = path;
|
|
193
196
|
},
|
|
194
197
|
ImportDeclaration(path) {
|
|
195
|
-
if (path.node.source.value === '@adobe/react-spectrum' ||
|
|
198
|
+
if (path.node.source.value === '@adobe/react-spectrum' ||
|
|
199
|
+
(path.node.source.value.startsWith('@react-spectrum/') &&
|
|
200
|
+
path.node.source.value !== '@react-spectrum/s2')) {
|
|
196
201
|
lastImportPath = path;
|
|
197
202
|
for (let specifier of path.node.specifiers) {
|
|
198
203
|
if (specifier.type === 'ImportNamespaceSpecifier') {
|
|
@@ -206,7 +211,8 @@ function transformer(file, api, options) {
|
|
|
206
211
|
if (propName && path.parentPath.parentPath?.parentPath?.isJSXElement()) {
|
|
207
212
|
if (componentsToTransform.has(propName)) {
|
|
208
213
|
importedComponents.set(propName, clonedSpecifier);
|
|
209
|
-
let elementPath = path.parentPath.parentPath
|
|
214
|
+
let elementPath = path.parentPath.parentPath
|
|
215
|
+
.parentPath;
|
|
210
216
|
if (shouldTransformElement(propName, elementPath, selection)) {
|
|
211
217
|
elements.push([propName, elementPath]);
|
|
212
218
|
}
|
|
@@ -240,7 +246,8 @@ function transformer(file, api, options) {
|
|
|
240
246
|
typeof specifier.local.name === 'string' &&
|
|
241
247
|
specifier.imported.type === 'Identifier' &&
|
|
242
248
|
typeof specifier.imported.name === 'string' &&
|
|
243
|
-
(componentsToTransform.has(specifier.imported.name) ||
|
|
249
|
+
(componentsToTransform.has(specifier.imported.name) ||
|
|
250
|
+
v3ComponentsToRename.has(specifier.imported.name))) {
|
|
244
251
|
// e.g. import {Button} from '@adobe/react-spectrum'; or import {ContextualHelpTrigger} from '@adobe/react-spectrum';
|
|
245
252
|
let binding = path.scope.getBinding(specifier.local.name);
|
|
246
253
|
if (binding) {
|
|
@@ -252,7 +259,8 @@ function transformer(file, api, options) {
|
|
|
252
259
|
}
|
|
253
260
|
bindings.push(binding);
|
|
254
261
|
for (let path of binding.referencePaths) {
|
|
255
|
-
if (path.parentPath?.isJSXOpeningElement() &&
|
|
262
|
+
if (path.parentPath?.isJSXOpeningElement() &&
|
|
263
|
+
path.parentPath.parentPath.isJSXElement()) {
|
|
256
264
|
let elementPath = path.parentPath.parentPath;
|
|
257
265
|
if (shouldTransformElement(specifier.imported.name, elementPath, selection)) {
|
|
258
266
|
elements.push([specifier.imported.name, elementPath]);
|
|
@@ -310,8 +318,8 @@ function transformer(file, api, options) {
|
|
|
310
318
|
if (arg.type !== 'StringLiteral') {
|
|
311
319
|
return;
|
|
312
320
|
}
|
|
313
|
-
let isV3ImportSource = arg.value === '@adobe/react-spectrum'
|
|
314
|
-
|
|
321
|
+
let isV3ImportSource = arg.value === '@adobe/react-spectrum' ||
|
|
322
|
+
(arg.value.startsWith('@react-spectrum/') && arg.value !== '@react-spectrum/s2');
|
|
315
323
|
if (!isV3ImportSource) {
|
|
316
324
|
return;
|
|
317
325
|
}
|
|
@@ -419,7 +427,12 @@ function transformer(file, api, options) {
|
|
|
419
427
|
if (importedComponents.size || S2ComponentsToImport.size) {
|
|
420
428
|
// Add imports to existing @react-spectrum/s2 import if it exists, otherwise add a new one.
|
|
421
429
|
let importSpecifiers = new Set([...importedComponents]
|
|
422
|
-
.filter(([c]) => c !== 'Flex' &&
|
|
430
|
+
.filter(([c]) => c !== 'Flex' &&
|
|
431
|
+
c !== 'Grid' &&
|
|
432
|
+
c !== 'View' &&
|
|
433
|
+
c !== 'Item' &&
|
|
434
|
+
c !== 'Section' &&
|
|
435
|
+
c !== 'ActionGroup')
|
|
423
436
|
.map(([, specifier]) => specifier));
|
|
424
437
|
for (let s2Name of S2ComponentsToImport) {
|
|
425
438
|
importSpecifiers.add(t.importSpecifier(t.identifier(s2Name), t.identifier(s2Name)));
|
|
@@ -431,23 +444,26 @@ function transformer(file, api, options) {
|
|
|
431
444
|
let importDecl = existingImport.get();
|
|
432
445
|
let existingSpecifiers = importDecl.value.specifiers;
|
|
433
446
|
// add importSpecifiers to existing import
|
|
434
|
-
importDecl.value.specifiers = [
|
|
447
|
+
importDecl.value.specifiers = [
|
|
448
|
+
...importDecl.value.specifiers,
|
|
449
|
+
...[...importSpecifiers].filter(specifier => {
|
|
435
450
|
if (t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported)) {
|
|
436
451
|
if (specifier.imported.name === 'Item') {
|
|
437
452
|
return false;
|
|
438
453
|
}
|
|
439
454
|
let importedName = specifier.imported.name;
|
|
440
455
|
let localName = specifier.local?.name || importedName;
|
|
441
|
-
return !existingSpecifiers.find((s) => t.isImportSpecifier(s)
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
456
|
+
return !existingSpecifiers.find((s) => t.isImportSpecifier(s) &&
|
|
457
|
+
t.isIdentifier(s.imported) &&
|
|
458
|
+
s.imported.name === importedName &&
|
|
459
|
+
(s.local?.name || s.imported.name) === localName);
|
|
445
460
|
}
|
|
446
461
|
if (t.isImportNamespaceSpecifier(specifier)) {
|
|
447
462
|
return !existingSpecifiers.find((s) => t.isImportNamespaceSpecifier(s) && s.local.name === specifier.local.name);
|
|
448
463
|
}
|
|
449
464
|
return false;
|
|
450
|
-
})
|
|
465
|
+
})
|
|
466
|
+
];
|
|
451
467
|
}
|
|
452
468
|
else {
|
|
453
469
|
if (importSpecifiers.size > 0) {
|
|
@@ -51,15 +51,20 @@ let availableComponents = (0, getComponents_1.getComponents)();
|
|
|
51
51
|
* - Convert dynamic collections render function to items.map.
|
|
52
52
|
*/
|
|
53
53
|
function transformActionGroup(path) {
|
|
54
|
-
let program = path.findParent(
|
|
54
|
+
let program = path.findParent(p => t.isProgram(p.node));
|
|
55
55
|
// Comment out overflowMode
|
|
56
56
|
(0, transforms_1.commentOutProp)(path, { propName: 'overflowMode' });
|
|
57
57
|
// Comment out buttonLabelBehavior
|
|
58
58
|
(0, transforms_1.commentOutProp)(path, { propName: 'buttonLabelBehavior' });
|
|
59
59
|
// Comment out summaryIcon
|
|
60
60
|
(0, transforms_1.commentOutProp)(path, { propName: 'summaryIcon' });
|
|
61
|
-
let selectionModePath = path
|
|
62
|
-
|
|
61
|
+
let selectionModePath = path
|
|
62
|
+
.get('openingElement')
|
|
63
|
+
.get('attributes')
|
|
64
|
+
.find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === 'selectionMode');
|
|
65
|
+
let selectionMode = t.isStringLiteral(selectionModePath?.node.value)
|
|
66
|
+
? selectionModePath.node.value.value
|
|
67
|
+
: 'none';
|
|
63
68
|
let newComponentName, childComponentName;
|
|
64
69
|
if (selectionMode === 'none') {
|
|
65
70
|
// Use ActionButtonGroup if no selection
|
|
@@ -81,25 +86,40 @@ function transformActionGroup(path) {
|
|
|
81
86
|
localChildName = (0, utils_1.addComponentImport)(program, childComponentName);
|
|
82
87
|
}
|
|
83
88
|
// Convert dynamic collection to an array.map.
|
|
84
|
-
let items = path
|
|
89
|
+
let items = path
|
|
90
|
+
.get('openingElement')
|
|
91
|
+
.get('attributes')
|
|
92
|
+
.find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === 'items');
|
|
85
93
|
let itemArg;
|
|
86
|
-
if (items &&
|
|
94
|
+
if (items &&
|
|
95
|
+
t.isJSXExpressionContainer(items.node.value) &&
|
|
96
|
+
t.isExpression(items.node.value.expression)) {
|
|
87
97
|
let child = path.get('children').find(c => c.isJSXExpressionContainer());
|
|
88
98
|
if (child && child.isJSXExpressionContainer() && t.isFunction(child.node.expression)) {
|
|
89
99
|
let arg = child.node.expression.params[0];
|
|
90
100
|
if (t.isIdentifier(arg)) {
|
|
91
101
|
itemArg = arg;
|
|
92
102
|
}
|
|
93
|
-
child.replaceWith(t.jsxExpressionContainer(t.callExpression(t.memberExpression(items.node.value.expression, t.identifier('map')), [
|
|
103
|
+
child.replaceWith(t.jsxExpressionContainer(t.callExpression(t.memberExpression(items.node.value.expression, t.identifier('map')), [
|
|
104
|
+
child.node.expression
|
|
105
|
+
])));
|
|
94
106
|
}
|
|
95
107
|
}
|
|
96
108
|
items?.remove();
|
|
97
|
-
let onAction = path
|
|
109
|
+
let onAction = path
|
|
110
|
+
.get('openingElement')
|
|
111
|
+
.get('attributes')
|
|
112
|
+
.find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === 'onAction');
|
|
98
113
|
// Pull disabledKeys prop out into a variable, converted to a Set.
|
|
99
114
|
// Then we can check it in the isDisabled prop of each item.
|
|
100
|
-
let disabledKeysPath = path
|
|
115
|
+
let disabledKeysPath = path
|
|
116
|
+
.get('openingElement')
|
|
117
|
+
.get('attributes')
|
|
118
|
+
.find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === 'disabledKeys');
|
|
101
119
|
let disabledKeys;
|
|
102
|
-
if (disabledKeysPath &&
|
|
120
|
+
if (disabledKeysPath &&
|
|
121
|
+
t.isJSXExpressionContainer(disabledKeysPath.node.value) &&
|
|
122
|
+
t.isExpression(disabledKeysPath.node.value.expression)) {
|
|
103
123
|
disabledKeys = path.scope.generateUidIdentifier('disabledKeys');
|
|
104
124
|
path.scope.push({
|
|
105
125
|
id: disabledKeys,
|
|
@@ -110,7 +130,8 @@ function transformActionGroup(path) {
|
|
|
110
130
|
}
|
|
111
131
|
path.traverse({
|
|
112
132
|
JSXElement(child) {
|
|
113
|
-
if (t.isJSXIdentifier(child.node.openingElement.name) &&
|
|
133
|
+
if (t.isJSXIdentifier(child.node.openingElement.name) &&
|
|
134
|
+
child.node.openingElement.name.name === 'Item') {
|
|
114
135
|
// Replace Item with ActionButton or ToggleButton.
|
|
115
136
|
let childNode = t.cloneNode(child.node);
|
|
116
137
|
childNode.openingElement.name = t.jsxIdentifier(localChildName);
|
|
@@ -142,7 +163,9 @@ function transformActionGroup(path) {
|
|
|
142
163
|
keyValue = key.value;
|
|
143
164
|
}
|
|
144
165
|
// Add an onPress to each item that calls the previous onAction, passing in the key.
|
|
145
|
-
if (onAction &&
|
|
166
|
+
if (onAction &&
|
|
167
|
+
t.isJSXExpressionContainer(onAction.node.value) &&
|
|
168
|
+
t.isExpression(onAction.node.value.expression)) {
|
|
146
169
|
childNode.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('onPress'), t.jsxExpressionContainer(keyValue
|
|
147
170
|
? t.arrowFunctionExpression([], t.callExpression(onAction.node.value.expression, [keyValue]))
|
|
148
171
|
: onAction.node.value.expression)));
|
|
@@ -41,7 +41,10 @@ function updateAvatarSize(path) {
|
|
|
41
41
|
if (t.isJSXElement(path.node) &&
|
|
42
42
|
t.isJSXIdentifier(path.node.openingElement.name) &&
|
|
43
43
|
(0, utils_1.getName)(path, path.node.openingElement.name) === 'Avatar') {
|
|
44
|
-
let sizeAttrPath = path
|
|
44
|
+
let sizeAttrPath = path
|
|
45
|
+
.get('openingElement')
|
|
46
|
+
.get('attributes')
|
|
47
|
+
.find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === 'size');
|
|
45
48
|
if (sizeAttrPath) {
|
|
46
49
|
let value = sizeAttrPath.node.value;
|
|
47
50
|
if (value?.type === 'StringLiteral') {
|
|
@@ -66,6 +69,7 @@ function updateAvatarSize(path) {
|
|
|
66
69
|
}
|
|
67
70
|
/**
|
|
68
71
|
* Transforms Avatar:
|
|
72
|
+
*
|
|
69
73
|
* - Comment out isDisabled (it has not been implemented yet).
|
|
70
74
|
* - Update size to be a pixel value if it currently matches 'avatar-size-*'.
|
|
71
75
|
*/
|
|
@@ -44,7 +44,7 @@ let availableComponents = (0, getComponents_1.getComponents)();
|
|
|
44
44
|
* - Replace the old Dialog with ContextualHelpPopover.
|
|
45
45
|
*/
|
|
46
46
|
function transformContextualHelpTrigger(path) {
|
|
47
|
-
let program = path.findParent(
|
|
47
|
+
let program = path.findParent(p => t.isProgram(p.node));
|
|
48
48
|
let localName = (0, utils_1.addComponentImport)(program, 'UnavailableMenuItemTrigger');
|
|
49
49
|
// replace ContextualHelpTrigger with UnavailableMenuItemTrigger
|
|
50
50
|
path.node.openingElement.name = t.jsxIdentifier(localName);
|
|
@@ -4,10 +4,9 @@ exports.default = transformDialogContainer;
|
|
|
4
4
|
const transform_1 = require("../DialogTrigger/transform");
|
|
5
5
|
const transforms_1 = require("../../shared/transforms");
|
|
6
6
|
/**
|
|
7
|
-
* Transforms DialogContainer:
|
|
8
|
-
* -
|
|
9
|
-
* - Move
|
|
10
|
-
* - Move isKeyboardDismissDisabled to the dialog level component.
|
|
7
|
+
* Transforms DialogContainer: - Remove type (dependent on the dialog level child used, e.g.,
|
|
8
|
+
* Dialog, FullscreenDialog, Popover). - Move isDismissable (as isDismissible) to the dialog level
|
|
9
|
+
* component. - Move isKeyboardDismissDisabled to the dialog level component.
|
|
11
10
|
*/
|
|
12
11
|
function transformDialogContainer(path) {
|
|
13
12
|
// Move isDismissable (as isDismissible) to the dialog level component
|
|
@@ -44,13 +44,18 @@ let availableComponents = (0, getComponents_1.getComponents)();
|
|
|
44
44
|
* Updates DialogTrigger and DialogContainer to the new API.
|
|
45
45
|
*
|
|
46
46
|
* Example:
|
|
47
|
+
*
|
|
47
48
|
* - When `type="popover"`, replaces Dialog with `<Popover>`.
|
|
48
49
|
* - When `type="fullscreen"`, replaces Dialog with `<FullscreenDialog>`.
|
|
49
|
-
* - When `type="fullscreenTakeover"`, replaces Dialog with `<FullscreenDialog
|
|
50
|
+
* - When `type="fullscreenTakeover"`, replaces Dialog with `<FullscreenDialog
|
|
51
|
+
* variant="fullscreenTakeover">`.
|
|
50
52
|
*/
|
|
51
53
|
function updateDialogChild(path) {
|
|
52
|
-
let program = path.findParent(
|
|
53
|
-
let typePath = path
|
|
54
|
+
let program = path.findParent(p => t.isProgram(p.node));
|
|
55
|
+
let typePath = path
|
|
56
|
+
.get('openingElement')
|
|
57
|
+
.get('attributes')
|
|
58
|
+
.find(attr => t.isJSXAttribute(attr.node) && attr.node.name.name === 'type');
|
|
54
59
|
let type = typePath?.node.value?.type === 'StringLiteral' ? typePath.node.value?.value : 'modal';
|
|
55
60
|
let newComponentName = 'Dialog';
|
|
56
61
|
let props = [];
|
|
@@ -63,8 +68,21 @@ function updateDialogChild(path) {
|
|
|
63
68
|
props.push(t.jsxAttribute(t.jsxIdentifier('variant'), t.stringLiteral(type)));
|
|
64
69
|
}
|
|
65
70
|
}
|
|
66
|
-
for (let prop of [
|
|
67
|
-
|
|
71
|
+
for (let prop of [
|
|
72
|
+
'isDismissible',
|
|
73
|
+
'mobileType',
|
|
74
|
+
'hideArrow',
|
|
75
|
+
'placement',
|
|
76
|
+
'shouldFlip',
|
|
77
|
+
'isKeyboardDismissDisabled',
|
|
78
|
+
'containerPadding',
|
|
79
|
+
'offset',
|
|
80
|
+
'crossOffset'
|
|
81
|
+
]) {
|
|
82
|
+
let attr = path
|
|
83
|
+
.get('openingElement')
|
|
84
|
+
.get('attributes')
|
|
85
|
+
.find(attr => attr.isJSXAttribute() && attr.node.name.name === prop);
|
|
68
86
|
if (attr) {
|
|
69
87
|
props.push(attr.node);
|
|
70
88
|
attr.remove();
|
|
@@ -77,7 +95,8 @@ function updateDialogChild(path) {
|
|
|
77
95
|
}
|
|
78
96
|
path.traverse({
|
|
79
97
|
JSXElement(dialog) {
|
|
80
|
-
if (!t.isJSXIdentifier(dialog.node.openingElement.name) ||
|
|
98
|
+
if (!t.isJSXIdentifier(dialog.node.openingElement.name) ||
|
|
99
|
+
(0, utils_1.getName)(dialog, dialog.node.openingElement.name) !== 'Dialog') {
|
|
81
100
|
return;
|
|
82
101
|
}
|
|
83
102
|
dialog.node.openingElement.name = t.jsxIdentifier(localName);
|
|
@@ -89,12 +108,15 @@ function updateDialogChild(path) {
|
|
|
89
108
|
});
|
|
90
109
|
path.traverse({
|
|
91
110
|
JSXElement(childPath) {
|
|
92
|
-
if (t.isJSXIdentifier(childPath.node.openingElement.name)
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
111
|
+
if (t.isJSXIdentifier(childPath.node.openingElement.name) &&
|
|
112
|
+
(0, utils_1.getName)(childPath, childPath.node.openingElement.name) ===
|
|
113
|
+
'Divider' &&
|
|
114
|
+
t.isJSXElement(childPath.parentPath.node) &&
|
|
115
|
+
t.isJSXIdentifier(childPath.parentPath.node.openingElement.name)) {
|
|
96
116
|
let parentName = (0, utils_1.getName)(childPath, childPath.parentPath.node.openingElement.name);
|
|
97
|
-
if (parentName === 'Dialog' ||
|
|
117
|
+
if (parentName === 'Dialog' ||
|
|
118
|
+
parentName === 'Popover' ||
|
|
119
|
+
parentName === 'FullscreenDialog') {
|
|
98
120
|
childPath.remove();
|
|
99
121
|
}
|
|
100
122
|
}
|
|
@@ -15,14 +15,35 @@ const transforms_1 = require("../../shared/transforms");
|
|
|
15
15
|
*/
|
|
16
16
|
function transformItem(path) {
|
|
17
17
|
// Update Items based on parent collection component
|
|
18
|
-
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
19
|
+
parentComponentName: 'Menu',
|
|
20
|
+
newComponentName: 'MenuItem'
|
|
21
|
+
});
|
|
22
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
23
|
+
parentComponentName: 'ActionMenu',
|
|
24
|
+
newComponentName: 'MenuItem'
|
|
25
|
+
});
|
|
26
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
27
|
+
parentComponentName: 'ContextualHelpTrigger',
|
|
28
|
+
newComponentName: 'MenuItem'
|
|
29
|
+
});
|
|
21
30
|
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'TagGroup', newComponentName: 'Tag' });
|
|
22
|
-
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
31
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
32
|
+
parentComponentName: 'Breadcrumbs',
|
|
33
|
+
newComponentName: 'Breadcrumb'
|
|
34
|
+
});
|
|
35
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
36
|
+
parentComponentName: 'Picker',
|
|
37
|
+
newComponentName: 'PickerItem'
|
|
38
|
+
});
|
|
39
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
40
|
+
parentComponentName: 'ComboBox',
|
|
41
|
+
newComponentName: 'ComboBoxItem'
|
|
42
|
+
});
|
|
43
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
44
|
+
parentComponentName: 'ListView',
|
|
45
|
+
newComponentName: 'ListViewItem'
|
|
46
|
+
});
|
|
26
47
|
// Comment if parent collection not detected
|
|
27
48
|
(0, transforms_1.commentIfParentCollectionNotDetected)(path);
|
|
28
49
|
}
|
|
@@ -41,18 +41,19 @@ const transforms_1 = require("../../shared/transforms");
|
|
|
41
41
|
* If <a> was used inside Link (legacy API), remove the <a> and apply props directly to Link.
|
|
42
42
|
*/
|
|
43
43
|
function updateLegacyLink(path) {
|
|
44
|
-
let missingOuterHref = t.isJSXElement(path.node) &&
|
|
44
|
+
let missingOuterHref = t.isJSXElement(path.node) &&
|
|
45
|
+
!path.node.openingElement.attributes.some(attr => t.isJSXAttribute(attr) && attr.name.name === 'href');
|
|
45
46
|
if (missingOuterHref) {
|
|
46
|
-
let innerLink = path.node.children.find(
|
|
47
|
+
let innerLink = path.node.children.find(child => t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name));
|
|
47
48
|
if (innerLink && t.isJSXElement(innerLink)) {
|
|
48
49
|
let innerAttributes = innerLink.openingElement.attributes;
|
|
49
50
|
let outerAttributes = path.node.openingElement.attributes;
|
|
50
|
-
innerAttributes.forEach(
|
|
51
|
+
innerAttributes.forEach(attr => {
|
|
51
52
|
outerAttributes.push(attr);
|
|
52
53
|
});
|
|
53
54
|
if (t.isJSXIdentifier(innerLink.openingElement.name) &&
|
|
54
55
|
innerLink.openingElement.name.name !== 'a') {
|
|
55
|
-
(0, utils_1.addComment)(path.node,
|
|
56
|
+
(0, utils_1.addComment)(path.node, " TODO(S2-upgrade): You may have been using a custom link component here. You'll need to update this manually.");
|
|
56
57
|
}
|
|
57
58
|
path.node.children = innerLink.children;
|
|
58
59
|
}
|
|
@@ -60,6 +61,7 @@ function updateLegacyLink(path) {
|
|
|
60
61
|
}
|
|
61
62
|
/**
|
|
62
63
|
* Transforms Link:
|
|
64
|
+
*
|
|
63
65
|
* - Change variant="overBackground" to staticColor="white".
|
|
64
66
|
* - If <a> was used inside Link (legacy API), remove the <a> and apply props directly to Link.
|
|
65
67
|
*/
|
|
@@ -42,12 +42,16 @@ const transforms_1 = require("../../shared/transforms");
|
|
|
42
42
|
*/
|
|
43
43
|
function updateRowFunctionArg(path) {
|
|
44
44
|
// Find the export function passed as a child
|
|
45
|
-
let functionChild = path
|
|
45
|
+
let functionChild = path
|
|
46
|
+
.get('children')
|
|
47
|
+
.find(childPath => childPath.isJSXExpressionContainer() &&
|
|
46
48
|
childPath.get('expression').isArrowFunctionExpression());
|
|
47
|
-
let tablePath = path.findParent(
|
|
49
|
+
let tablePath = path.findParent(p => t.isJSXElement(p.node) &&
|
|
48
50
|
t.isJSXIdentifier(p.node.openingElement.name) &&
|
|
49
51
|
(0, utils_1.getName)(path, p.node.openingElement.name) === 'TableView');
|
|
50
|
-
let tableHeaderPath = tablePath
|
|
52
|
+
let tableHeaderPath = tablePath
|
|
53
|
+
?.get('children')
|
|
54
|
+
.find(child => t.isJSXElement(child.node) &&
|
|
51
55
|
t.isJSXIdentifier(child.node.openingElement.name) &&
|
|
52
56
|
(0, utils_1.getName)(child, child.node.openingElement.name) === 'TableHeader');
|
|
53
57
|
function findColumnKeyProp(path) {
|
|
@@ -57,9 +61,12 @@ function updateRowFunctionArg(path) {
|
|
|
57
61
|
if (t.isArrowFunctionExpression(columnPath.parentPath.node) &&
|
|
58
62
|
t.isJSXElement(columnPath.node) &&
|
|
59
63
|
t.isJSXIdentifier(columnPath.node.openingElement.name) &&
|
|
60
|
-
(0, utils_1.getName)(columnPath, columnPath.node.openingElement.name) ===
|
|
64
|
+
(0, utils_1.getName)(columnPath, columnPath.node.openingElement.name) ===
|
|
65
|
+
'Column') {
|
|
61
66
|
let openingElement = columnPath.get('openingElement');
|
|
62
|
-
let keyPropPath = openingElement
|
|
67
|
+
let keyPropPath = openingElement
|
|
68
|
+
.get('attributes')
|
|
69
|
+
.find(attr => t.isJSXAttribute(attr.node) &&
|
|
63
70
|
(attr.node.name.name === 'key' || attr.node.name.name === 'id'));
|
|
64
71
|
keyPropPath?.traverse({
|
|
65
72
|
Identifier(innerPath) {
|
|
@@ -10,9 +10,18 @@ const transforms_1 = require("../../shared/transforms");
|
|
|
10
10
|
*/
|
|
11
11
|
function transformSection(path) {
|
|
12
12
|
// Update Sections based on parent collection component
|
|
13
|
-
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
14
|
+
parentComponentName: 'Menu',
|
|
15
|
+
newComponentName: 'MenuSection'
|
|
16
|
+
});
|
|
17
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
18
|
+
parentComponentName: 'Picker',
|
|
19
|
+
newComponentName: 'PickerSection'
|
|
20
|
+
});
|
|
21
|
+
(0, transforms_1.updateComponentWithinCollection)(path, {
|
|
22
|
+
parentComponentName: 'ComboBox',
|
|
23
|
+
newComponentName: 'ComboBoxSection'
|
|
24
|
+
});
|
|
16
25
|
// Move title prop to Header component
|
|
17
26
|
(0, transforms_1.movePropToNewChildComponentName)(path, {
|
|
18
27
|
parentComponentName: 'Menu',
|