Skip to content

Commit 4df4580

Browse files
alanjhughesalanjhughes
committed
rebuild codegen
1 parent f13e55c commit 4df4580

File tree

2 files changed

+252
-269
lines changed

2 files changed

+252
-269
lines changed

‎packages/react-native-codegen/lib/generators/components/GenerateViewConfigJs.js‎

Lines changed: 124 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010

1111
'use strict';
1212

13-
const j = require('jscodeshift');
13+
const core = require('@babel/core');
14+
const t = core.types;
1415

1516
// File path -> contents
1617

@@ -36,6 +37,9 @@ ${componentConfig}
3637
// We use this to add to a set. Need to make sure we aren't importing
3738
// this multiple times.
3839
const UIMANAGER_IMPORT = 'const {UIManager} = require("react-native")';
40+
function expression(input) {
41+
return core.template.expression(input)();
42+
}
3943
function getReactDiffProcessValue(typeAnnotation) {
4044
switch (typeAnnotation.type) {
4145
case 'BooleanTypeAnnotation':
@@ -47,25 +51,29 @@ function getReactDiffProcessValue(typeAnnotation) {
4751
case 'StringEnumTypeAnnotation':
4852
case 'Int32EnumTypeAnnotation':
4953
case 'MixedTypeAnnotation':
50-
return j.literal(true);
54+
return t.booleanLiteral(true);
5155
case 'ReservedPropTypeAnnotation':
5256
switch (typeAnnotation.name) {
5357
case 'ColorPrimitive':
54-
return j.template
55-
.expression`{ process: require('react-native/Libraries/StyleSheet/processColor').default }`;
58+
return expression(
59+
`{ process: require('react-native/Libraries/StyleSheet/processColor').default }`,
60+
);
5661
case 'ImageSourcePrimitive':
57-
return j.template
58-
.expression`{ process: require('react-native/Libraries/Image/resolveAssetSource') }`;
62+
return expression(
63+
`{ process: require('react-native/Libraries/Image/resolveAssetSource') }`,
64+
);
5965
case 'ImageRequestPrimitive':
6066
throw new Error('ImageRequest should not be used in props');
6167
case 'PointPrimitive':
62-
return j.template
63-
.expression`{ diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) }`;
68+
return expression(
69+
`{ diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) }`,
70+
);
6471
case 'EdgeInsetsPrimitive':
65-
return j.template
66-
.expression`{ diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/insetsDiffer')) }`;
72+
return expression(
73+
`{ diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/insetsDiffer')) }`,
74+
);
6775
case 'DimensionPrimitive':
68-
return j.literal(true);
76+
return t.booleanLiteral(true);
6977
default:
7078
typeAnnotation.name;
7179
throw new Error(
@@ -76,20 +84,21 @@ function getReactDiffProcessValue(typeAnnotation) {
7684
if (typeAnnotation.elementType.type === 'ReservedPropTypeAnnotation') {
7785
switch (typeAnnotation.elementType.name) {
7886
case 'ColorPrimitive':
79-
return j.template
80-
.expression`{ process: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) }`;
87+
return expression(
88+
`{ process: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) }`,
89+
);
8190
case 'ImageSourcePrimitive':
8291
case 'PointPrimitive':
8392
case 'EdgeInsetsPrimitive':
8493
case 'DimensionPrimitive':
85-
return j.literal(true);
94+
return t.booleanLiteral(true);
8695
default:
8796
throw new Error(
8897
`Received unknown array native typeAnnotation: "${typeAnnotation.elementType.name}"`,
8998
);
9099
}
91100
}
92-
return j.literal(true);
101+
return t.booleanLiteral(true);
93102
default:
94103
typeAnnotation;
95104
throw new Error(
@@ -117,7 +126,7 @@ ${
117126
: ''
118127
}
119128
120-
export const __INTERNAL_VIEW_CONFIG = VIEW_CONFIG;
129+
export const __INTERNAL_VIEW_CONFIG = %%VIEW_CONFIG%%;
121130
122131
export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
123132
`.trim();
@@ -155,44 +164,45 @@ function getValidAttributesForEvents(events, imports) {
155164
imports.add(
156165
"const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore');",
157166
);
158-
const validAttributes = j.objectExpression(
167+
const validAttributes = t.objectExpression(
159168
events.map(eventType => {
160-
return j.property('init', j.identifier(eventType.name), j.literal(true));
169+
return t.objectProperty(
170+
t.identifier(eventType.name),
171+
t.booleanLiteral(true),
172+
);
161173
}),
162174
);
163-
return j.callExpression(j.identifier('ConditionallyIgnoredEventHandlers'), [
175+
return t.callExpression(t.identifier('ConditionallyIgnoredEventHandlers'), [
164176
validAttributes,
165177
]);
166178
}
167179
function generateBubblingEventInfo(event, nameOveride) {
168-
return j.property(
169-
'init',
170-
j.identifier(normalizeInputEventName(nameOveride || event.name)),
171-
j.objectExpression([
172-
j.property(
173-
'init',
174-
j.identifier('phasedRegistrationNames'),
175-
j.objectExpression([
176-
j.property(
177-
'init',
178-
j.identifier('captured'),
179-
j.literal(`${event.name}Capture`),
180+
return t.objectProperty(
181+
t.identifier(normalizeInputEventName(nameOveride || event.name)),
182+
t.objectExpression([
183+
t.objectProperty(
184+
t.identifier('phasedRegistrationNames'),
185+
t.objectExpression([
186+
t.objectProperty(
187+
t.identifier('captured'),
188+
t.stringLiteral(`${event.name}Capture`),
189+
),
190+
t.objectProperty(
191+
t.identifier('bubbled'),
192+
t.stringLiteral(event.name),
180193
),
181-
j.property('init', j.identifier('bubbled'), j.literal(event.name)),
182194
]),
183195
),
184196
]),
185197
);
186198
}
187199
function generateDirectEventInfo(event, nameOveride) {
188-
return j.property(
189-
'init',
190-
j.identifier(normalizeInputEventName(nameOveride || event.name)),
191-
j.objectExpression([
192-
j.property(
193-
'init',
194-
j.identifier('registrationName'),
195-
j.literal(event.name),
200+
return t.objectProperty(
201+
t.identifier(normalizeInputEventName(nameOveride || event.name)),
202+
t.objectExpression([
203+
t.objectProperty(
204+
t.identifier('registrationName'),
205+
t.stringLiteral(event.name),
196206
),
197207
]),
198208
);
@@ -218,20 +228,15 @@ function buildViewConfig(schema, componentName, component, imports) {
218228
throw new Error('Invalid extended type');
219229
}
220230
});
221-
const validAttributes = j.objectExpression([
231+
const validAttributes = t.objectExpression([
222232
...componentProps.map(schemaProp => {
223-
return j.property(
224-
'init',
225-
j.identifier(schemaProp.name),
233+
return t.objectProperty(
234+
t.identifier(schemaProp.name),
226235
getReactDiffProcessValue(schemaProp.typeAnnotation),
227236
);
228237
}),
229238
...(componentEvents.length > 0
230-
? [
231-
j.spreadProperty(
232-
getValidAttributesForEvents(componentEvents, imports),
233-
),
234-
]
239+
? [t.spreadElement(getValidAttributesForEvents(componentEvents, imports))]
235240
: []),
236241
]);
237242
const bubblingEventNames = component.events
@@ -249,14 +254,6 @@ function buildViewConfig(schema, componentName, component, imports) {
249254
}
250255
return bubblingEvents;
251256
}, []);
252-
const bubblingEvents =
253-
bubblingEventNames.length > 0
254-
? j.property(
255-
'init',
256-
j.identifier('bubblingEventTypes'),
257-
j.objectExpression(bubblingEventNames),
258-
)
259-
: null;
260257
const directEventNames = component.events
261258
.filter(event => event.bubblingType === 'direct')
262259
.reduce((directEvents, event) => {
@@ -272,25 +269,32 @@ function buildViewConfig(schema, componentName, component, imports) {
272269
}
273270
return directEvents;
274271
}, []);
275-
const directEvents =
276-
directEventNames.length > 0
277-
? j.property(
278-
'init',
279-
j.identifier('directEventTypes'),
280-
j.objectExpression(directEventNames),
281-
)
282-
: null;
283272
const properties = [
284-
j.property(
285-
'init',
286-
j.identifier('uiViewClassName'),
287-
j.literal(componentName),
273+
t.objectProperty(
274+
t.identifier('uiViewClassName'),
275+
t.stringLiteral(componentName),
288276
),
289-
bubblingEvents,
290-
directEvents,
291-
j.property('init', j.identifier('validAttributes'), validAttributes),
292-
].filter(Boolean);
293-
return j.objectExpression(properties);
277+
];
278+
if (bubblingEventNames.length > 0) {
279+
properties.push(
280+
t.objectProperty(
281+
t.identifier('bubblingEventTypes'),
282+
t.objectExpression(bubblingEventNames),
283+
),
284+
);
285+
}
286+
if (directEventNames.length > 0) {
287+
properties.push(
288+
t.objectProperty(
289+
t.identifier('directEventTypes'),
290+
t.objectExpression(directEventNames),
291+
),
292+
);
293+
}
294+
properties.push(
295+
t.objectProperty(t.identifier('validAttributes'), validAttributes),
296+
);
297+
return t.objectExpression(properties);
294298
}
295299
function buildCommands(schema, componentName, component, imports) {
296300
const commands = component.commands;
@@ -300,39 +304,29 @@ function buildCommands(schema, componentName, component, imports) {
300304
imports.add(
301305
'const {dispatchCommand} = require("react-native/Libraries/ReactNative/RendererProxy");',
302306
);
303-
const properties = commands.map(command => {
304-
const commandName = command.name;
305-
const params = command.typeAnnotation.params;
306-
const commandNameLiteral = j.literal(commandName);
307-
const commandNameIdentifier = j.identifier(commandName);
308-
const arrayParams = j.arrayExpression(
309-
params.map(param => {
310-
return j.identifier(param.name);
311-
}),
312-
);
313-
const expression = j.template
314-
.expression`dispatchCommand(ref, ${commandNameLiteral}, ${arrayParams})`;
315-
const functionParams = params.map(param => {
316-
return j.identifier(param.name);
317-
});
318-
const property = j.property(
319-
'init',
320-
commandNameIdentifier,
321-
j.functionExpression(
322-
null,
323-
[j.identifier('ref'), ...functionParams],
324-
j.blockStatement([j.expressionStatement(expression)]),
325-
),
326-
);
327-
property.method = true;
328-
return property;
329-
});
330-
return j.exportNamedDeclaration(
331-
j.variableDeclaration('const', [
332-
j.variableDeclarator(
333-
j.identifier('Commands'),
334-
j.objectExpression(properties),
335-
),
307+
const commandsObject = t.objectExpression(
308+
commands.map(command => {
309+
const commandName = command.name;
310+
const params = command.typeAnnotation.params;
311+
const dispatchCommandCall = t.callExpression(
312+
t.identifier('dispatchCommand'),
313+
[
314+
t.identifier('ref'),
315+
t.stringLiteral(commandName),
316+
t.arrayExpression(params.map(param => t.identifier(param.name))),
317+
],
318+
);
319+
return t.objectMethod(
320+
'method',
321+
t.identifier(commandName),
322+
[t.identifier('ref'), ...params.map(param => t.identifier(param.name))],
323+
t.blockStatement([t.expressionStatement(dispatchCommandCall)]),
324+
);
325+
}),
326+
);
327+
return t.exportNamedDeclaration(
328+
t.variableDeclaration('const', [
329+
t.variableDeclarator(t.identifier('Commands'), commandsObject),
336330
]),
337331
);
338332
}
@@ -361,40 +355,40 @@ module.exports = {
361355
paperComponentNameDeprecated:
362356
component.paperComponentNameDeprecated,
363357
});
364-
const replacedSourceRoot = j.withParser('flow')(replacedTemplate);
365358
const paperComponentName =
366359
(_component$paperCompo = component.paperComponentName) !==
367360
null && _component$paperCompo !== void 0
368361
? _component$paperCompo
369362
: componentName;
370-
replacedSourceRoot
371-
.find(j.Identifier, {
372-
name: 'VIEW_CONFIG',
373-
})
374-
.replaceWith(
375-
buildViewConfig(
376-
schema,
377-
paperComponentName,
378-
component,
379-
imports,
380-
),
381-
);
382-
const commands = buildCommands(
363+
const replacedSourceRoot = core.template.program(
364+
replacedTemplate,
365+
)({
366+
VIEW_CONFIG: buildViewConfig(
367+
schema,
368+
paperComponentName,
369+
component,
370+
imports,
371+
),
372+
});
373+
const commandsExport = buildCommands(
383374
schema,
384375
paperComponentName,
385376
component,
386377
imports,
387378
);
388-
if (commands) {
389-
replacedSourceRoot
390-
.find(j.ExportDefaultDeclaration)
391-
.insertAfter(j(commands).toSource());
379+
if (commandsExport) {
380+
replacedSourceRoot.body.push(commandsExport);
392381
}
393-
const replacedSource = replacedSourceRoot.toSource({
394-
quote: 'single',
395-
trailingComma: true,
396-
});
397-
return replacedSource;
382+
const replacedSource = core.transformFromAstSync(
383+
replacedSourceRoot,
384+
undefined,
385+
{
386+
babelrc: false,
387+
browserslistConfigFile: false,
388+
configFile: false,
389+
},
390+
);
391+
return replacedSource.code;
398392
})
399393
.join('\n\n');
400394
})

0 commit comments

Comments
 (0)