Skip to content

Jsx transform #6318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Jsx transform #6318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 21 additions & 7 deletions src/compiler/checker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,7 @@ namespace ts {
* Get symbols that represent parameter-property-declaration as parameter and as property declaration
* @param parameter a parameterDeclaration node
* @param parameterName a name of the parameter to get the symbols for.
* @return a tuple of two symbols
* @return a tuple of two symbols
*/
function getSymbolsOfParameterPropertyDeclaration(parameter: ParameterDeclaration, parameterName: string): [Symbol, Symbol] {
const constructoDeclaration = parameter.parent;
Expand Down Expand Up @@ -8363,13 +8363,27 @@ namespace ts {
checkGrammarJsxElement(node);
checkJsxPreconditions(node);

// If we're compiling under --jsx react, the symbol 'React' should
// be marked as 'used' so we don't incorrectly elide its import. And if there
// is no 'React' symbol in scope, we should issue an error.
/**
* Mark symbol as 'used' so we don't incorreclty elide its import.
* If the symbol is not found in scope, we should issue an error.
*/
function markReferenced(symbolName: string) {
const symbol = resolveName(node.tagName, symbolName, SymbolFlags.Value, Diagnostics.Cannot_find_name_0, symbolName);
if (symbol) {
getSymbolLinks(symbol).referenced = true;
}
}

if (compilerOptions.jsx === JsxEmit.React) {
const reactSym = resolveName(node.tagName, "React", SymbolFlags.Value, Diagnostics.Cannot_find_name_0, "React");
if (reactSym) {
getSymbolLinks(reactSym).referenced = true;
markReferenced("React");
}
else if (compilerOptions.jsx === JsxEmit.Transform) {
if (compilerOptions.jsxNamespace !== "") {
markReferenced(compilerOptions.jsxNamespace || "JSX");
}
else {
markReferenced(compilerOptions.jsxComposeFunction || "compose");
markReferenced(compilerOptions.jsxSpreadFunction || "spread");
}
}

Expand Down
29 changes: 25 additions & 4 deletions src/compiler/commandLineParser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,32 @@ namespace ts {
name: "jsx",
type: {
"preserve": JsxEmit.Preserve,
"react": JsxEmit.React
"react": JsxEmit.React,
"transform": JsxEmit.Transform
},
paramType: Diagnostics.KIND,
description: Diagnostics.Specify_JSX_code_generation_Colon_preserve_or_react,
error: Diagnostics.Argument_for_jsx_must_be_preserve_or_react
description: Diagnostics.Specify_JSX_code_generation_Colon_preserve_transform_or_react,
error: Diagnostics.Argument_for_jsx_must_be_preserve_transform_or_react
},
{
name: "jsxNamespace",
type: "string",
description: Diagnostics.JSX_transform_Colon_Namespace_Default_to_JSX
},
{
name: "jsxComposeFunction",
type: "string",
description: Diagnostics.JSX_transform_Colon_Compose_function_Default_to_compose
},
{
name: "jsxSpreadFunction",
type: "string",
description: Diagnostics.JSX_transform_Colon_Spread_function_Default_to_spread
},
{
name: "jsxChildrenAsArray",
type: "boolean",
description: Diagnostics.JSX_transform_Colon_Pass_children_as_array_Default_to_false
},
{
name: "listFiles",
Expand Down Expand Up @@ -514,7 +535,7 @@ namespace ts {
for (const extension of supportedExtensions) {
const filesInDirWithExtension = host.readDirectory(basePath, extension, exclude);
for (const fileName of filesInDirWithExtension) {
// .ts extension would read the .d.ts extension files too but since .d.ts is lower priority extension,
// .ts extension would read the .d.ts extension files too but since .d.ts is lower priority extension,
// lets pick them when its turn comes up
if (extension === ".ts" && fileExtensionIs(fileName, ".d.ts")) {
continue;
Expand Down
25 changes: 20 additions & 5 deletions src/compiler/diagnosticMessages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -798,7 +798,7 @@
"A decorator can only decorate a method implementation, not an overload.": {
"category": "Error",
"code": 1249
},
},
"'with' statements are not allowed in an async function block.": {
"category": "Error",
"code": 1300
Expand Down Expand Up @@ -2377,12 +2377,12 @@
"category": "Message",
"code": 6078
},
"Specify JSX code generation: 'preserve' or 'react'": {
"Specify JSX code generation: 'preserve', 'transform', or 'react'": {
"category": "Message",
"code": 6080
},
"Argument for '--jsx' must be 'preserve' or 'react'.": {
"category": "Message",
"Argument for '--jsx' must be 'preserve', 'transform', or 'react'.": {
"category": "Error",
"code": 6081
},
"Only 'amd' and 'system' modules are supported alongside --{0}.": {
Expand All @@ -2393,7 +2393,22 @@
"category": "Message",
"code": 6083
},

"JSX transform: Namespace. Default to 'JSX'": {
"category": "Message",
"code": 6084
},
"JSX transform: Compose function. Default to 'compose'": {
"category": "Message",
"code": 6085
},
"JSX transform: Spread function. Default to 'spread'": {
"category": "Message",
"code": 6086
},
"JSX transform: Pass children as array. Default to false.": {
"category": "Message",
"code": 6087
},
"Variable '{0}' implicitly has an '{1}' type.": {
"category": "Error",
"code": 7005
Expand Down
61 changes: 50 additions & 11 deletions src/compiler/emitter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1144,9 +1144,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
emit(span.literal);
}

function jsxEmitReact(node: JsxElement | JsxSelfClosingElement) {
function jsxEmitTransform(node: JsxElement | JsxSelfClosingElement, jsxOptions: any) {
/// Emit a tag name, which is either '"div"' for lower-cased names, or
/// 'Div' for upper-cased or dotted names
/// May add an option to disable this as generic transform may not follow this convension
function emitTagName(name: Identifier | QualifiedName) {
if (name.kind === SyntaxKind.Identifier && isIntrinsicJsxName((<Identifier>name).text)) {
write("\"");
Expand Down Expand Up @@ -1186,28 +1187,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi

function emitJsxElement(openingNode: JsxOpeningLikeElement, children?: JsxChild[]) {
const syntheticReactRef = <Identifier>createSynthesizedNode(SyntaxKind.Identifier);
syntheticReactRef.text = "React";
syntheticReactRef.text = jsxOptions.namespace;
syntheticReactRef.parent = openingNode;

// Call React.createElement(tag, ...
// Call React.createElement(tag, ... or JSX.compose(tag,...
emitLeadingComments(openingNode);
emitExpressionIdentifier(syntheticReactRef);
write(".createElement(");
write(`.${jsxOptions.composeFunction}(`);
emitTagName(openingNode.tagName);
write(", ");

// Attribute list
if (openingNode.attributes.length === 0) {
// When there are no attributes, React wants "null"
// May need to add an jsxOption to override this behavior.
write("null");
}
else {
// Either emit one big object literal (no spread attribs), or
// a call to React.__spread
// a call to React.__spread or JSX.spread
const attrs = openingNode.attributes;
if (forEach(attrs, attr => attr.kind === SyntaxKind.JsxSpreadAttribute)) {
emitExpressionIdentifier(syntheticReactRef);
write(".__spread(");
write(`.${jsxOptions.spreadFunction}(`);

let haveOpenedObjectLiteral = false;
for (let i = 0; i < attrs.length; i++) {
Expand Down Expand Up @@ -1243,7 +1245,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
}
if (haveOpenedObjectLiteral) write("}");

write(")"); // closing paren to React.__spread(
write(")"); // closing paren to React.__spread( or JSX.spread(
}
else {
// One object literal with all the attributes in them
Expand All @@ -1260,6 +1262,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi

// Children
if (children) {
let skipFirstComma = false;
if (jsxOptions.childrenAsArray) {
write(", [");
skipFirstComma = true;
}

for (var i = 0; i < children.length; i++) {
// Don't emit empty expressions
if (children[i].kind === SyntaxKind.JsxExpression && !((<JsxExpression>children[i]).expression)) {
Expand All @@ -1270,21 +1278,36 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
if (children[i].kind === SyntaxKind.JsxText) {
const text = getTextToEmit(<JsxText>children[i]);
if (text !== undefined) {
write(", \"");
if (skipFirstComma) {
skipFirstComma = false;
}
else {
write(", ");
}

write("\"");
write(text);
write("\"");
}
}
else {
write(", ");
if (skipFirstComma) {
skipFirstComma = false;
}
else {
write(", ");
}
emit(children[i]);
}

}
if (jsxOptions.childrenAsArray) {
write("]");
}
}

// Closing paren
write(")"); // closes "React.createElement("
write(")"); // closes "React.createElement(" or "JSX.compose("
emitTrailingComments(openingNode);
}

Expand Down Expand Up @@ -7176,7 +7199,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
function emitJsxElement(node: JsxElement | JsxSelfClosingElement) {
switch (compilerOptions.jsx) {
case JsxEmit.React:
jsxEmitReact(node);
jsxEmitTransform(node, {
namespace: "React",
composeFunction: "createElement",
spreadFunction: "__spread",
childrenAsArray: false
});
break;
case JsxEmit.Transform:
jsxEmitTransform(node, {
namespace: compilerOptions.jsxNamespace || "JSX",
composeFunction: compilerOptions.jsxComposeFunction || "compose",
spreadFunction: compilerOptions.jsxSpreadFunction || "spread",
childrenAsArray: compilerOptions.jsxChildrenAsArray || false
});
break;
case JsxEmit.Preserve:
// Fall back to preserve if None was specified (we'll error earlier)
Expand Down Expand Up @@ -7237,6 +7273,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
function getTextToEmit(node: JsxText) {
switch (compilerOptions.jsx) {
case JsxEmit.React:
case JsxEmit.Transform:
let text = trimReactWhitespaceAndApplyEntities(node);
if (text === undefined || text.length === 0) {
return undefined;
Expand All @@ -7253,6 +7290,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
function emitJsxText(node: JsxText) {
switch (compilerOptions.jsx) {
case JsxEmit.React:
case JsxEmit.Transform:
write("\"");
write(trimReactWhitespaceAndApplyEntities(node));
write("\"");
Expand All @@ -7275,6 +7313,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promi
write("}");
break;
case JsxEmit.React:
case JsxEmit.Transform:
emit(node.expression);
break;
}
Expand Down
7 changes: 6 additions & 1 deletion src/compiler/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2382,6 +2382,10 @@ namespace ts {
inlineSourceMap?: boolean;
inlineSources?: boolean;
jsx?: JsxEmit;
jsxNamespace?: string;
jsxComposeFunction?: string;
jsxSpreadFunction?: string;
jsxChildrenAsArray?: boolean;
listFiles?: boolean;
locale?: string;
mapRoot?: string;
Expand Down Expand Up @@ -2441,7 +2445,8 @@ namespace ts {
export const enum JsxEmit {
None = 0,
Preserve = 1,
React = 2
React = 2,
Transform = 3
}

export const enum NewLineKind {
Expand Down