Skip to content

Auto-include types for the jsx import source in the new jsx transforms - #41330

Merged
Wesley Wigham (weswigham) merged 5 commits into
microsoft:masterfrom
weswigham:jsx-import-source-as-auto-import
Oct 30, 2020
Merged

Auto-include types for the jsx import source in the new jsx transforms#41330
Wesley Wigham (weswigham) merged 5 commits into
microsoft:masterfrom
weswigham:jsx-import-source-as-auto-import

Conversation

@weswigham

@weswighamWesley Wigham (weswigham) commented Oct 29, 2020

Copy link
Copy Markdown
Member

Fixes#41118
Fixes#40502

A note on #41118 for Stefan Baumgartner (@ddprrt) - preact's source, in that case, is currently (re)exporting a JSX namespace under each factory function (multiple factory functions are used within a compilation). That's not quite what I'm looking for, for local JSX namespaces on implicit jsx runtime imports with this PR - a single top-level JSX export, alongside all those factory functions, is instead what I want to find. This should simplify the file a bit, as a single export {JSXInternal as JSX} from "../../" should suffice.

@weswigham

Copy link
Copy Markdown
MemberAuthor

@typescript-bot

TypeScript Bot (typescript-bot) commented Oct 29, 2020

Copy link
Copy Markdown
Contributor

Heya Wesley Wigham (@weswigham), I've started to run the tarball bundle task on this PR at 6714998. You can monitor the build here.

@typescript-bot

TypeScript Bot (typescript-bot) commented Oct 29, 2020

Copy link
Copy Markdown
Contributor

Heya Wesley Wigham (@weswigham), I've started to run the extended test suite on this PR at 6714998. You can monitor the build here.

@typescript-bot

TypeScript Bot (typescript-bot) commented Oct 29, 2020

Copy link
Copy Markdown
Contributor

Heya Wesley Wigham (@weswigham), I've started to run the parallelized Definitely Typed test suite on this PR at 6714998. You can monitor the build here.

@typescript-bot

TypeScript Bot (typescript-bot) commented Oct 29, 2020

Copy link
Copy Markdown
Contributor

Heya Wesley Wigham (@weswigham), I've started to run the perf test suite on this PR at 6714998. You can monitor the build here.

Update: The results are in!

@typescript-bot

TypeScript Bot (typescript-bot) commented Oct 29, 2020

Copy link
Copy Markdown
Contributor

Heya Wesley Wigham (@weswigham), I've started to run the parallelized community code test suite on this PR at 6714998. You can monitor the build here.

@typescript-bot

TypeScript Bot (typescript-bot) commented Oct 29, 2020

Copy link
Copy Markdown
Contributor

Hey Wesley Wigham (@weswigham), I've packed this into an installable tgz. You can install it for testing by referencing it in your package.json like so:

{
"devDependencies": {
"typescript": "https://typescript.visualstudio.com/cf7ac146-d525-443c-b23c-0d58337efebc/_apis/build/builds/88139/artifacts?artifactName=tgz&fileId=226F2BBEF60964FC480484994039FCA1EED0D8DD50577AAD4FD50DD62136BDD402&fileName=/typescript-4.1.0-insiders.20201029.tgz"
}
}

and then running npm install.


There is also a playground for this build.

@typescript-bot

Copy link
Copy Markdown
Contributor

Wesley Wigham (@weswigham)
The results of the perf run you requested are in!

Here they are:

Comparison Report - master..41330

