chore: strip types when using ts.

Author: knightedcodemonkey

playwright/app.spec.ts

@@ -8,6 +8,11 @@ const waitForInitialRender = async (page: Page) => {
   await expect(page.locator('#cdn-loading')).toHaveAttribute('hidden', '')
 }
 
+const setComponentEditorSource = async (page: Page, source: string) => {
+  const editorContent = page.locator('.component-panel .cm-content').first()
+  await editorContent.fill(source)
+}
+
 test('renders default playground preview', async ({ page }) => {
   await waitForInitialRender(page)
 
@@ -49,6 +54,22 @@ test('renders in react mode with css modules', async ({ page }) => {
   await expect(previewItems.first()).toContainText('apple')
 })
 
+test('transpiles TypeScript annotations in component source', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await page.getByLabel('ShadowRoot (open)').uncheck()
+  await setComponentEditorSource(
+    page,
+    [
+      'const Button = ({ label }: { label: string }): unknown => <button>{label}</button>',
+      'const App = () => <Button label="typed" />',
+    ].join('\n'),
+  )
+
+  await expect(page.locator('#status')).toHaveText('Rendered')
+  await expect(page.locator('#preview-host button')).toContainText('typed')
+})
+
 test('shows error status when component source is cleared', async ({ page }) => {
   await waitForInitialRender(page)
 

src/app.js

@@ -594,8 +594,7 @@ const remapReactClassNames = (value, moduleExports, React) => {
   return React.cloneElement(value, nextProps)
 }
 
-const looksLikeJsxSyntaxError = error =>
-  error instanceof SyntaxError && /Unexpected token ['"]?</.test(error.message)
+const shouldAttemptTranspileFallback = error => error instanceof SyntaxError
 
 const createUserModuleFactory = source =>
   new Function(
@@ -794,7 +793,7 @@ const evaluateUserModule = async (helpers = {}) => {
     const moduleFactory = createUserModuleFactory(userCode)
     return moduleFactory(helpers.jsx ?? jsx, helpers.reactJsx, helpers.React)
   } catch (error) {
-    if (!looksLikeJsxSyntaxError(error)) {
+    if (!shouldAttemptTranspileFallback(error)) {
       throw error
     }
 
@@ -804,11 +803,13 @@ const evaluateUserModule = async (helpers = {}) => {
         sourceType: 'script',
         createElement: 'jsx.createElement',
         fragment: 'jsx.Fragment',
+        typescript: 'strip',
       },
       react: {
         sourceType: 'script',
         createElement: 'React.createElement',
         fragment: 'React.Fragment',
+        typescript: 'strip',
       },
     }
     const transpiledUserCode = transpileJsxSource(