Skip to content
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

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

Merged

Conversation

weswigham
Copy link
Member

@weswigham weswigham commented Oct 29, 2020

Fixes #41118
Fixes #40502

A note on #41118 for @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
Member Author

@typescript-bot pack this
@typescript-bot user test this
@typescript-bot perf test this
@typescript-bot test this
@typescript-bot run dt

@typescript-bot
Copy link
Collaborator

typescript-bot commented Oct 29, 2020

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

@typescript-bot
Copy link
Collaborator

typescript-bot commented Oct 29, 2020

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

@typescript-bot
Copy link
Collaborator

typescript-bot commented Oct 29, 2020

Heya @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
Copy link
Collaborator

typescript-bot commented Oct 29, 2020

Heya @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
Copy link
Collaborator

typescript-bot commented Oct 29, 2020

Heya @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
Copy link
Collaborator

typescript-bot commented Oct 29, 2020

Hey @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
Collaborator

@weswigham
The results of the perf run you requested are in!

Here they are:

Comparison Report - master..41330

Metric master 41330 Delta Best Worst
Angular - node (v10.16.3, x64)
Memory used 350,653k (± 0.01%) 350,771k (± 0.02%) +119k (+ 0.03%) 350,609k 350,961k
Parse Time 2.08s (± 0.38%) 2.08s (± 0.51%) +0.00s (+ 0.24%) 2.07s 2.12s
Bind Time 0.85s (± 0.66%) 0.84s (± 0.81%) -0.00s (- 0.47%) 0.83s 0.86s
Check Time 4.98s (± 0.59%) 4.97s (± 0.38%) -0.01s (- 0.28%) 4.93s 5.02s
Emit Time 5.33s (± 0.56%) 5.32s (± 0.79%) -0.01s (- 0.23%) 5.20s 5.39s
Total Time 13.24s (± 0.36%) 13.22s (± 0.33%) -0.03s (- 0.20%) 13.08s 13.29s
Monaco - node (v10.16.3, x64)
Memory used 354,609k (± 0.02%) 354,569k (± 0.01%) -41k (- 0.01%) 354,459k 354,655k
Parse Time 1.60s (± 0.72%) 1.60s (± 0.75%) -0.01s (- 0.37%) 1.57s 1.63s
Bind Time 0.72s (± 0.66%) 0.72s (± 0.46%) -0.00s (- 0.41%) 0.71s 0.73s
Check Time 5.11s (± 0.37%) 5.10s (± 0.35%) -0.02s (- 0.33%) 5.07s 5.15s
Emit Time 2.79s (± 0.68%) 2.78s (± 0.68%) -0.01s (- 0.50%) 2.75s 2.83s
Total Time 10.23s (± 0.23%) 10.20s (± 0.30%) -0.04s (- 0.39%) 10.11s 10.27s
TFS - node (v10.16.3, x64)
Memory used 307,809k (± 0.02%) 307,888k (± 0.02%) +79k (+ 0.03%) 307,781k 308,014k
Parse Time 1.24s (± 0.61%) 1.24s (± 0.71%) +0.00s (+ 0.32%) 1.22s 1.26s
Bind Time 0.68s (± 1.12%) 0.68s (± 1.32%) 0.00s ( 0.00%) 0.65s 0.69s
Check Time 4.58s (± 0.63%) 4.58s (± 0.55%) +0.00s (+ 0.09%) 4.53s 4.63s
Emit Time 2.95s (± 0.98%) 2.93s (± 1.34%) -0.02s (- 0.54%) 2.84s 2.99s
Total Time 9.43s (± 0.68%) 9.43s (± 0.55%) -0.01s (- 0.08%) 9.30s 9.51s
material-ui - node (v10.16.3, x64)
Memory used 489,232k (± 0.01%) 489,209k (± 0.02%) -23k (- 0.00%) 489,038k 489,372k
Parse Time 2.07s (± 0.64%) 2.06s (± 0.56%) -0.00s (- 0.15%) 2.03s 2.09s
Bind Time 0.65s (± 0.62%) 0.65s (± 1.23%) +0.00s (+ 0.46%) 0.64s 0.68s
Check Time 13.60s (± 0.71%) 13.57s (± 0.73%) -0.03s (- 0.25%) 13.35s 13.82s
Emit Time 0.00s (± 0.00%) 0.00s (± 0.00%) 0.00s ( NaN%) 0.00s 0.00s
Total Time 16.32s (± 0.64%) 16.29s (± 0.69%) -0.03s (- 0.21%) 16.04s 16.59s
Angular - node (v12.1.0, x64)
Memory used 327,943k (± 0.03%) 327,923k (± 0.03%) -20k (- 0.01%) 327,737k 328,110k
Parse Time 2.08s (± 0.54%) 2.07s (± 0.63%) -0.00s (- 0.19%) 2.04s 2.10s
Bind Time 0.82s (± 0.57%) 0.82s (± 1.31%) +0.00s (+ 0.12%) 0.80s 0.84s
Check Time 4.91s (± 0.92%) 4.93s (± 0.92%) +0.01s (+ 0.26%) 4.88s 5.10s
Emit Time 5.47s (± 0.21%) 5.49s (± 0.99%) +0.02s (+ 0.40%) 5.42s 5.68s
Total Time 13.28s (± 0.41%) 13.31s (± 0.62%) +0.03s (+ 0.26%) 13.18s 13.50s
Monaco - node (v12.1.0, x64)
Memory used 336,746k (± 0.02%) 336,769k (± 0.01%) +23k (+ 0.01%) 336,693k 336,851k
Parse Time 1.60s (± 1.86%) 1.59s (± 0.59%) -0.01s (- 0.69%) 1.56s 1.60s
Bind Time 0.71s (± 2.12%) 0.70s (± 1.16%) -0.01s (- 0.85%) 0.69s 0.73s
Check Time 4.94s (± 0.78%) 4.91s (± 0.45%) -0.03s (- 0.59%) 4.86s 4.95s
Emit Time 2.87s (± 1.82%) 2.87s (± 0.82%) -0.00s (- 0.00%) 2.83s 2.95s
Total Time 10.12s (± 0.95%) 10.07s (± 0.45%) -0.05s (- 0.45%) 9.94s 10.17s
TFS - node (v12.1.0, x64)
Memory used 292,098k (± 0.02%) 292,108k (± 0.02%) +11k (+ 0.00%) 291,986k 292,190k
Parse Time 1.25s (± 0.88%) 1.25s (± 0.67%) +0.00s (+ 0.08%) 1.24s 1.27s
Bind Time 0.65s (± 0.95%) 0.65s (± 1.03%) -0.00s (- 0.31%) 0.64s 0.67s
Check Time 4.51s (± 0.46%) 4.50s (± 0.66%) -0.01s (- 0.27%) 4.44s 4.58s
Emit Time 2.95s (± 0.92%) 2.97s (± 1.01%) +0.02s (+ 0.64%) 2.91s 3.05s
Total Time 9.36s (± 0.37%) 9.37s (± 0.62%) +0.01s (+ 0.09%) 9.26s 9.53s
material-ui - node (v12.1.0, x64)
Memory used 467,134k (± 0.06%) 467,278k (± 0.01%) +144k (+ 0.03%) 467,165k 467,442k
Parse Time 2.09s (± 0.48%) 2.08s (± 0.79%) -0.01s (- 0.53%) 2.05s 2.11s
Bind Time 0.64s (± 0.87%) 0.65s (± 1.28%) +0.00s (+ 0.62%) 0.63s 0.67s
Check Time 12.18s (± 1.29%) 12.06s (± 0.86%) -0.12s (- 0.99%) 11.87s 12.29s
Emit Time 0.00s (± 0.00%) 0.00s (± 0.00%) 0.00s ( NaN%) 0.00s 0.00s
Total Time 14.91s (± 1.01%) 14.79s (± 0.73%) -0.13s (- 0.86%) 14.59s 15.06s
Angular - node (v8.9.0, x64)
Memory used 353,089k (± 0.02%) 353,078k (± 0.02%) -11k (- 0.00%) 352,999k 353,275k
Parse Time 2.63s (± 0.44%) 2.63s (± 0.38%) 0.00s ( 0.00%) 2.61s 2.65s
Bind Time 0.88s (± 0.73%) 0.89s (± 0.86%) +0.00s (+ 0.34%) 0.87s 0.90s
Check Time 5.58s (± 0.43%) 5.58s (± 0.58%) -0.00s (- 0.09%) 5.52s 5.67s
Emit Time 6.30s (± 0.99%) 6.28s (± 1.27%) -0.02s (- 0.33%) 6.08s 6.47s
Total Time 15.39s (± 0.41%) 15.37s (± 0.59%) -0.03s (- 0.16%) 15.15s 15.53s
Monaco - node (v8.9.0, x64)
Memory used 358,439k (± 0.01%) 358,446k (± 0.01%) +7k (+ 0.00%) 358,327k 358,589k
Parse Time 1.93s (± 0.43%) 1.93s (± 0.57%) -0.00s (- 0.10%) 1.91s 1.96s
Bind Time 0.91s (± 0.71%) 0.91s (± 0.84%) -0.01s (- 0.66%) 0.89s 0.92s
Check Time 5.65s (± 0.45%) 5.65s (± 0.77%) +0.01s (+ 0.14%) 5.58s 5.79s
Emit Time 3.41s (± 0.36%) 3.37s (± 1.51%) -0.04s (- 1.09%) 3.24s 3.45s
Total Time 11.90s (± 0.20%) 11.86s (± 0.75%) -0.04s (- 0.32%) 11.66s 12.07s
TFS - node (v8.9.0, x64)
Memory used 310,287k (± 0.02%) 310,291k (± 0.02%) +4k (+ 0.00%) 310,108k 310,384k
Parse Time 1.58s (± 0.51%) 1.57s (± 0.48%) -0.01s (- 0.76%) 1.55s 1.58s
Bind Time 0.69s (± 0.69%) 0.69s (± 0.50%) +0.00s (+ 0.00%) 0.68s 0.69s
Check Time 5.36s (± 0.55%) 5.34s (± 0.66%) -0.02s (- 0.32%) 5.29s 5.42s
Emit Time 3.00s (± 0.91%) 2.98s (± 1.07%) -0.01s (- 0.47%) 2.89s 3.04s
Total Time 10.62s (± 0.53%) 10.58s (± 0.53%) -0.05s (- 0.42%) 10.46s 10.68s
material-ui - node (v8.9.0, x64)
Memory used 496,201k (± 0.01%) 496,132k (± 0.01%) -69k (- 0.01%) 496,031k 496,235k
Parse Time 2.51s (± 0.71%) 2.49s (± 0.95%) -0.02s (- 0.76%) 2.46s 2.58s
Bind Time 0.82s (± 0.91%) 0.82s (± 1.15%) -0.00s (- 0.37%) 0.80s 0.83s
Check Time 18.06s (± 0.82%) 18.01s (± 0.68%) -0.05s (- 0.30%) 17.74s 18.29s
Emit Time 0.00s (± 0.00%) 0.00s (± 0.00%) 0.00s ( NaN%) 0.00s 0.00s
Total Time 21.40s (± 0.72%) 21.32s (± 0.62%) -0.07s (- 0.34%) 21.04s 21.67s
Angular - node (v8.9.0, x86)
Memory used 202,110k (± 0.01%) 202,148k (± 0.03%) +37k (+ 0.02%) 201,990k 202,241k
Parse Time 2.56s (± 0.71%) 2.56s (± 1.22%) -0.01s (- 0.27%) 2.52s 2.66s
Bind Time 1.01s (± 0.52%) 1.02s (± 1.10%) +0.01s (+ 1.19%) 1.00s 1.05s
Check Time 5.07s (± 0.44%) 5.08s (± 0.58%) +0.02s (+ 0.36%) 5.02s 5.16s
Emit Time 6.16s (± 1.12%) 6.09s (± 1.65%) -0.07s (- 1.20%) 5.88s 6.36s
Total Time 14.80s (± 0.46%) 14.76s (± 1.00%) -0.05s (- 0.32%) 14.46s 15.20s
Monaco - node (v8.9.0, x86)
Memory used 202,940k (± 0.02%) 202,922k (± 0.02%) -19k (- 0.01%) 202,815k 203,059k
Parse Time 1.99s (± 0.48%) 1.97s (± 0.65%) -0.02s (- 0.91%) 1.94s 2.01s
Bind Time 0.72s (± 0.72%) 0.72s (± 0.81%) -0.00s (- 0.28%) 0.71s 0.73s
Check Time 5.78s (± 0.60%) 5.77s (± 0.59%) -0.01s (- 0.24%) 5.66s 5.84s
Emit Time 2.75s (± 1.31%) 2.75s (± 1.39%) 0.00s ( 0.00%) 2.67s 2.86s
Total Time 11.24s (± 0.45%) 11.20s (± 0.44%) -0.04s (- 0.32%) 11.10s 11.31s
TFS - node (v8.9.0, x86)
Memory used 177,426k (± 0.03%) 177,415k (± 0.01%) -11k (- 0.01%) 177,350k 177,461k
Parse Time 1.61s (± 0.62%) 1.61s (± 1.20%) +0.01s (+ 0.44%) 1.59s 1.68s
Bind Time 0.65s (± 0.61%) 0.65s (± 0.77%) -0.01s (- 0.92%) 0.64s 0.66s
Check Time 4.85s (± 0.45%) 4.85s (± 0.64%) +0.00s (+ 0.08%) 4.80s 4.92s
Emit Time 2.82s (± 0.97%) 2.84s (± 1.17%) +0.02s (+ 0.64%) 2.79s 2.96s
Total Time 9.93s (± 0.35%) 9.96s (± 0.48%) +0.02s (+ 0.24%) 9.87s 10.05s
material-ui - node (v8.9.0, x86)
Memory used 279,270k (± 0.01%) 279,198k (± 0.01%) -72k (- 0.03%) 279,158k 279,286k
Parse Time 2.55s (± 0.68%) 2.54s (± 0.56%) -0.01s (- 0.31%) 2.52s 2.58s
Bind Time 0.71s (± 1.41%) 0.76s (± 5.52%) +0.04s (+ 6.01%) 0.71s 0.87s
Check Time 16.56s (± 0.87%) 16.42s (± 0.61%) -0.14s (- 0.87%) 16.27s 16.72s
Emit Time 0.00s (± 0.00%) 0.00s (± 0.00%) 0.00s ( NaN%) 0.00s 0.00s
Total Time 19.83s (± 0.75%) 19.72s (± 0.49%) -0.11s (- 0.56%) 19.55s 20.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)
Benchmark Name Iterations
Current 41330 10
Baseline master 10