Metricmaster41330DeltaBestWorst
Angular - node (v10.16.3, x64)
Memory used350,653k (± 0.01%)350,771k (± 0.02%)+119k (+ 0.03%)350,609k350,961k
Parse Time2.08s (± 0.38%)2.08s (± 0.51%)+0.00s (+ 0.24%)2.07s2.12s
Bind Time0.85s (± 0.66%)0.84s (± 0.81%)-0.00s (- 0.47%)0.83s0.86s
Check Time4.98s (± 0.59%)4.97s (± 0.38%)-0.01s (- 0.28%)4.93s5.02s
Emit Time5.33s (± 0.56%)5.32s (± 0.79%)-0.01s (- 0.23%)5.20s5.39s
Total Time13.24s (± 0.36%)13.22s (± 0.33%)-0.03s (- 0.20%)13.08s13.29s
Monaco - node (v10.16.3, x64)
Memory used354,609k (± 0.02%)354,569k (± 0.01%)-41k (- 0.01%)354,459k354,655k
Parse Time1.60s (± 0.72%)1.60s (± 0.75%)-0.01s (- 0.37%)1.57s1.63s
Bind Time0.72s (± 0.66%)0.72s (± 0.46%)-0.00s (- 0.41%)0.71s0.73s
Check Time5.11s (± 0.37%)5.10s (± 0.35%)-0.02s (- 0.33%)5.07s5.15s
Emit Time2.79s (± 0.68%)2.78s (± 0.68%)-0.01s (- 0.50%)2.75s2.83s
Total Time10.23s (± 0.23%)10.20s (± 0.30%)-0.04s (- 0.39%)10.11s10.27s
TFS - node (v10.16.3, x64)
Memory used307,809k (± 0.02%)307,888k (± 0.02%)+79k (+ 0.03%)307,781k308,014k
Parse Time1.24s (± 0.61%)1.24s (± 0.71%)+0.00s (+ 0.32%)1.22s1.26s
Bind Time0.68s (± 1.12%)0.68s (± 1.32%)0.00s ( 0.00%)0.65s0.69s
Check Time4.58s (± 0.63%)4.58s (± 0.55%)+0.00s (+ 0.09%)4.53s4.63s
Emit Time2.95s (± 0.98%)2.93s (± 1.34%)-0.02s (- 0.54%)2.84s2.99s
Total Time9.43s (± 0.68%)9.43s (± 0.55%)-0.01s (- 0.08%)9.30s9.51s
material-ui - node (v10.16.3, x64)
Memory used489,232k (± 0.01%)489,209k (± 0.02%)-23k (- 0.00%)489,038k489,372k
Parse Time2.07s (± 0.64%)2.06s (± 0.56%)-0.00s (- 0.15%)2.03s2.09s
Bind Time0.65s (± 0.62%)0.65s (± 1.23%)+0.00s (+ 0.46%)0.64s0.68s
Check Time13.60s (± 0.71%)13.57s (± 0.73%)-0.03s (- 0.25%)13.35s13.82s
Emit Time0.00s (± 0.00%)0.00s (± 0.00%)0.00s ( NaN%)0.00s0.00s
Total Time16.32s (± 0.64%)16.29s (± 0.69%)-0.03s (- 0.21%)16.04s16.59s
Angular - node (v12.1.0, x64)
Memory used327,943k (± 0.03%)327,923k (± 0.03%)-20k (- 0.01%)327,737k328,110k
Parse Time2.08s (± 0.54%)2.07s (± 0.63%)-0.00s (- 0.19%)2.04s2.10s
Bind Time0.82s (± 0.57%)0.82s (± 1.31%)+0.00s (+ 0.12%)0.80s0.84s
Check Time4.91s (± 0.92%)4.93s (± 0.92%)+0.01s (+ 0.26%)4.88s5.10s
Emit Time5.47s (± 0.21%)5.49s (± 0.99%)+0.02s (+ 0.40%)5.42s5.68s
Total Time13.28s (± 0.41%)13.31s (± 0.62%)+0.03s (+ 0.26%)13.18s13.50s
Monaco - node (v12.1.0, x64)
Memory used336,746k (± 0.02%)336,769k (± 0.01%)+23k (+ 0.01%)336,693k336,851k
Parse Time1.60s (± 1.86%)1.59s (± 0.59%)-0.01s (- 0.69%)1.56s1.60s
Bind Time0.71s (± 2.12%)0.70s (± 1.16%)-0.01s (- 0.85%)0.69s0.73s
Check Time4.94s (± 0.78%)4.91s (± 0.45%)-0.03s (- 0.59%)4.86s4.95s
Emit Time2.87s (± 1.82%)2.87s (± 0.82%)-0.00s (- 0.00%)2.83s2.95s
Total Time10.12s (± 0.95%)10.07s (± 0.45%)-0.05s (- 0.45%)9.94s10.17s
TFS - node (v12.1.0, x64)
Memory used292,098k (± 0.02%)292,108k (± 0.02%)+11k (+ 0.00%)291,986k292,190k
Parse Time1.25s (± 0.88%)1.25s (± 0.67%)+0.00s (+ 0.08%)1.24s1.27s
Bind Time0.65s (± 0.95%)0.65s (± 1.03%)-0.00s (- 0.31%)0.64s0.67s
Check Time4.51s (± 0.46%)4.50s (± 0.66%)-0.01s (- 0.27%)4.44s4.58s
Emit Time2.95s (± 0.92%)2.97s (± 1.01%)+0.02s (+ 0.64%)2.91s3.05s
Total Time9.36s (± 0.37%)9.37s (± 0.62%)+0.01s (+ 0.09%)9.26s9.53s
material-ui - node (v12.1.0, x64)
Memory used467,134k (± 0.06%)467,278k (± 0.01%)+144k (+ 0.03%)467,165k467,442k
Parse Time2.09s (± 0.48%)2.08s (± 0.79%)-0.01s (- 0.53%)2.05s2.11s
Bind Time0.64s (± 0.87%)0.65s (± 1.28%)+0.00s (+ 0.62%)0.63s0.67s
Check Time12.18s (± 1.29%)12.06s (± 0.86%)-0.12s (- 0.99%)11.87s12.29s
Emit Time0.00s (± 0.00%)0.00s (± 0.00%)0.00s ( NaN%)0.00s0.00s
Total Time14.91s (± 1.01%)14.79s (± 0.73%)-0.13s (- 0.86%)14.59s15.06s
Angular - node (v8.9.0, x64)
Memory used353,089k (± 0.02%)353,078k (± 0.02%)-11k (- 0.00%)352,999k353,275k
Parse Time2.63s (± 0.44%)2.63s (± 0.38%)0.00s ( 0.00%)2.61s2.65s
Bind Time0.88s (± 0.73%)0.89s (± 0.86%)+0.00s (+ 0.34%)0.87s0.90s
Check Time5.58s (± 0.43%)5.58s (± 0.58%)-0.00s (- 0.09%)5.52s5.67s
Emit Time6.30s (± 0.99%)6.28s (± 1.27%)-0.02s (- 0.33%)6.08s6.47s
Total Time15.39s (± 0.41%)15.37s (± 0.59%)-0.03s (- 0.16%)15.15s15.53s
Monaco - node (v8.9.0, x64)
Memory used358,439k (± 0.01%)358,446k (± 0.01%)+7k (+ 0.00%)358,327k358,589k
Parse Time1.93s (± 0.43%)1.93s (± 0.57%)-0.00s (- 0.10%)1.91s1.96s
Bind Time0.91s (± 0.71%)0.91s (± 0.84%)-0.01s (- 0.66%)0.89s0.92s
Check Time5.65s (± 0.45%)5.65s (± 0.77%)+0.01s (+ 0.14%)5.58s5.79s
Emit Time3.41s (± 0.36%)3.37s (± 1.51%)-0.04s (- 1.09%)3.24s3.45s
Total Time11.90s (± 0.20%)11.86s (± 0.75%)-0.04s (- 0.32%)11.66s12.07s
TFS - node (v8.9.0, x64)
Memory used310,287k (± 0.02%)310,291k (± 0.02%)+4k (+ 0.00%)310,108k310,384k
Parse Time1.58s (± 0.51%)1.57s (± 0.48%)-0.01s (- 0.76%)1.55s1.58s
Bind Time0.69s (± 0.69%)0.69s (± 0.50%)+0.00s (+ 0.00%)0.68s0.69s
Check Time5.36s (± 0.55%)5.34s (± 0.66%)-0.02s (- 0.32%)5.29s5.42s
Emit Time3.00s (± 0.91%)2.98s (± 1.07%)-0.01s (- 0.47%)2.89s3.04s
Total Time10.62s (± 0.53%)10.58s (± 0.53%)-0.05s (- 0.42%)10.46s10.68s
material-ui - node (v8.9.0, x64)
Memory used496,201k (± 0.01%)496,132k (± 0.01%)-69k (- 0.01%)496,031k496,235k
Parse Time2.51s (± 0.71%)2.49s (± 0.95%)-0.02s (- 0.76%)2.46s2.58s
Bind Time0.82s (± 0.91%)0.82s (± 1.15%)-0.00s (- 0.37%)0.80s0.83s
Check Time18.06s (± 0.82%)18.01s (± 0.68%)-0.05s (- 0.30%)17.74s18.29s
Emit Time0.00s (± 0.00%)0.00s (± 0.00%)0.00s ( NaN%)0.00s0.00s
Total Time21.40s (± 0.72%)21.32s (± 0.62%)-0.07s (- 0.34%)21.04s21.67s
Angular - node (v8.9.0, x86)
Memory used202,110k (± 0.01%)202,148k (± 0.03%)+37k (+ 0.02%)201,990k202,241k
Parse Time2.56s (± 0.71%)2.56s (± 1.22%)-0.01s (- 0.27%)2.52s2.66s
Bind Time1.01s (± 0.52%)1.02s (± 1.10%)+0.01s (+ 1.19%)1.00s1.05s
Check Time5.07s (± 0.44%)5.08s (± 0.58%)+0.02s (+ 0.36%)5.02s5.16s
Emit Time6.16s (± 1.12%)6.09s (± 1.65%)-0.07s (- 1.20%)5.88s6.36s
Total Time14.80s (± 0.46%)14.76s (± 1.00%)-0.05s (- 0.32%)14.46s15.20s
Monaco - node (v8.9.0, x86)
Memory used202,940k (± 0.02%)202,922k (± 0.02%)-19k (- 0.01%)202,815k203,059k
Parse Time1.99s (± 0.48%)1.97s (± 0.65%)-0.02s (- 0.91%)1.94s2.01s
Bind Time0.72s (± 0.72%)0.72s (± 0.81%)-0.00s (- 0.28%)0.71s0.73s
Check Time5.78s (± 0.60%)5.77s (± 0.59%)-0.01s (- 0.24%)5.66s5.84s
Emit Time2.75s (± 1.31%)2.75s (± 1.39%)0.00s ( 0.00%)2.67s2.86s
Total Time11.24s (± 0.45%)11.20s (± 0.44%)-0.04s (- 0.32%)11.10s11.31s
TFS - node (v8.9.0, x86)
Memory used177,426k (± 0.03%)177,415k (± 0.01%)-11k (- 0.01%)177,350k177,461k
Parse Time1.61s (± 0.62%)1.61s (± 1.20%)+0.01s (+ 0.44%)1.59s1.68s
Bind Time0.65s (± 0.61%)0.65s (± 0.77%)-0.01s (- 0.92%)0.64s0.66s
Check Time4.85s (± 0.45%)4.85s (± 0.64%)+0.00s (+ 0.08%)4.80s4.92s
Emit Time2.82s (± 0.97%)2.84s (± 1.17%)+0.02s (+ 0.64%)2.79s2.96s
Total Time9.93s (± 0.35%)9.96s (± 0.48%)+0.02s (+ 0.24%)9.87s10.05s
material-ui - node (v8.9.0, x86)
Memory used279,270k (± 0.01%)279,198k (± 0.01%)-72k (- 0.03%)279,158k279,286k
Parse Time2.55s (± 0.68%)2.54s (± 0.56%)-0.01s (- 0.31%)2.52s2.58s
Bind Time0.71s (± 1.41%)0.76s (± 5.52%)+0.04s (+ 6.01%)0.71s0.87s
Check Time16.56s (± 0.87%)16.42s (± 0.61%)-0.14s (- 0.87%)16.27s16.72s
Emit Time0.00s (± 0.00%)0.00s (± 0.00%)0.00s ( NaN%)0.00s0.00s
Total Time19.83s (± 0.75%)19.72s (± 0.49%)-0.11s (- 0.56%)19.55s20.01s
System
Machine Namets-ci-ubuntu
Platformlinux 4.4.0-166-generic
Architecturex64
Available Memory16 GB
Available Memory1 GB
CPUs4 × Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
Hosts
  • node (v10.16.3, x64)
  • node (v12.1.0, x64)
  • node (v8.9.0, x64)
  • node (v8.9.0, x86)
