V2 Playground by orta · Pull Request #163 · microsoft/TypeScript-Website

orta · 2019-12-26T15:48:57Z

The start of the two libraries:

Sandbox - a wrapper around monaco optimized for working with TS, with the goal as being useful for anyone to embed on their own sites
Playground - the same thing as https://www.typescriptlang.org/play/ (eventually, as typeScript and not one massive file)

github-actions · 2019-12-26T16:08:05Z

	Fails
🚫	Failed the following Lighthouse audits: `color-contrast`

	Messages
📖	Deployed to a PR branch - playground tsconfig old handbook

Got false positives?

Make changes to the global settings spellcheck.json in /artsy/peril-settings.

Typos for noImplicitAny.md

Line	Typo
6	!n s0me cases where n0 type annotatio
6	!n s0me cases where n0 type annotations r present, T
6	annotations r present, Type$cript will fall back to a type of `
19	itAny` however T$ will issue errorz whenever it would have inferr

Typos for files.md

Line	Typo
25	Specifies an 4llowlist of f1l3s to include in the pr
25	Specifies an 4llowlist of f1l3s to include in the pr0gram. An
25	st of f1l3s to include in the pr0gram. An error occurs if any 0f th
25	0gram. An error occurs if any 0f the files can't be found.

Typos for Basic_Options_6172.md

Line	Typo
5	These settings ar3 used to define the runtime ex
5	e the runtime expectations of ur project, how and where u want
5	of ur project, how and where u want the J$ to be emittd and
5	nd where u want the J$ to be emittd and the lvl of integrat0n you
5	the J$ to be emittd and the lvl of integrat0n you want with e
5	$ to be emittd and the lvl of integrat0n you want with existing JS cod

Typos for README.md

