microsoft/TypeScript
1
0
Fork 0
mirror of https://github.com/microsoft/TypeScript.git synced 2026-05-15 12:51:30 -05:00
Code Issues Packages Projects Releases 212 Wiki Activity

Add auto-import for createElement when using the new JSX transform

Browse Source
This commit is contained in:
Mateusz Burzyński
2020-10-17 19:47:49 +02:00
parent 43433eb2f1
commit 9fd2c2cb4b
8 changed files with 64 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/compiler/factory/utilities.ts
View File

@@ -46,7 +46,7 @@ namespace ts {
}
}
function createJsxFactoryExpression(factory: NodeFactory, jsxFactoryEntity: EntityName | undefined, reactNamespace: string, parent: JsxOpeningLikeElement | JsxOpeningFragment): Expression {
export function createJsxFactoryExpression(factory: NodeFactory, jsxFactoryEntity: EntityName | undefined, reactNamespace: string, parent: JsxOpeningLikeElement | JsxOpeningFragment): Expression {
return jsxFactoryEntity ?
createJsxFactoryExpressionFromEntityName(factory, jsxFactoryEntity, parent) :
factory.createPropertyAccessExpression(
@@ -64,7 +64,7 @@ namespace ts {
);
}
export function createExpressionForJsxElement(factory: NodeFactory, jsxFactoryEntity: EntityName | undefined, reactNamespace: string, tagName: Expression, props: Expression | undefined, children: readonly Expression[] | undefined, parentElement: JsxOpeningLikeElement, location: TextRange): LeftHandSideExpression {
export function createExpressionForJsxElement(factory: NodeFactory, callee: Expression, tagName: Expression, props: Expression | undefined, children: readonly Expression[] | undefined, location: TextRange): LeftHandSideExpression {
const argumentsList = [tagName];
if (props) {
argumentsList.push(props);
@@ -88,7 +88,7 @@ namespace ts {
return setTextRange(
factory.createCallExpression(
createJsxFactoryExpression(factory, jsxFactoryEntity, reactNamespace, parentElement),
callee,
/*typeArguments*/ undefined,
argumentsList
),

74
src/compiler/transformers/jsx.ts
View File

@@ -4,7 +4,7 @@ namespace ts {
interface PerFileState {
importSpecifier?: string;
filenameDeclaration?: VariableDeclaration & { name: Identifier; };
utilizedImplicitRuntimeImports?: Map<ImportSpecifier>;
utilizedImplicitRuntimeImports?: Map<Map<ImportSpecifier>>;
}
const {
@@ -40,17 +40,25 @@ namespace ts {
}
function getImplicitImportForName(name: string) {
const existing = currentFileState.utilizedImplicitRuntimeImports?.get(name);
const importSource = name === "createElement"
? currentFileState.importSpecifier!
: `${currentFileState.importSpecifier}/${compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsx-dev-runtime.js" : "jsx-runtime.js"}`;
const existing = currentFileState.utilizedImplicitRuntimeImports?.get(importSource)?.get(name);
if (existing) {
return existing.name;
}
if (!currentFileState.utilizedImplicitRuntimeImports) {
currentFileState.utilizedImplicitRuntimeImports = createMap();
}
let specifierSourceImports = currentFileState.utilizedImplicitRuntimeImports.get(importSource);
if (!specifierSourceImports) {
specifierSourceImports = createMap();
currentFileState.utilizedImplicitRuntimeImports.set(importSource, specifierSourceImports);
}
const generatedName = factory.createUniqueName(`_${name}`, GeneratedIdentifierFlags.Optimistic | GeneratedIdentifierFlags.FileLevel | GeneratedIdentifierFlags.AllowNameSubstitution);
const specifier = factory.createImportSpecifier(factory.createIdentifier(name), generatedName);
generatedName.generatedImportReference = specifier;
currentFileState.utilizedImplicitRuntimeImports.set(name, specifier);
specifierSourceImports.set(name, specifier);
return generatedName;
}
@@ -73,29 +81,30 @@ namespace ts {
if (currentFileState.filenameDeclaration) {
statements = insertStatementAfterCustomPrologue(statements.slice(), factory.createVariableStatement(/*modifiers*/ undefined, factory.createVariableDeclarationList([currentFileState.filenameDeclaration], NodeFlags.Const)));
}
if (currentFileState.utilizedImplicitRuntimeImports && currentFileState.utilizedImplicitRuntimeImports.size && currentFileState.importSpecifier !== undefined) {
const specifier = `${currentFileState.importSpecifier}/${compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsx-dev-runtime.js" : "jsx-runtime.js"}`;
if (isExternalModule(node)) {
// Add `import` statement
const importStatement = factory.createImportDeclaration(/*decorators*/ undefined, /*modifiers*/ undefined, factory.createImportClause(/*typeOnly*/ false, /*name*/ undefined, factory.createNamedImports(arrayFrom(currentFileState.utilizedImplicitRuntimeImports.values()))), factory.createStringLiteral(specifier));
setParentRecursive(importStatement, /*incremental*/ false);
statements = insertStatementAfterCustomPrologue(statements.slice(), importStatement);
}
else if (isExternalOrCommonJsModule(node)) {
// Add `require` statement
const requireStatement = factory.createVariableStatement(/*modifiers*/ undefined, factory.createVariableDeclarationList([
factory.createVariableDeclaration(
factory.createObjectBindingPattern(map(arrayFrom(currentFileState.utilizedImplicitRuntimeImports.values()), s => factory.createBindingElement(/*dotdotdot*/ undefined, s.propertyName, s.name))),
/*exclaimationToken*/ undefined,
/*type*/ undefined,
factory.createCallExpression(factory.createIdentifier("require"), /*typeArguments*/ undefined, [factory.createStringLiteral(specifier)])
)
], NodeFlags.Const));
setParentRecursive(requireStatement, /*incremental*/ false);
statements = insertStatementAfterCustomPrologue(statements.slice(), requireStatement);
}
else {
// Do nothing (script file) - consider an error in the checker?
if (currentFileState.utilizedImplicitRuntimeImports) {
for (const [importSource, importSpecifiersMap] of arrayFrom(currentFileState.utilizedImplicitRuntimeImports.entries())) {
if (isExternalModule(node)) {
// Add `import` statement
const importStatement = factory.createImportDeclaration(/*decorators*/ undefined, /*modifiers*/ undefined, factory.createImportClause(/*typeOnly*/ false, /*name*/ undefined, factory.createNamedImports(arrayFrom(importSpecifiersMap.values()))), factory.createStringLiteral(importSource));
setParentRecursive(importStatement, /*incremental*/ false);
statements = insertStatementAfterCustomPrologue(statements.slice(), importStatement);
}
else if (isExternalOrCommonJsModule(node)) {
// Add `require` statement
const requireStatement = factory.createVariableStatement(/*modifiers*/ undefined, factory.createVariableDeclarationList([
factory.createVariableDeclaration(
factory.createObjectBindingPattern(map(arrayFrom(importSpecifiersMap.values()), s => factory.createBindingElement(/*dotdotdot*/ undefined, s.propertyName, s.name))),
/*exclaimationToken*/ undefined,
/*type*/ undefined,
factory.createCallExpression(factory.createIdentifier("require"), /*typeArguments*/ undefined, [factory.createStringLiteral(importSource)])
)
], NodeFlags.Const));
setParentRecursive(requireStatement, /*incremental*/ false);
statements = insertStatementAfterCustomPrologue(statements.slice(), requireStatement);
}
else {
// Do nothing (script file) - consider an error in the checker?
}
}
}
if (statements !== visited.statements) {
@@ -306,14 +315,21 @@ namespace ts {
}
}
const callee = currentFileState.importSpecifier === undefined
? createJsxFactoryExpression(
factory,
context.getEmitResolver().getJsxFactoryEntity(currentSourceFile),
compilerOptions.reactNamespace!, // TODO: GH#18217
node
)
: getImplicitImportForName("createElement");
const element = createExpressionForJsxElement(
factory,
context.getEmitResolver().getJsxFactoryEntity(currentSourceFile),
compilerOptions.reactNamespace!, // TODO: GH#18217
callee,
tagName,
objectProperties,
mapDefined(children, transformJsxChildToExpression),
node,
location
);