Scenarios
  • Angular - node (v10.16.3, x64)
  • Angular - node (v12.1.0, x64)
  • Angular - node (v8.9.0, x64)
  • Angular - node (v8.9.0, x86)
  • Monaco - node (v10.16.3, x64)
  • Monaco - node (v12.1.0, x64)
  • Monaco - node (v8.9.0, x64)
  • Monaco - node (v8.9.0, x86)
  • TFS - node (v10.16.3, x64)
  • TFS - node (v12.1.0, x64)
  • TFS - node (v8.9.0, x64)
  • TFS - node (v8.9.0, x86)
  • material-ui - node (v10.16.3, x64)
  • material-ui - node (v12.1.0, x64)
  • material-ui - node (v8.9.0, x64)
  • material-ui - node (v8.9.0, x86)
BenchmarkNameIterations
Current4133010
Baselinemaster10

@typescript-bot

Copy link
Copy Markdown
Contributor

The user suite test run you requested has finished and failed. I've opened a PR with the baseline diff from master.

@ddprrt

Copy link
Copy Markdown

Oh cool, thank you! Is this something we should carry over to Preact? (I assume it's similar to tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespace.tsx) -- I can work on a PR and maybe Marvin Hagemeister (@marvinhagemeister) is willing to guide me 😄

@weswigham

Wesley Wigham (weswigham) commented Oct 29, 2020

Copy link
Copy Markdown
MemberAuthor

Yeah, probably! For the implicitly added imports, the full factory is jsx_import_source.jsx or jsx_import_source.jsxs or jsx_import_source.jsxDEV, so the place we look for the JSX namespace within is the jsx_import_source itself. The change to preact is pretty small - adding export {JSXInternal as JSX}; to the bottom is sufficient, but it can be cleaned up more from there (as you probably don't need all the other reexports).

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked at the checker changes and they seem reasonable. I don't know enough about the program.ts change, but the comment's explanation makes sense to me.

@ortaOrta Therox (orta) left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly looked over the test cases, and this works like I'd expect 👍🏻

Comment threadsrc/compiler/moduleNameResolver.ts Outdated
Comment threadsrc/compiler/program.ts Outdated
Comment threadsrc/compiler/utilities.ts
@weswigham

Copy link
Copy Markdown
MemberAuthor

Sheetal Nandi (@sheetalkamat) I've added the affixes to the compiler options to make them affect incremental emit, and added an incremental emit test.

Comment threadsrc/compiler/program.ts Outdated
if (jsxImport) {
// synthesize `import "base/jsx-runtime"` declaration
imports ||= [];
imports.push(createSyntheticImport(jsxImport, file));

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like this!

Comment threadsrc/compiler/program.ts Outdated
{ path: `${project}/index.tsx`, content: `export const App = () => <div propA={true}></div>;` },
{ path: configFile.path, content: JSON.stringify({ compilerOptions: jsxImportSourceOptions }) }
],
modifyFs: host => host.writeFile(configFile.path, JSON.stringify({ compilerOptions: { ...jsxImportSourceOptions, jsxImportSource: "preact" } }))

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add another case hen preact*.d.ts file is missing and added.
And another when it is present and as incremental change goes missing.

Co-authored-by: Sheetal Nandi <shkamat@microsoft.com>
@DanielRosenwasser

Copy link
Copy Markdown
Member

btw I'm assuming I should wait on this for 4.1 RC - is that reasonable?

@weswigham

Copy link
Copy Markdown
MemberAuthor

Yeah, I'd rather this get into the RC than go out in 4.1 post-RC, since it affects the usability of the react-jsx transform quite a bit.

@sheetalkamat

Copy link
Copy Markdown
Member

Wesley Wigham (@weswigham) the change now looks good and adding tests for #41330 (comment) should make it ready to merge

@DanielRosenwasser

Copy link
Copy Markdown
Member

If we can get the tests in and passing as above, I'll merge this in and kick off the appropriate builds.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

discussed offline with Wesley Wigham (@weswigham) that there is existing bug with incremental build with missing react files being available later which he will work on later and is not related to this change.

@weswigham

Copy link
Copy Markdown
MemberAuthor

(specifically there's an issue with synthetic imports like the one used here and in importHelpers output that causes incremental emit to not pick up the dependency relationship between the files)

@weswigham
Wesley Wigham (weswigham) merged commit 4791050 into microsoft:masterOct 30, 2020
@weswigham
Wesley Wigham (weswigham) deleted the jsx-import-source-as-auto-import branch October 30, 2020 23:51
@DanielRosenwasser

Copy link
Copy Markdown
Member

So what's the idea? Cherry-pick that to 4.1 but leave it out of 4.1 RC?

@weswigham

Copy link
Copy Markdown
MemberAuthor

Well, I got a fix for that underlying issue together pretty quickly, since the issue was actually pretty trivial - our public API sanitity checks forbid answering questions on synthetic declarations like those we'd made - #41346 is out. Up to you. If you can get a review from people you're happy with in a timeframe you're OK with, it can make it into the RC, otherwise saving the fix for post-RC cherry-pick is fine.

@Andarist

Copy link
Copy Markdown
Contributor

Wesley Wigham (@weswigham) is there a way to make this work:

import{createElement}from'react'import{EmotionJSX}from'./jsx-namespace'exportconstjsx: typeofcreateElementexportnamespacejsx{exportimportJSX=EmotionJSX}

It complains about "Cannot redeclare block-scoped variable 'jsx'.ts(2451)" even though this works so it's clearly that export import syntax triggering this error here.

I've tried to make it work for several hours already and can't do it so far.

@weswigham

Copy link
Copy Markdown
MemberAuthor

It's a limitation of our alias-following logic in the binder, if I'm reading it right. If the EmotionJSX namespace was defined in the same file, it'd probably work, because then the binder would be able to know that EmotionJSX only refers to a namespace containing only types (by following the aliases within the file), which then means jsx contains only types, which is consequently safe to merge with const jsx. Across files, we don't know what EmotionJSX consists of until much later during checking, so we conservatively disallow the merge (since it might have some value member which could conflict with some value in the const)... at least that's my read on it.
Naively, I'd hope that

importtype{EmotionJSX}from'./jsx-namespace'

would cause it to work, but I don't know if we adjusted the alias following logic in the binder to allow that to work when we added import type. (Consequently, if that doesn't work, I think an isolated repro of the merge using import type and a new issue would be welcome)

@Andarist

Copy link
Copy Markdown
Contributor

Wesley Wigham (@weswigham) thanks for the tip! I'm afraid it doesn't work though. It also gives me one additional error and that is:

An import alias cannot reference a declaration that was imported using 'import type'

If I find the time I will create a repro case for this and report the appropriate issue. In the meantime I've filled a followup PR to this one: #41476 , please take a look at it when you have time, would be great to fix the issue mentioned there before the final release.

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Author: TeamFor Milestone BugPRs that fix a bug with a specific milestone

Projects

None yet

8 participants

@weswigham@typescript-bot@ddprrt@DanielRosenwasser@sheetalkamat@Andarist@orta@sandersn