Line	Typo
6	work by [Artem Tyurin](https://github.com/ag
6	work by [Artem Tyurin](https://github.com/agentcoop
14	- The sidebar plugin infrastructure for showing JS

Typos for useDefineForClassFields.md

Line	Typo
6	ation has a different runtime behavior to TypeScript's implementatio
8	to the upcoming ECMA runtime behavior.

Typos for typeRoots.md

Line	Typo
20	This config file will include all packa

Typos for typeAcquisition.md

Line	Typo
6	ules`automatically using the DefinitelyTyped set of`@types` definitions.

Typos for target.md

Line	Typo
9	changes which JS features are downleveled and which are left intact.
15	If your are only working with Node.js, here are recommended `target
23	These are based on [node.green](https://node.green)'s databa

Typos for suppressImplicitAnyIndexErrors.md

Line	Typo
6	ting the error about implicit anys when indexing into objects, a

Typos for stripInternal.md

Line	Typo
6	@internal` annotation in it's JSDoc comment.
8	n your `d.ts` files, look at [api-extractor](https://api-extractor.com).

Typos for strictFunctionTypes.md

Line	Typo
24	With `strictFunctionTypes` on, the error is correctly detec

Typos for strict.md

Line	Typo
6	a wide range of type checking behavior that results in stronger guar
11	will be added to disable that behavior.

Typos for sourceMap.md

Line	Typo
6	Enables the generation of [sourcemap files](https://developer.mozi
10	files will in turn contain a sourcemap comment to indicate to tools
27	And this also generates this json map:

Typos for resolveJsonModule.md

Line	Typo
6	ws importing modules with a '.json' extension, which is a common

Typos for removeComments.md

Line	Typo
8	a TypeScript file which has a JSDoc comment:

Typos for pretty.md

Line	Typo
6	ize errors and messages using color and context, this is on by de
7	single colored messages from the compiler.

Typos for preserveSymlinks.md

Line	Typo
6	s to reflect the same flag in Node.js; which does not resolve the r
8	ag also exhibits the opposite behavior to Webpack’s `resolve.symlink
8	bits the opposite behavior to Webpack’s `resolve.symlinks` option (i.
8	ks`to true parallels setting Webpack’s`resolve.symlinks` to false,

Typos for preserveConstEnums.md

Line	Typo
7	on at runtime by emitting the enum value instead of a reference.
24	The default `const enum` behavior is to convert any `Album.Some
25	to the enum from the JavaScript completel

Typos for plugins.md

Line	Typo
6	List of language service plugins to run inside the editor.
8	Language service plugins are a way to provide addition
12	- [ts-sql-plugin](https://github.com/xialvjun/
13	- [typescript-styled-plugin](https://github.com/Microsoft
14	- [typescript-eslint-language-service](https://github.com/Quramy/ty
14	age-service) — Provides eslint error messaging and fix-its i
16	ally include language service plugins](https://code.visualstudio.co

Typos for outFile.md

Line	Typo
11	on cannot be used to bundle CommonJS or ES6 modules.

Typos for outDir.md

Line	Typo
7	urce files is preserved; see [rootDir](#rootDir) if the computed ro

Typos for out.md

Line	Typo
6	Use [outFile](#outfile) instead.

Typos for noImplicitUseStrict.md

Line	Typo
6	n emitting a module file to a non-ES6 target, TypeScript emits a `"

Typos for noFallthroughCasesInSwitch.md

Line	Typo
6	Report errors for fallthrough cases in switch statements.
8	on't accidentally ship a case fallthrough bug.

Typos for noEmitHelpers.md

Line	Typo
28	be switched out with your own globals via this flag:

Typos for noEmit.md

Line	Typo
8	bel](https://babeljs.io), or [swc](https://github.com/swc-proje

Typos for newLine.md

Line	Typo
6	files: 'CRLF' (dos) or 'LF' (unix).

Typos for moduleResolution.md

Line	Typo
6	resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre
6	.js) or 'classic' (TypeScript pre-1.6). You probably won't need t

Typos for mapRoot.md

Line	Typo
18	are that `index.js` will have sourcemaps at `https://my-website.com/de

Typos for lib.md

Line	Typo
12	pt API objects (maybe through polyfills), but doesn't yet support the
13	- You have polyfills or native implementations for
25	available in ES2018 - `async` iterables, `promise.finally`, `Intl.Plu
28	Additional APIs available in ESNext - This changes as the JavaScr
30	Worker`

Typos for keyofStringsOnly.md

Line	Typo
8	used to help people keep this behavior from [before TypeScript 2.9's

Typos for isolatedModules.md

Line	Typo
11	interpreted by a single-file transpilation process.
12	It does not change the behavior of your code, or otherwise ch
12	code, or otherwise change the behavior of TypeScript's checking and

Typos for inlineSourceMap.md

Line	Typo
8	t want to debug JS files on a webserver that doesn't allow `.map` fil

Typos for incremental.md

Line	Typo
10	files to be built to, use the config option [`tsBuildInfoFile`](#t

Typos for importHelpers.md

Line	Typo
6	For certain downleveling operations, TypeScript uses s
6	eading arrays or objects, and async operations.
10	re instead imported from the [tslib](https://www.npmjs.com/packag

Typos for generateCpuProfile.md

Line	Typo
6	nce to have TypeScript emit a v8 CPU profile during the compil

Typos for files.md

Line	Typo
6	Specifies an allowlist of files to include in the pr

Typos for extends.md

Line	Typo
7	The path may use Node.js style resolution.
9	en by those in the inheriting config file. All relative paths foun
11	`exclude` from the inheriting config file overwrite those from t
12	base config file, and that circularity be

Typos for esModuleInterop.md

Line	Typo
6	emit interoperability between CommonJS and ES Modules via creation o
8	TypeScript adheres to the EcmaScript standard for modules, which m
10	attern is rare in modules for CommonJS. For example, without `esModu

Typos for downlevelIteration.md

Line	Typo
6	Downleveling is TypeScript's term for tran
7	concepts in older JavaScript runtimes.
14	r / of`loop on any object is downleveled to a traditional`for` loop:
25	% compliant with ECMAScript 6 behavior.
29	lementation (either native or polyfill).
53	escription, it sounds easy to downlevel to ES5:
61	l create an own property if spreaded, but will not if built using
75	more accurately emulate ES 6 behavior.

Typos for disableSourceOfProjectReferenceRedirect.md

Line	Typo
6	ides a way to go [back to the pre-3.7](/docs/handbook/release-not
6	ting-with-project-references) behavior where d.ts files were used to
6	ct-references) behavior where d.ts files were used to as the bou

Typos for declarationDir.md

Line	Typo
26	Would place the d.ts for the `index.ts` in a `type

Typos for declaration.md

Line	Typo
8	s like TypeScript can provide intellisense and accurate types for un-typ
8	isense and accurate types for un-typed code.

Typos for charset.md

Line	Typo
7	t UTF-16 (BE and LE) or UTF-8 BOMs.

Typos for alwaysStrict.md

Line	Typo
8	ntroduced in ES5 and provides behavior tweaks to the runtime of the

Typos for allowUmdGlobalAccess.md

Line	Typo
6	ets you access UMD exports as globals from inside module files. A m
8	the particular library (like jQuery or Lodash) will always be ava
8	cular library (like jQuery or Lodash) will always be available at

Typos for allowSyntheticDefaultImports.md

Line	Typo
21	This option brings the behavior of TypeScript in-line with Ba

Typos for README.md

Line	Typo
4	monaco-typescript with extra extension points s
9	- You want to work with monaco at a higher abstraction level
13	ia supporting older builds of monaco-typescript)
20	This is the same format that vscode/monaco use, and so you can us
20	s the same format that vscode/monaco use, and so you can use

Typos for README.md

Line	Typo
15	monaco/IDE-like environment which ha
15	-like environment which has a TSServer running for
25	Create a folder in the english section of the [`copy`](./cop
34	is created by copying over an english example with the same path, a
35	copied over fall back to the english version
38	rated`](./generated), one per lanaguge.
48	default to english.

Typos for README.md

Line	Typo
18	## TypeScriptLang-Org
28	ll sites which want to show a monaco editor
37	## TSConfig Reference
39	hensive API reference for the TSConfig JSON file.
74	## TS Twoslasher
86	## Gatsby Remark Twoslasher Code Blocks
88	A Gasby Remark plugin which runs twos
88	A Gasby Remark plugin which runs twoslash for any c
88	asby Remark plugin which runs twoslash for any code blocks with twos
88	lash for any code blocks with twoslash in their metadata
90	## Gatsby Remark Shiki
92	A Gasby Remark plugin which highlight
92	A Gasby Remark plugin which highlights code (using
92	which highlights code (using vscode's parsers) then annotates the c
92	then annotates the code with twoslash information
108	you submit a pull request, a CLA-bot will automatically determine
114	contact [opencode@microsoft.com](mailto:
114	contact [opencode@microsoft.com](mailto:openc
114	contact [opencode@microsoft.com](mailto:opencode@microsoft.co

Lighthouse Scores

`/`

Performance	Accessibility	Best Practices	SEO	Progressive Web App
0.78	1	0.93	0.88	0.74

`/en/tsconfig`

Performance	Accessibility	Best Practices	SEO	Progressive Web App
0.92	0.95	1	0.86	0.7

color-contrast

Background and foreground colors do not have a sufficient contrast ratio. Low-contrast text is difficult or impossible for many users to read. Learn more.

Failing Elements
`// @filename: index.ts`: `<span style="color: #4C566A">// @filename: index.ts</span>`
`// @filename: card.js`: `<span style="color: #4C566A">// @filename: card.js</span>`
`// @filename: index.ts`: `<span style="color: #4C566A">// @filename: index.ts</span>`
`// @filename: index.ts`: `<span style="color: #4C566A">// @filename: index.ts</span>`
`// parseFloat only takes a string`: `<span style="color: #4C566A">// parseFloat only takes a string</span>`
`// @filename: constants.js`: `<span style="color: #4C566A">// @filename: constants.js</span>`
`///` : `<span style="color: #4C566A">/// </span>`
`// @filename: index.ts`: `<span style="color: #4C566A">// @filename: index.ts</span>`
`// @filename: constants.js`: `<span style="color: #4C566A">// @filename: constants.js</span>`
`///` : `<span style="color: #4C566A">/// </span>`
`// @filename: index.ts`: `<span style="color: #4C566A">// @filename: index.ts</span>`
`// helloWorld.ts`: `<span style="color: #4C566A">// helloWorld.ts</span>`
`// helloWorld.js`: `<span style="color: #4C566A">// helloWorld.js</span>`
`// helloWorld.js.map`: `<span style="color: #4C566A">// helloWorld.js.map</span>`
`// The same, right?`: `<span style="color: #4C566A">// The same, right?</span>`
`// true`: `<span style="color: #4C566A">// true</span>`
`// false`: `<span style="color: #4C566A">// false</span>`
`// No error?`: `<span style="color: #4C566A">// No error?</span>`
`// When strictNullChecks: true`: `<span style="color: #4C566A">// When strictNullChecks: true</span>`
`// Unsafe assignment`: `<span style="color: #4C566A">// Unsafe assignment</span>`
`// Unsafe call - will crash`: `<span style="color: #4C566A">// Unsafe call - will crash</span>`
`// With strictBindCallApply on`: `<span style="color: #4C566A">// With strictBindCallApply on</span>`
`// @strictBindCallApply: false`: `<span style="color: #4C566A">// @strictBindCallApply: false</span>`
`// With strictBindCallApply off`: `<span style="color: #4C566A">// With strictBindCallApply off</span>`
`// Note that this.email is not set`: `<span style="color: #4C566A">// Note that this.email is not set</span>`
`// @filename: utilFunctions.js`: `<span style="color: #4C566A">// @filename: utilFunctions.js</span>`
`// @filename: index.ts`: `<span style="color: #4C566A">// @filename: index.ts</span>`
`// @filename: utilFunctions.js`: `<span style="color: #4C566A">// @filename: utilFunctions.js</span>`
`// do nothing`: `<span style="color: #4C566A">// do nothing</span>`
`// do nothing`: `<span style="color: #4C566A">// do nothing</span>`
`// do nothing`: `<span style="color: #4C566A">// do nothing</span>`
`// @filename: settings.json`: `<span style="color: #4C566A">// @filename: settings.json</span>`
`// @filename: index.ts`: `<span style="color: #4C566A">// @filename: index.ts</span>`
`// @filename: settings.json`: `<span style="color: #4C566A">// @filename: settings.json</span>`
`// @filename: index.ts`: `<span style="color: #4C566A">// @filename: index.ts</span>`
`/`: `<span style="color: #4C566A">/</span>`
`* Days available in a week`: `<span style="color: #4C566A"> * Days available in a week</span>`
`* @internal`: `<span style="color: #4C566A"> * @internal</span>`
`/`: `<span style="color: #4C566A"> /</span>`
`/`: `<span style="color: #4C566A">/</span>`
`* Days available in a week`: `<span style="color: #4C566A"> * Days available in a week</span>`
`* @internal`: `<span style="color: #4C566A"> * @internal</span>`
`/`: `<span style="color: #4C566A"> /</span>`
`// Get API`: `<span style="color: #4C566A">// Get API</span>`
`// Get API`: `<span style="color: #4C566A">// Get API</span>`
`/return/`: `<span style="color: #4C566A">/return/</span>`
`// Get API`: `<span style="color: #4C566A">// Get API</span>`
`/return/`: `<span style="color: #4C566A">/return/</span>`
`// Forgot 'return' statement`: `<span style="color: #4C566A">// Forgot 'return' statement</span>`
`// @ts-ignore`: `<span style="color: #4C566A">// @ts-ignore</span>`
`// Ok`: `<span style="color: #4C566A">// Ok</span>`
`// Error`: `<span style="color: #4C566A">// Error</span>`

`/docs/handbook/integrating-with-build-tools.html`

Performance	Accessibility	Best Practices	SEO	Progressive Web App
0.95	0.93	1	0.89	0.74

Snapshots updated

`backstop_default_Empty_Page_0_document_1_tablet.png`

Before	After

`backstop_default_Empty_Page_0_document_2_computer.png`

Before	After

`backstop_default_Index_0_document_0_phone.png`

Before	After

`backstop_default_Index_0_document_1_tablet.png`

Before	After

`backstop_default_Index_0_document_2_computer.png`

Before	After

`backstop_default_Old_Handbook_Example_0_viewport_0_phone.png`

Before	After

`backstop_default_Old_Handbook_Example_0_viewport_1_tablet.png`

Before	After

`backstop_default_Old_Handbook_Example_0_viewport_2_computer.png`

Before	After

`backstop_default_TSConfig_Example_0_viewport_0_phone.png`

Before	After

`backstop_default_TSConfig_Example_0_viewport_1_tablet.png`

Before	After

`backstop_default_TSConfig_Example_0_viewport_2_computer.png`

Before	After

Generated by 🚫 dangerJS against 0792608

…or restoring code via URL

…into v2-playground

…onfig options in the playground

orta · 2020-01-06T10:21:30Z

It's not perfect, but structurally its all there now, will come back and add some of the final polish later

orta · 2020-01-06T10:41:55Z

It's the a11y failing still, will merge for now

orta added 3 commits December 26, 2019 13:02

Start moving the playground into v2

ec2d785

Make a working playground and sandbox

2b9b853

Bootstrap

e3be9cd

orta added 13 commits December 26, 2019 20:30

fixes some urls

271f332

Sidebars and plugins for the playground

d599d0a

Adds some useful helpers to the sandbox

142d004

Vendor the tsworker types

a8c72b6

Adds the sidebar for playground, and gets some of the infra running f…

81f3875

…or restoring code via URL

Docs

10d3765

Fix playground and add json to the watcher to trigger builds

370c54d

Some CI faff

9bed4f7

Adds some nav and infra

d5421dc

More work on the playground

e79dd88

Make tests green

c000ec9

Add a one-liner to every compiler flag

4627aa3

Add a bootstrap command

3e121f1

orta mentioned this pull request Dec 31, 2019

💌📯 Updates #130

Closed

orta added 7 commits December 31, 2019 15:40

Playground work

f6a8740

Get green

c937c93

Show examples

67984e8

Adds caching to the ATA

e7f3afc

Hook up more buttons on the playground

b33592f

Set up i8n for playground samples

f82cfc5

Create the exaples dir

c6c26e6

orta force-pushed the v2-playground branch from 2f38c8f to c6c26e6 Compare January 2, 2020 14:40

orta mentioned this pull request Jan 2, 2020

Website Internationalization Roadmap #100

Closed

12 tasks

orta added 3 commits January 2, 2020 15:57

Grab examples

0c0daf5

Make the default height the size of the window

d0851b0

Merge branch 'v2' of https://github.com/microsoft/TypeScript-website …

5e66299

…into v2-playground

orta added 2 commits January 2, 2020 16:28

Bring back clicking on links

63fdbf9

Add/remove the examples

259a9e3

orta mentioned this pull request Jan 3, 2020

Provide compilation output for .js files #169

Closed

orta added 5 commits January 3, 2020 11:05

Migrate from pirate to leet, adds initial work for showing compiler c…

b0bb817

…onfig options in the playground

Compiler options

3a6c116

Adds compiler settings to the new playground

aaa832b

Add some dropdowns

b6a116e

Handle updating the compiler flags

ca89abb

Test fixes

0792608

orta merged commit 9142e61 into v2 Jan 6, 2020

This was referenced Sep 17, 2020

fix: remove extraneous declaration in relatedTo #1095

Merged

fix: allowJs and checkJs shouldn't be relatedTo emitDeclarationOnly #1098

Closed

jakebailey deleted the v2-playground branch May 17, 2024 22:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

V2 Playground#163

V2 Playground#163
orta merged 34 commits intov2from
v2-playground

orta commented Dec 26, 2019 •

edited

Loading

Uh oh!

github-actions bot commented Dec 26, 2019 •

edited

Loading

Uh oh!

orta commented Jan 6, 2020

Uh oh!

orta commented Jan 6, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

orta commented Dec 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Typos for noImplicitAny.md

Typos for files.md

Typos for Basic_Options_6172.md

Typos for README.md

Typos for useDefineForClassFields.md

Typos for typeRoots.md

Typos for typeAcquisition.md

Typos for target.md

Typos for suppressImplicitAnyIndexErrors.md

Typos for stripInternal.md

Typos for strictFunctionTypes.md

Typos for strict.md

Typos for sourceMap.md

Typos for resolveJsonModule.md

Typos for removeComments.md

Typos for pretty.md

Typos for preserveSymlinks.md

Typos for preserveConstEnums.md

Typos for plugins.md

Typos for outFile.md

Typos for outDir.md

Typos for out.md

Typos for noImplicitUseStrict.md

Typos for noFallthroughCasesInSwitch.md

Typos for noEmitHelpers.md

Typos for noEmit.md

Typos for newLine.md

Typos for moduleResolution.md

Typos for mapRoot.md

Typos for lib.md

Typos for keyofStringsOnly.md

Typos for isolatedModules.md

Typos for inlineSourceMap.md

Typos for incremental.md

Typos for importHelpers.md

Typos for generateCpuProfile.md

Typos for files.md

Typos for extends.md

Typos for esModuleInterop.md

Typos for downlevelIteration.md

Typos for disableSourceOfProjectReferenceRedirect.md

Typos for declarationDir.md

Typos for declaration.md

Typos for charset.md

Typos for alwaysStrict.md

Typos for allowUmdGlobalAccess.md

Typos for allowSyntheticDefaultImports.md

Typos for README.md

Typos for README.md

Typos for README.md

Lighthouse Scores

/

/en/tsconfig

color-contrast

/docs/handbook/integrating-with-build-tools.html

Snapshots updated

backstop_default_Empty_Page_0_document_1_tablet.png

backstop_default_Empty_Page_0_document_2_computer.png

backstop_default_Index_0_document_0_phone.png

backstop_default_Index_0_document_1_tablet.png

backstop_default_Index_0_document_2_computer.png

backstop_default_Old_Handbook_Example_0_viewport_0_phone.png

backstop_default_Old_Handbook_Example_0_viewport_1_tablet.png

backstop_default_Old_Handbook_Example_0_viewport_2_computer.png

backstop_default_TSConfig_Example_0_viewport_0_phone.png

backstop_default_TSConfig_Example_0_viewport_1_tablet.png

backstop_default_TSConfig_Example_0_viewport_2_computer.png

Uh oh!

orta commented Jan 6, 2020

Uh oh!

orta commented Jan 6, 2020

Uh oh!

Reviewers

Assignees

orta commented Dec 26, 2019 •

edited

Loading

github-actions bot commented Dec 26, 2019 •

edited

Loading

`/`

`/en/tsconfig`

`/docs/handbook/integrating-with-build-tools.html`

`backstop_default_Empty_Page_0_document_1_tablet.png`

`backstop_default_Empty_Page_0_document_2_computer.png`

`backstop_default_Index_0_document_0_phone.png`

`backstop_default_Index_0_document_1_tablet.png`

`backstop_default_Index_0_document_2_computer.png`

`backstop_default_Old_Handbook_Example_0_viewport_0_phone.png`

`backstop_default_Old_Handbook_Example_0_viewport_1_tablet.png`

`backstop_default_Old_Handbook_Example_0_viewport_2_computer.png`

`backstop_default_TSConfig_Example_0_viewport_0_phone.png`

`backstop_default_TSConfig_Example_0_viewport_1_tablet.png`

`backstop_default_TSConfig_Example_0_viewport_2_computer.png`