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
Homa Wong (unional) 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

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

Homa Wong (unional)
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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

Homa Wong (unional)
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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

Homa Wong (unional)
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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

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

Homa Wong (unional)
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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

Homa Wong (unional)
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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

Homa Wong (unional)
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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

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

Homa Wong (unional)
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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 DownExpand 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