Twoslashify the homepage
This commit is contained in:
Orta
Родитель
70b8dc8f08
Коммит
85580b312f
|
|
@ -1 +1,2 @@
|
|||
packages/typescriptlang-org/src/**/*.tsx
|
||||
packages/typescriptlang-org/src/components/index/twoslash/*
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
"setup-playground-cache-bust": "node scripts/cacheBustPlayground.mjs",
|
||||
"setup-staging": "node scripts/setupStaging.mjs",
|
||||
"create-lighthouse-json": "node scripts/createLighthouseJSON.js",
|
||||
"compile-index-examples": "twoslash --reactAlso src/components/index/twoslash/*.ts src/components/index/twoslash/*.tsx src/components/index/twoslash/generated",
|
||||
"compile-index-examples": "twoslash --reactAlso src/components/index/twoslash/*.ts src/components/index/twoslash/*.js src/components/index/twoslash/*.tsx src/components/index/twoslash/generated",
|
||||
"start": "gatsby develop",
|
||||
"serve": "gatsby serve",
|
||||
"test": "yarn tsc && jest"
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
"sass": "^1.26.10",
|
||||
"ts-debounce": "^2.2.0",
|
||||
"ts-node": "^8.6.2",
|
||||
"twoslash-cli": "^1.3.2",
|
||||
"twoslash-cli": "^1.3.3",
|
||||
"typescript": "*",
|
||||
"xml-js": "^1.6.11"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,42 +1,13 @@
|
|||
import React from "react"
|
||||
import {Code as Index1} from "./twoslash/generated/IndexGetStarted1.js"
|
||||
import {Code as Index2} from "./twoslash/generated/IndexGetStarted2.js"
|
||||
import {Code as Index3} from "./twoslash/generated/IndexGetStarted3.js"
|
||||
import {Code as Index4} from "./twoslash/generated/IndexGetStarted4"
|
||||
|
||||
type StepProps = {
|
||||
i: (str: any) => string
|
||||
}
|
||||
|
||||
const one =`
|
||||
function compact(arr) {
|
||||
if (orr.length > 10)
|
||||
return arr.trim(0, 10)
|
||||
return arr
|
||||
}`.trim()
|
||||
|
||||
const two =`
|
||||
// @ts-check
|
||||
|
||||
function compact(arr) {
|
||||
if (orr.length > 10)
|
||||
return arr.trim(0, 10)
|
||||
return arr
|
||||
}`.trim()
|
||||
|
||||
const three =`
|
||||
// @ts-check
|
||||
|
||||
/** @param {any[]} arr */
|
||||
function compact(arr) {
|
||||
if (arr.length > 10)
|
||||
return arr.trim(0, 10)
|
||||
return arr
|
||||
}`.trim()
|
||||
|
||||
const four = `
|
||||
function compact(arr: string[]) {
|
||||
if (arr.length > 10)
|
||||
return arr.slice(0, 10)
|
||||
return arr
|
||||
}`.trim()
|
||||
|
||||
const Stepper = (props: { index: number }) => {
|
||||
return <div className="adopt-step-stepper">
|
||||
<div className={"first" + (props.index === 0 ? " yellow" : "") }></div>
|
||||
|
|
@ -50,7 +21,7 @@ const Stepper = (props: { index: number }) => {
|
|||
export const StepOne = (props: StepProps) => {
|
||||
return (
|
||||
<div className="adopt-step">
|
||||
<pre><code>{one}</code></pre>
|
||||
<Index1 />
|
||||
<p>JavaScript File</p>
|
||||
<Stepper index={0} />
|
||||
</div>
|
||||
|
|
@ -60,7 +31,7 @@ export const StepOne = (props: StepProps) => {
|
|||
export const StepTwo = (props: StepProps) => {
|
||||
return (
|
||||
<div className="adopt-step">
|
||||
<pre><code>{one}</code></pre>
|
||||
<Index2 />
|
||||
<p>JavaScript with TS Check</p>
|
||||
<Stepper index={1} />
|
||||
</div>
|
||||
|
|
@ -70,7 +41,7 @@ export const StepTwo = (props: StepProps) => {
|
|||
export const StepThree = (props: StepProps) => {
|
||||
return (
|
||||
<div className="adopt-step">
|
||||
<pre><code>{one}</code></pre>
|
||||
<Index3 />
|
||||
<p>JavaScript with JSDoc</p>
|
||||
<Stepper index={2} />
|
||||
</div>
|
||||
|
|
@ -80,7 +51,7 @@ export const StepThree = (props: StepProps) => {
|
|||
export const StepFour = (props: StepProps) => {
|
||||
return (
|
||||
<div className="adopt-step">
|
||||
<pre><code>{one}</code></pre>
|
||||
<Index4 />
|
||||
<p>TypeScript File</p>
|
||||
<Stepper index={3} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
// twoslash: { themes: ["../../../packages/typescriptlang-org/lib/themes/typescript-beta-light"] }
|
||||
// @noErrors
|
||||
type Result = "pass" | "fail"
|
||||
|
||||
function verify(result: Result) {
|
||||
if (result === "pass") {
|
||||
console.log("Passed")
|
||||
} else {
|
||||
console.log("Failed")
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// twoslash: { themes: ["../../../packages/typescriptlang-org/lib/themes/typescript-beta-light"] }
|
||||
// codefence: {1}
|
||||
type Result = "pass" | "fail"
|
||||
|
||||
function verify(result: Result) {
|
||||
// ^^^^^^^^
|
||||
if (result === "pass") {
|
||||
console.log("Passed")
|
||||
} else {
|
||||
console.log("Failed")
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// twoslash: { themes: ["../../../packages/typescriptlang-org/lib/themes/typescript-beta-light"] }
|
||||
|
||||
|
||||
function verify(result) {
|
||||
if (result === "pass") {
|
||||
console.log("Passed")
|
||||
} else {
|
||||
console.log("Failed")
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
interface Account {
|
||||
id: number
|
||||
displayName: string
|
||||
version: 1
|
||||
}
|
||||
|
||||
function welcome(user: Account) {
|
||||
console.log(user.id)
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
type Result = "pass" | "fail"
|
||||
|
||||
function verify(result: Result) {
|
||||
if (result === "pass") {
|
||||
console.log("Passed")
|
||||
} else {
|
||||
console.log("Failed")
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
function compact(arr) {
|
||||
if (orr.length > 10)
|
||||
return arr.trim(0, 10)
|
||||
return arr
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// @errors: 2304
|
||||
// @noImplicitAny: false
|
||||
// @ts-check
|
||||
|
||||
function compact(arr) {
|
||||
if (orr.length > 10)
|
||||
return arr.trim(0, 10)
|
||||
return arr
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// @ts-check
|
||||
// @errors: 2339
|
||||
|
||||
/** @param {any[]} arr */
|
||||
function compact(arr) {
|
||||
if (arr.length > 10)
|
||||
return arr.trim(0, 10)
|
||||
return arr
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
function compact(arr: string[]) {
|
||||
if (arr.length > 10)
|
||||
return arr.slice(0, 10)
|
||||
return arr
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from Index2Del1TS.ts.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki typescript-beta-light twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"pass"</span><span style="color: #000000"> | </span><span style="color: #A31515">"fail"</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verify(result: Result): void' >verify</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"pass"</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Passed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Failed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from Index2Del2RM.ts.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki typescript-beta-light twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line dim'><span style="color: #008000">// codefence: {1}</span></div><div class='line highlight'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"pass"</span><span style="color: #000000"> | </span><span style="color: #A31515">"fail"</span></div><div class='line dim'> </div><div class='line dim'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verify(result: Result): void' >verify</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000">) {</span></div><div class='line dim'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"pass"</span><span style="color: #000000">) {</span></div><div class='line dim'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Passed"</span><span style="color: #000000">)</span></div><div class='line dim'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line dim'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Failed"</span><span style="color: #000000">)</span></div><div class='line dim'><span style="color: #000000"> }</span></div><div class='line dim'><span style="color: #000000">}</span></div><div class='line dim'> </div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from Index2Del3JS.js.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki typescript-beta-light twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container'><code><div class='line'> </div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verify(result: any): void' >verify</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) result: any' >result</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) result: any' >result</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"pass"</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Passed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Failed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from IndexAdoptGrad1.ts.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #0000FF">interface</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='interface Account' >Account</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) Account.id: number' >id</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99">number</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) Account.displayName: string' >displayName</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99">string</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) Account.version: 1' >version</data-lsp></span><span style="color: #000000">: </span><span style="color: #098658">1</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function welcome(user: Account): void' >welcome</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) user: Account' >user</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='interface Account' >Account</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) user: Account' >user</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) Account.id: number' >id</data-lsp></span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from IndexAdoptGrad2.ts.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"pass"</span><span style="color: #000000"> | </span><span style="color: #A31515">"fail"</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verify(result: Result): void' >verify</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"pass"</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Passed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Failed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from IndexGetStarted1.js.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function compact(arr: any): any' >compact</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any' >arr</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='any' >orr</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >length</data-lsp></span><span style="color: #000000"> > </span><span style="color: #098658">10</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any' >arr</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='any' >trim</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #098658">10</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any' >arr</data-lsp></span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from IndexGetStarted2.js.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #008000">// @ts-check</span></div><div class='line'> </div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function compact(arr: any): any' >compact</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any' >arr</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-err><data-lsp lsp='any' >orr</data-lsp></data-err></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='any' >length</data-lsp></span><span style="color: #000000"> > </span><span style="color: #098658">10</span><span style="color: #000000">)</span></div><span class="error"><span>Cannot find name 'orr'.</span><span class="code">2304</span></span><span class="error-behind">Cannot find name 'orr'.</span><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any' >arr</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='any' >trim</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #098658">10</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any' >arr</data-lsp></span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from IndexGetStarted3.js.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #008000">// @ts-check</span></div><div class='line'> </div><div class='line'><span style="color: #008000">/** </span><span style="color: #0000FF">@param</span><span style="color: #008000"> </span><span style="color: #267F99">{any[]}</span><span style="color: #008000"> </span><span style="color: #001080">arr</span><span style="color: #008000"> */</span></div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function compact(arr: any[]): any' >compact</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) Array<any>.length: number' >length</data-lsp></span><span style="color: #000000"> > </span><span style="color: #098658">10</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-err><data-lsp lsp='any' >trim</data-lsp></data-err></span><span style="color: #000000">(</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #098658">10</span><span style="color: #000000">)</span></div><span class="error"><span>Property 'trim' does not exist on type 'any[]'.</span><span class="code">2339</span></span><span class="error-behind">Property 'trim' does not exist on type 'any[]'.</span><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span></div><div class='line'><span style="color: #000000"> }</span></div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Auto-generated by the twoslash-cli from IndexGetStarted4.ts.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function compact(arr: string[]): string[]' >compact</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) arr: string[]' >arr</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99">string</span><span style="color: #000000">[]) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) arr: string[]' >arr</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) Array<string>.length: number' >length</data-lsp></span><span style="color: #000000"> > </span><span style="color: #098658">10</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) arr: string[]' >arr</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Array<string>.slice(start?: number | undefined, end?: number | undefined): string[]' >slice</data-lsp></span><span style="color: #000000">(</span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #098658">10</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(parameter) arr: string[]' >arr</data-lsp></span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// Auto-generated by the twoslash-cli from JSDoc.js.md
|
||||
import React from "react"
|
||||
|
||||
const innerHTML = `
|
||||
<pre class="shiki min-dark twoslash lsp" style="background-color: #1f1f1f; color: #b392f0"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #4E5761">// @ts-check</span></div><div class='line'> </div><div class='line'><span style="color: #4E5761">/** </span><span style="color: #F97583">@param</span><span style="color: #4E5761"> </span><span style="color: #B392F0">{any[]}</span><span style="color: #4E5761"> arr */</span></div><div class='line'><span style="color: #F97583">function</span><span style="color: #B392F0"> <data-lsp lsp='function compact(arr: any[]): any' >compact</data-lsp>(<data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp>) {</span></div><div class='line'><span style="color: #B392F0"> </span><span style="color: #F97583">if</span><span style="color: #B392F0"> (</span><span style="color: #79B8FF"><data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span><span style="color: #B392F0">.</span><span style="color: #79B8FF"><data-lsp lsp='(property) Array<any>.length: number' >length</data-lsp></span><span style="color: #B392F0"> </span><span style="color: #F97583">></span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">10</span><span style="color: #B392F0">) </span><span style="color: #F97583">return</span><span style="color: #B392F0"> </span><span style="color: #79B8FF"><data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span><span style="color: #B392F0">.<data-err><data-lsp lsp='any' >trim</data-lsp></data-err>(</span><span style="color: #F8F8F8">0</span><span style="color: #B392F0">, </span><span style="color: #F8F8F8">10</span><span style="color: #B392F0">)</span></div><span class="error"><span>Property 'trim' does not exist on type 'any[]'.</span><span class="code">2339</span></span><span class="error-behind">Property 'trim' does not exist on type 'any[]'.</span><div class='line'><span style="color: #B392F0"> </span><span style="color: #F97583">return</span><span style="color: #B392F0"> <data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span></div><div class='line'><span style="color: #B392F0">}</span></div><div class='line'> </div></code></div></pre>
|
||||
<pre class="shiki min-light twoslash lsp" style="background-color: #ffffff; color: #24292eff"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #C2C3C5">// @ts-check</span></div><div class='line'> </div><div class='line'><span style="color: #C2C3C5">/** </span><span style="color: #D32F2F">@param</span><span style="color: #C2C3C5"> </span><span style="color: #6F42C1">{any[]}</span><span style="color: #C2C3C5"> arr */</span></div><div class='line'><span style="color: #D32F2F">function</span><span style="color: #24292EFF"> </span><span style="color: #6F42C1"><data-lsp lsp='function compact(arr: any[]): any' >compact</data-lsp></span><span style="color: #24292EFF">(<data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp>) {</span></div><div class='line'><span style="color: #24292EFF"> </span><span style="color: #D32F2F">if</span><span style="color: #24292EFF"> (</span><span style="color: #1976D2"><data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span><span style="color: #24292EFF">.</span><span style="color: #1976D2"><data-lsp lsp='(property) Array<any>.length: number' >length</data-lsp></span><span style="color: #24292EFF"> </span><span style="color: #D32F2F">></span><span style="color: #24292EFF"> </span><span style="color: #1976D2">10</span><span style="color: #24292EFF">) </span><span style="color: #D32F2F">return</span><span style="color: #24292EFF"> </span><span style="color: #1976D2"><data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span><span style="color: #6F42C1">.<data-err><data-lsp lsp='any' >trim</data-lsp></data-err></span><span style="color: #24292EFF">(</span><span style="color: #1976D2">0</span><span style="color: #24292EFF">, </span><span style="color: #1976D2">10</span><span style="color: #24292EFF">)</span></div><span class="error"><span>Property 'trim' does not exist on type 'any[]'.</span><span class="code">2339</span></span><span class="error-behind">Property 'trim' does not exist on type 'any[]'.</span><div class='line'><span style="color: #24292EFF"> </span><span style="color: #D32F2F">return</span><span style="color: #24292EFF"> <data-lsp lsp='(parameter) arr: any[]' >arr</data-lsp></span></div><div class='line'><span style="color: #24292EFF">}</span></div><div class='line'> </div></code></div></pre>
|
||||
`
|
||||
|
||||
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// twoslash: { themes: ["min-dark", "../../../packages/typescriptlang-org/lib/themes/typescript-beta-dark"] }
|
||||
// twoslash: { themes: ["min-dark", "../../../packages/typescriptlang-org/lib/themes/typescript-beta-dark"], disableImplicitReactImport: true }
|
||||
import * as React from "react";
|
||||
|
||||
interface UserThumbnailProps {
|
||||
|
|
|
|||
|
|
@ -46,11 +46,7 @@ export const workbenchDebugPlugin: PluginFactory = (i, utils) => {
|
|||
dtsFiles.push(filename.replace("/lib", "lib"))
|
||||
} else {
|
||||
ds.p("<strong>" + filename + "</strong>")
|
||||
|
||||
const p = ds.p("")
|
||||
const code = document.createElement("code")
|
||||
code.innerText = dtsMap.get(filename)!.trim()
|
||||
p.appendChild(code)
|
||||
ds.code(dtsMap.get(filename)!.trim())
|
||||
}
|
||||
})
|
||||
ds.subtitle("Lib files")
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export const indexCopy = {
|
|||
// Quick pitch
|
||||
index_2_what_is: "What is TypeScript?",
|
||||
index_2_what_is_js: "JavaScript and More",
|
||||
|
||||
index_2_what_is_js_copy: `TypeScript adds additional syntax to JavaScript to support a <strong>tighter integration with your editor</strong>. Catch errors early in your editor.`,
|
||||
index_2_trust: "A Result You Can Trust",
|
||||
index_2_trust_copy: `TypeScript code converts to JavaScript which <strong>runs anywhere JavaScript runs</strong>: In a browser, on Node.js or Deno and in your apps.`,
|
||||
|
|
@ -57,7 +58,7 @@ export const indexCopy = {
|
|||
// Adopt TS gradually animations
|
||||
index_2_adopt: "Adopt TypeScript Gradually",
|
||||
index_2_adopt_blurb_1:
|
||||
"Apply types to your JavaScript project incrementally, <strong>each step improves editor support</strong> and tightens your codebase.",
|
||||
"Apply types to your JavaScript project incrementally, <strong>each step improves editor support</strong> and improves your codebase.",
|
||||
index_2_adopt_blurb_2:
|
||||
"Lets take this this incorrect JavaScript code, and see how <strong>TypeScript can catch mistakes in your editor</strong>.",
|
||||
|
||||
|
|
|
|||
|
|
@ -529,12 +529,15 @@ $headline-foreground-bg: white;
|
|||
border: 1px solid #000000;
|
||||
color: black;
|
||||
height: 342px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
border-color: $ts-main-blue-color;
|
||||
border-width: 2px;
|
||||
box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.25);
|
||||
max-width: 246px;
|
||||
height: 344px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
&:active {
|
||||
background-color: #eeeeee;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,14 @@ import "../pages/css/documentation.scss"
|
|||
import { createIntlLink } from "../../components/IntlLink"
|
||||
import { AboveTheFold } from "../../components/index/AboveTheFold2"
|
||||
|
||||
import {Code as Grad1} from "../../components/index/twoslash/generated/IndexAdoptGrad1"
|
||||
import {Code as Grad2} from "../../components/index/twoslash/generated/IndexAdoptGrad2"
|
||||
|
||||
import {Code as Del1} from "../../components/index/twoslash/generated/Index2Del1TS"
|
||||
import {Code as Del2} from "../../components/index/twoslash/generated/Index2Del2RM"
|
||||
import {Code as Del3} from "../../components/index/twoslash/generated/Index2Del3JS.js"
|
||||
|
||||
|
||||
const Section = (props: { children: any, color: string, className?: string }) =>
|
||||
<div key={props.color} className={props.color + " " + (props.className ?? "")}><div className="container">{props.children}</div></div>
|
||||
|
||||
|
|
@ -136,25 +144,10 @@ const Index: React.FC<Props> = (props) => {
|
|||
<P ikey="index_2_describe_blurb2" />
|
||||
</Col>
|
||||
<Col key='ex1'>
|
||||
<pre><code>{`interface UserAccount {
|
||||
id: number
|
||||
displayName: string
|
||||
}
|
||||
|
||||
function welcome(user: UserAccount) {
|
||||
console.log(user.id)
|
||||
}`}</code></pre>
|
||||
<Grad1 />
|
||||
</Col>
|
||||
<Col key='ex2'>
|
||||
<pre><code>{`type Result = “pass” | “fail”
|
||||
|
||||
function process(result: Result) {
|
||||
if (result === “pass”) {
|
||||
console.log(“Passed”)
|
||||
} else {
|
||||
console.log(“Failed”)
|
||||
}
|
||||
}`}</code></pre>
|
||||
<Grad2 />
|
||||
</Col>
|
||||
</Row>
|
||||
</Section>
|
||||
|
|
@ -164,43 +157,18 @@ function process(result: Result) {
|
|||
<h2 id='via-delete-key'>{i("index_2_transform")}</h2>
|
||||
<Row>
|
||||
<Col key='title'>
|
||||
<pre><code>{`type Result = “pass” | “fail”
|
||||
|
||||
function process(result: Result) {
|
||||
if (result === “pass”) {
|
||||
console.log(“Passed”)
|
||||
} else {
|
||||
console.log(“Failed”)
|
||||
}
|
||||
}`}</code></pre>
|
||||
<P ikey="index_2_transform_1"/>
|
||||
|
||||
<Del1 />
|
||||
<P ikey="index_2_transform_1"/>
|
||||
</Col>
|
||||
<Col key='ex1'>
|
||||
<pre><code>{`type Result = “pass” | “fail”
|
||||
|
||||
function process(result: Result) {
|
||||
if (result === “pass”) {
|
||||
console.log(“Passed”)
|
||||
} else {
|
||||
console.log(“Failed”)
|
||||
}
|
||||
}`}</code></pre>
|
||||
<Col key='ex1'>
|
||||
<Del2 />
|
||||
<P ikey="index_2_transform_2"/>
|
||||
</Col>
|
||||
|
||||
<Col key='ex2'>
|
||||
<pre><code>{`
|
||||
|
||||
function process(result) {
|
||||
if (result === “pass”) {
|
||||
console.log(“Passed”)
|
||||
} else {
|
||||
console.log(“Failed”)
|
||||
}
|
||||
}`}</code></pre>
|
||||
<P ikey="index_2_transform_3"/>
|
||||
|
||||
<Del3 />
|
||||
<P ikey="index_2_transform_3"/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"include": ["./src/**/*"],
|
||||
"exclude": ["./src/components/index/twoslash/**.*"],
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "commonjs",
|
||||
|
|
|
|||
54
yarn.lock
54
yarn.lock
|
|
@ -5379,7 +5379,18 @@ __metadata:
|
|||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@typescript/twoslash@2.2.0, @typescript/twoslash@workspace:packages/ts-twoslasher":
|
||||
"@typescript/twoslash@npm:2.2.0":
|
||||
version: 2.2.0
|
||||
resolution: "@typescript/twoslash@npm:2.2.0"
|
||||
dependencies:
|
||||
"@typescript/vfs": 1.3.4
|
||||
debug: ^4.1.1
|
||||
lz-string: ^1.4.4
|
||||
checksum: fac5b861c8f0249c6828f0493f0065fa110bf60ad58a87e351f457524ab1c9caddb03f4e44a980ca5381019daf1629a589e0291d0505082779b77393b4ad3a82
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@typescript/twoslash@workspace:packages/ts-twoslasher":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@typescript/twoslash@workspace:packages/ts-twoslasher"
|
||||
dependencies:
|
||||
|
|
@ -23658,6 +23669,23 @@ fsevents@^1.2.7:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"remark-shiki-twoslash@npm:2.0.5":
|
||||
version: 2.0.5
|
||||
resolution: "remark-shiki-twoslash@npm:2.0.5"
|
||||
dependencies:
|
||||
"@typescript/twoslash": 2.2.0
|
||||
"@typescript/vfs": 1.3.4
|
||||
fenceparser: ^1.1.0
|
||||
regenerator-runtime: ^0.13.7
|
||||
shiki: 0.9.3
|
||||
shiki-twoslash: 2.1.3
|
||||
tslib: 2.1.0
|
||||
typescript: ">3"
|
||||
unist-util-visit: ^2.0.0
|
||||
checksum: f72c8f80369076320775cddcaedcb7e0e73f09a79d813405fcc90b199ad7a3b41967d105bb1815755a58e2e65ad0638ce0a6f28b357e81917afe03a05234abc0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"remark-stringify@npm:^7.0.0":
|
||||
version: 7.0.4
|
||||
resolution: "remark-stringify@npm:7.0.4"
|
||||
|
|
@ -24910,6 +24938,18 @@ resolve@^2.0.0-next.3:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"shiki-twoslash@npm:2.1.3":
|
||||
version: 2.1.3
|
||||
resolution: "shiki-twoslash@npm:2.1.3"
|
||||
dependencies:
|
||||
"@typescript/twoslash": 2.2.0
|
||||
"@typescript/vfs": 1.3.4
|
||||
shiki: 0.9.3
|
||||
typescript: ">3"
|
||||
checksum: 5c66e16db2c0c27be9b80d711c45e5578771bfc88fb8be4286aad510e185b638758295ef587f3fdd5427171adfb052d05c74740038fb495071f537e21c0126b9
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"shiki@npm:0.9.3":
|
||||
version: 0.9.3
|
||||
resolution: "shiki@npm:0.9.3"
|
||||
|
|
@ -26949,21 +26989,21 @@ resolve@^2.0.0-next.3:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"twoslash-cli@npm:^1.3.2":
|
||||
version: 1.3.2
|
||||
resolution: "twoslash-cli@npm:1.3.2"
|
||||
"twoslash-cli@npm:^1.3.3":
|
||||
version: 1.3.3
|
||||
resolution: "twoslash-cli@npm:1.3.3"
|
||||
dependencies:
|
||||
chokidar: ^3.5.2
|
||||
commander: ^7.2.0
|
||||
hast-util-to-html: ^7.1.2
|
||||
mdast-util-to-hast: ^10.0.0
|
||||
remark: ^13.0.0
|
||||
remark-shiki-twoslash: 2.0.4
|
||||
remark-shiki-twoslash: 2.0.5
|
||||
unist-util-visit: ^3.1.0
|
||||
bin:
|
||||
twoslash: bin/twoslash.js
|
||||
twoslash-cli: bin/twoslash.js
|
||||
checksum: 0aa62ab7d60ba638d5a9aae481fd3cbd31e3feee87a52d284b54c914139bbfd7a80ea86f2a0190dd3b84bb8d89c4fd1919dbd1c7fcdb4935ab1e34426d3f380f
|
||||
checksum: a018fa8319872e36ae97a76e1d6ac268b429f32ab80c35939429fc9a8326728036c9d3e64d546d7acac647f99b5734728a2f3e296975d176745b11d7fba3fd94
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
|
@ -27148,7 +27188,7 @@ resolve@^2.0.0-next.3:
|
|||
ts-debounce: ^2.2.0
|
||||
ts-jest: ^26.4.4
|
||||
ts-node: ^8.6.2
|
||||
twoslash-cli: ^1.3.2
|
||||
twoslash-cli: ^1.3.3
|
||||
typescript: "*"
|
||||
xml-js: ^1.6.11
|
||||
languageName: unknown
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче