-
Notifications
You must be signed in to change notification settings - Fork 12.8k
Add support for transpiling per-file jsx pragmas #21218
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.
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
Changes from 3 commits
f4d3143
52a6f22
fa36640
3abda0a
8d5c733
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -299,7 +299,7 @@ namespace ts { | |
resolveName(name, location, meaning, excludeGlobals) { | ||
return resolveName(location, escapeLeadingUnderscores(name), meaning, /*nameNotFoundMessage*/ undefined, /*nameArg*/ undefined, /*isUse*/ false, excludeGlobals); | ||
}, | ||
getJsxNamespace: () => unescapeLeadingUnderscores(getJsxNamespace()), | ||
getJsxNamespace: n => unescapeLeadingUnderscores(getJsxNamespace(n)), | ||
getAccessibleSymbolChain, | ||
getTypePredicateOfSignature, | ||
resolveExternalModuleSymbol, | ||
|
@@ -765,7 +765,22 @@ namespace ts { | |
} | ||
} | ||
|
||
function getJsxNamespace(): __String { | ||
function getJsxNamespace(location: Node | undefined): __String { | ||
if (location) { | ||
const file = getSourceFileOfNode(location); | ||
if (file) { | ||
if (file.localJsxNamespace) { | ||
return file.localJsxNamespace; | ||
} | ||
const jsxPragma = file.pragmas.get("jsx"); | ||
if (jsxPragma) { | ||
file.localJsxFactory = parseIsolatedEntityName(jsxPragma, languageVersion); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why not set this one in There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It pretty much maps to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I could move the calculation (and make it eager) from the checker into the parser, if you'd like. |
||
if (file.localJsxFactory) { | ||
return file.localJsxNamespace = getFirstIdentifier(file.localJsxFactory).escapedText; | ||
} | ||
} | ||
} | ||
} | ||
if (!_jsxNamespace) { | ||
_jsxNamespace = "React" as __String; | ||
if (compilerOptions.jsxFactory) { | ||
|
@@ -15082,8 +15097,10 @@ namespace ts { | |
function checkJsxFragment(node: JsxFragment, checkMode: CheckMode): Type { | ||
checkJsxOpeningLikeElementOrOpeningFragment(node.openingFragment, checkMode); | ||
|
||
if (compilerOptions.jsx === JsxEmit.React && compilerOptions.jsxFactory) { | ||
error(node, Diagnostics.JSX_fragment_is_not_supported_when_using_jsxFactory); | ||
if (compilerOptions.jsx === JsxEmit.React && (compilerOptions.jsxFactory || getSourceFileOfNode(node).pragmas.has("jsx"))) { | ||
error(node, compilerOptions.jsxFactory | ||
? Diagnostics.JSX_fragment_is_not_supported_when_using_jsxFactory | ||
: Diagnostics.JSX_fragment_is_not_supported_when_using_an_inline_JSX_factory_pragma); | ||
} | ||
|
||
return getJsxGlobalElementType() || anyType; | ||
|
@@ -15709,7 +15726,7 @@ namespace ts { | |
// The reactNamespace/jsxFactory's root symbol should be marked as 'used' so we don't incorrectly elide its import. | ||
// And if there is no reactNamespace/jsxFactory's symbol in scope when targeting React emit, we should issue an error. | ||
const reactRefErr = diagnostics && compilerOptions.jsx === JsxEmit.React ? Diagnostics.Cannot_find_name_0 : undefined; | ||
const reactNamespace = getJsxNamespace(); | ||
const reactNamespace = getJsxNamespace(node); | ||
const reactLocation = isNodeOpeningLikeElement ? (<JsxOpeningLikeElement>node).tagName : node; | ||
const reactSym = resolveName(reactLocation, reactNamespace, SymbolFlags.Value, reactRefErr, reactNamespace, /*isUse*/ true); | ||
if (reactSym) { | ||
|
@@ -25556,7 +25573,7 @@ namespace ts { | |
return !!(symbol && getCheckFlags(symbol) & CheckFlags.Late); | ||
}, | ||
writeLiteralConstValue, | ||
getJsxFactoryEntity: () => _jsxFactoryEntity | ||
getJsxFactoryEntity: location => location ? (getJsxNamespace(location), (getSourceFileOfNode(location).localJsxFactory || _jsxFactoryEntity)) : _jsxFactoryEntity | ||
}; | ||
|
||
// defined here to avoid outer scope pollution | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6089,6 +6089,7 @@ namespace ts { | |
const referencedFiles: FileReference[] = []; | ||
const typeReferenceDirectives: FileReference[] = []; | ||
const amdDependencies: { path: string; name: string }[] = []; | ||
let pragmas: { pragma: string, value: string | undefined }[] = []; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. if we gonna add a new concept, then we should consolidate the other ones under pargma.. and we should allow I would also have helper functions for getting all of these like amdDependecies, amdModuleNAme, checkJs, etc.. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure! I wanted to consolidate them, anyway, just didn't think this PR was appropriate. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We need to ensure this works well when doing incremental parsing as well and need test for the same. |
||
let amdModuleName: string; | ||
let checkJsDirective: CheckJsDirective = undefined; | ||
|
||
|
@@ -6097,6 +6098,9 @@ namespace ts { | |
// reference comment. | ||
while (true) { | ||
const kind = triviaScanner.scan(); | ||
if (kind === SyntaxKind.MultiLineCommentTrivia) { | ||
pragmas = concatenate(pragmas, extractPragmas(sourceText.substring(triviaScanner.getTokenPos(), triviaScanner.getTextPos()))); | ||
} | ||
if (kind !== SyntaxKind.SingleLineCommentTrivia) { | ||
if (isTrivia(kind)) { | ||
continue; | ||
|
@@ -6162,6 +6166,8 @@ namespace ts { | |
pos: range.pos | ||
}; | ||
} | ||
|
||
pragmas = concatenate(pragmas, extractPragmas(comment)); | ||
} | ||
} | ||
|
||
|
@@ -6170,6 +6176,25 @@ namespace ts { | |
sourceFile.amdDependencies = amdDependencies; | ||
sourceFile.moduleName = amdModuleName; | ||
sourceFile.checkJsDirective = checkJsDirective; | ||
sourceFile.pragmas = createMap(); | ||
for (const p of pragmas) { | ||
if (sourceFile.pragmas.has(p.pragma)) { | ||
// First one in semantics matches babel's behavior for the jsx pragma | ||
// TODO: Considering issuing an error/warning on ignored pragma comments? It feels philosophically incorrect to error on a comment, but... | ||
continue; | ||
} | ||
sourceFile.pragmas.set(p.pragma, p.value); | ||
} | ||
} | ||
|
||
function extractPragmas(text: string) { | ||
const pragmas: { pragma: string, value: string | undefined }[] = []; | ||
const pragmaRegEx = /@(\w+)(\W+(\w+)(\W+|$))?/gim; | ||
let matchResult: RegExpMatchArray; | ||
while (matchResult = pragmaRegEx.exec(text)) { | ||
pragmas.push({ pragma: matchResult[1], value: matchResult[3] }); | ||
} | ||
return pragmas; | ||
} | ||
|
||
function setExternalModuleIndicator(sourceFile: SourceFile) { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
//// [tests/cases/conformance/jsx/inline/inlineJsxFactoryDeclarations.tsx] //// | ||
|
||
//// [renderer.d.ts] | ||
declare global { | ||
namespace JSX { | ||
interface IntrinsicElements { | ||
[e: string]: any; | ||
} | ||
} | ||
} | ||
export function dom(): void; | ||
export function otherdom(): void; | ||
export { dom as default }; | ||
//// [other.tsx] | ||
/** @jsx h */ | ||
import { dom as h } from "./renderer" | ||
export const prerendered = <h></h>; | ||
//// [othernoalias.tsx] | ||
/** @jsx otherdom */ | ||
import { otherdom } from "./renderer" | ||
export const prerendered2 = <h></h>; | ||
//// [reacty.tsx] | ||
import React from "./renderer" | ||
export const prerendered3 = <h></h>; | ||
|
||
//// [index.tsx] | ||
/** @jsx dom */ | ||
import { dom } from "./renderer" | ||
<h></h> | ||
export * from "./other"; | ||
export * from "./othernoalias"; | ||
export * from "./reacty"; | ||
|
||
|
||
//// [other.js] | ||
"use strict"; | ||
exports.__esModule = true; | ||
/** @jsx h */ | ||
var renderer_1 = require("./renderer"); | ||
exports.prerendered = renderer_1.dom("h", null); | ||
//// [othernoalias.js] | ||
"use strict"; | ||
exports.__esModule = true; | ||
/** @jsx otherdom */ | ||
var renderer_1 = require("./renderer"); | ||
exports.prerendered2 = renderer_1.otherdom("h", null); | ||
//// [reacty.js] | ||
"use strict"; | ||
exports.__esModule = true; | ||
var renderer_1 = require("./renderer"); | ||
exports.prerendered3 = renderer_1["default"].createElement("h", null); | ||
//// [index.js] | ||
"use strict"; | ||
function __export(m) { | ||
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
} | ||
exports.__esModule = true; | ||
/** @jsx dom */ | ||
var renderer_1 = require("./renderer"); | ||
renderer_1.dom("h", null); | ||
__export(require("./other")); | ||
__export(require("./othernoalias")); | ||
__export(require("./reacty")); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
=== tests/cases/conformance/jsx/inline/renderer.d.ts === | ||
declare global { | ||
>global : Symbol(global, Decl(renderer.d.ts, 0, 0)) | ||
|
||
namespace JSX { | ||
>JSX : Symbol(JSX, Decl(renderer.d.ts, 0, 16)) | ||
|
||
interface IntrinsicElements { | ||
>IntrinsicElements : Symbol(IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
|
||
[e: string]: any; | ||
>e : Symbol(e, Decl(renderer.d.ts, 3, 13)) | ||
} | ||
} | ||
} | ||
export function dom(): void; | ||
>dom : Symbol(dom, Decl(renderer.d.ts, 6, 1)) | ||
|
||
export function otherdom(): void; | ||
>otherdom : Symbol(otherdom, Decl(renderer.d.ts, 7, 28)) | ||
|
||
export { dom as default }; | ||
>dom : Symbol(default, Decl(renderer.d.ts, 9, 8)) | ||
>default : Symbol(default, Decl(renderer.d.ts, 9, 8)) | ||
|
||
=== tests/cases/conformance/jsx/inline/other.tsx === | ||
/** @jsx h */ | ||
import { dom as h } from "./renderer" | ||
>dom : Symbol(h, Decl(other.tsx, 1, 8)) | ||
>h : Symbol(h, Decl(other.tsx, 1, 8)) | ||
|
||
export const prerendered = <h></h>; | ||
>prerendered : Symbol(prerendered, Decl(other.tsx, 2, 12)) | ||
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
|
||
=== tests/cases/conformance/jsx/inline/othernoalias.tsx === | ||
/** @jsx otherdom */ | ||
import { otherdom } from "./renderer" | ||
>otherdom : Symbol(otherdom, Decl(othernoalias.tsx, 1, 8)) | ||
|
||
export const prerendered2 = <h></h>; | ||
>prerendered2 : Symbol(prerendered2, Decl(othernoalias.tsx, 2, 12)) | ||
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
|
||
=== tests/cases/conformance/jsx/inline/reacty.tsx === | ||
import React from "./renderer" | ||
>React : Symbol(React, Decl(reacty.tsx, 0, 6)) | ||
|
||
export const prerendered3 = <h></h>; | ||
>prerendered3 : Symbol(prerendered3, Decl(reacty.tsx, 1, 12)) | ||
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
|
||
=== tests/cases/conformance/jsx/inline/index.tsx === | ||
/** @jsx dom */ | ||
import { dom } from "./renderer" | ||
>dom : Symbol(dom, Decl(index.tsx, 1, 8)) | ||
|
||
<h></h> | ||
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
>h : Symbol(JSX.IntrinsicElements, Decl(renderer.d.ts, 1, 19)) | ||
|
||
export * from "./other"; | ||
export * from "./othernoalias"; | ||
export * from "./reacty"; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is it
jsx
and notjsxNamespace
like the compiler option?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Babel supports
jsx
and I figured we'd want to support the same thing - we can aliasjsxNamespace
, if you'd like?