@typescript-bot
Copy link
Collaborator

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

ddprrt commented Oct 29, 2020

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 @marvinhagemeister is willing to guide me 😄

@weswigham
Copy link
Member Author

weswigham commented Oct 29, 2020

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
Member

@sandersn sandersn left a comment

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.

Copy link
Contributor

@orta orta left a comment

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 👍🏻

src/compiler/moduleNameResolver.ts Outdated Show resolved Hide resolved
src/compiler/program.ts Outdated Show resolved Hide resolved
@weswigham
Copy link
Member Author

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

if (jsxImport) {
// synthesize `import "base/jsx-runtime"` declaration
imports ||= [];
imports.push(createSyntheticImport(jsxImport, file));
Copy link
Member

Choose a reason for hiding this comment

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

Like this!

{ 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
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
Member

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

@weswigham
Copy link
Member Author

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
Member

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

@DanielRosenwasser
Copy link
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
Member

@sheetalkamat sheetalkamat left a comment

Choose a reason for hiding this comment

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

discussed offline with @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
Member Author

(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 weswigham merged commit 4791050 into microsoft:master Oct 30, 2020
@weswigham weswigham deleted the jsx-import-source-as-auto-import branch October 30, 2020 23:51
@DanielRosenwasser
Copy link
Member

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

@weswigham
Copy link
Member Author

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
Contributor

Andarist commented Nov 9, 2020

@weswigham is there a way to make this work:

import { createElement } from 'react'
import { EmotionJSX } from './jsx-namespace'

export const jsx: typeof createElement
export namespace jsx {
  export import JSX = 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
Member Author

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

import type { 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
Contributor

@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 free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Author: Team For Milestone Bug PRs that fix a bug with a specific milestone
Projects
None yet
8 participants