Merge branch 'main' of https://github.com/esbuild/esbuild.github.io i…

…nto sync-10ead9bf
docschina · Mar 18, 2024 · 63c0ce0 · 63c0ce0
2 parents e090325 + 10ead9b
commit 63c0ce0
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 22 deletions.
diff --git a/src/content/getting-started.yml b/src/content/getting-started.yml
@@ -533,7 +533,7 @@ body:
       let ts = 'let test: boolean = true'
       let result = await esbuild.transform(ts, { loader: 'ts' })
       console.log('result:', result)
-      esbuild.stop()
+      await esbuild.stop()
 
   - p: >
       It has basically the same API as esbuild's npm package with one addition:
@@ -551,7 +551,7 @@ body:
       let ts = 'let test: boolean = true'
       let result = await esbuild.transform(ts, { loader: 'ts' })
       console.log('result:', result)
-      esbuild.stop()
+      await esbuild.stop()
 
   - p: >
       Using WebAssembly instead of native means you do not need to specify Deno's

diff --git a/src/try/index.css b/src/try/index.css
@@ -199,10 +199,15 @@ textarea:focus {
   top: 100%;
   right: 0;
   font-size: 12px;
+}
+
+a.underLink,
+.underLink a {
   opacity: 0.5;
 }
 
-.underLink:hover {
+a.underLink:hover,
+.underLink a:hover {
   opacity: 1;
 }
 

diff --git a/src/try/options.ts b/src/try/options.ts
@@ -101,45 +101,107 @@ export function parseOptions(input: string, mode: Mode, switcherEl: HTMLDivEleme
         else if (supported[key] === 'false') supported[key] = false
       }
     }
+  }
 
-    // Parsing this makes it more readable when printing it as JSON
-    if (options['tsconfigRaw'] !== undefined) {
-      try {
-        options['tsconfigRaw'] = JSON.parse(options['tsconfigRaw'])
-      } catch {
-      }
+  // Parsing this makes it more readable when printing it as JSON
+  let tsconfigRaw = options['tsconfigRaw']
+  if (tsconfigRaw !== undefined) {
+    try {
+      tsconfigRaw = JSON.parse(tsconfigRaw)
+    } catch {
     }
   }
 
-  // Optionally provide a way to switch between the two types of options
+  // Optionally add additional UI if relevant
   if (switcherEl) {
-    let args: string | undefined
-    const a = document.createElement('a')
-    a.href = 'javascript:void 0'
     switcherEl.innerHTML = ''
+    addTypeScriptExperimentalDecoratorUI(switcherEl, isJSON, options, tsconfigRaw, input)
+    addSyntaxSwitcherUI(switcherEl, isJSON, options, tsconfigRaw)
+  }
+
+  return options
+}
+
+// Make it easier to enable TypeScript decorators
+function addTypeScriptExperimentalDecoratorUI(el: HTMLElement, isJSON: boolean, options: Readonly<Record<string, any>>, tsconfigRaw: any, input: string): void {
+  if (tsconfigRaw === undefined) tsconfigRaw = {}
+  if (typeof tsconfigRaw !== 'object') return
+
+  let compilerOptions = tsconfigRaw.compilerOptions
+  if (compilerOptions === undefined) compilerOptions = {}
+  if (typeof compilerOptions !== 'object') return
+
+  if ((options.loader === 'ts' || options.loader === 'tsx') && typeof compilerOptions.experimentalDecorators !== 'boolean') {
+    const newOptions = {
+      ...options,
+      tsconfigRaw: {
+        ...tsconfigRaw,
+        compilerOptions: {
+          ...compilerOptions,
+          experimentalDecorators: true,
+        },
+      },
+    }
+
+    let args: string | undefined
     if (isJSON) {
+      args = printOptionsAsLooseJSON(newOptions)
+    } else if (options['tsconfigRaw'] === undefined) {
+      args = [
+        input,
+        /\n/.test(input) ? '\n' : ' ',
+        printOptionsAsShellArgs({ tsconfigRaw: newOptions.tsconfigRaw }),
+      ].join('')
+    } else {
       try {
-        args = printOptionsAsShellArgs(options)
-        a.textContent = 'Switch to CLI syntax'
+        args = printOptionsAsShellArgs(newOptions)
       } catch {
         // Not every JSON5 object is representable as CLI options, but that's ok
       }
-    } else {
-      args = printOptionsAsLooseJSON(options)
-      a.textContent = 'Switch to JS syntax'
     }
+
     if (args !== undefined) {
+      const a = document.createElement('a')
+      a.href = 'javascript:void 0'
+      a.textContent = 'Enable TS experimental decorators'
       a.onclick = () => {
-        const textareaEl = switcherEl.parentElement!.querySelector('textarea')!
-        switcherEl.innerHTML = ''
+        const textareaEl = el.parentElement!.querySelector('textarea')!
+        el.innerHTML = ''
         textareaEl.value = args!
         textareaEl.dispatchEvent(new Event('input'))
       }
-      switcherEl.append(a)
+      el.append(a, ' ')
     }
   }
+}
 
-  return options
+// Provide a way to switch between the two option syntaxes
+function addSyntaxSwitcherUI(el: HTMLElement, isJSON: boolean, options: Readonly<Record<string, any>>, tsconfigRaw: any): void {
+  let args: string | undefined
+  const a = document.createElement('a')
+
+  if (isJSON) {
+    try {
+      args = printOptionsAsShellArgs(options)
+      a.textContent = 'Switch to CLI syntax'
+    } catch {
+      // Not every JSON5 object is representable as CLI options, but that's ok
+    }
+  } else {
+    args = printOptionsAsLooseJSON(tsconfigRaw ? { ...options, tsconfigRaw } : options)
+    a.textContent = 'Switch to JS syntax'
+  }
+
+  if (args !== undefined) {
+    a.href = 'javascript:void 0'
+    a.onclick = () => {
+      const textareaEl = el.parentElement!.querySelector('textarea')!
+      el.innerHTML = ''
+      textareaEl.value = args!
+      textareaEl.dispatchEvent(new Event('input'))
+    }
+    el.append(a)
+  }
 }
 
 function parseOptionsAsShellArgs(input: string, mode: Mode): Record<string, any> {