fix(host): show console warning when trying to type check <script setup>

src/host.ts

@@ -1,6 +1,7 @@
 import * as ts from 'typescript'
+import { COLORS } from './utils'
 
-const scriptRegex = /<script.*>([\s\S]*)<\/script>/
+const scriptRegex = /<script(.*)>([\s\S]*)<\/script>/
 
 export function createHost(options: ts.CompilerOptions): ts.CompilerHost {
   const host = options.incremental
@@ -18,7 +19,14 @@ export function createHost(options: ts.CompilerOptions): ts.CompilerHost {
     if (!contents) return
     const match = scriptRegex.exec(contents)
     if (!match) return contents
-    return match[1]
+    if (match[1].includes('setup')) {
+      console.log(
+        COLORS.WARNING,
+        '<script setup> is not supported, file will be skipped'
+      )
+      return 'export default {}'
+    }
+    return match[2]
   }
   host.resolveModuleNames = (
     moduleNames: string[],

src/utils.ts

@@ -1,4 +1,5 @@
 export const COLORS = {
   SUCCESS: '\x1b[32m%s\x1b[0m',
   ERROR: '\x1b[31m%s\x1b[0m',
+  WARNING: '\x1b[1;33m%s\x1b[0m',
 } as const

tests/fixtures/src-setup-clean/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <p v-text="message" />
+    <Other />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Other from './Other.vue'
+import { message as importedMessage } from './messages'
+import { computed } from 'vue'
+
+const message = computed<string>(() => importedMessage)
+</script>

tests/fixtures/src-setup-clean/Other.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p v-text="message" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const message = computed<string>(() => 'Hello From Other')
+</script>

tests/fixtures/src-setup-clean/messages.ts

@@ -0,0 +1,3 @@
+export const message = 'Hello World' as const
+
+export default {}

tests/fixtures/src-setup-error/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <p v-text="message" />
+    <Other />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Other from './Other.vue'
+import { message as importedMessage } from './messages'
+import { computed } from 'vue'
+
+const message = computed<number>(() => importedMessage)
+</script>

tests/fixtures/src-setup-error/Other.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p v-text="message" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  computed: {
+    message: (): number => 'Hello From Other'
+  }
+}
+</script>

tests/fixtures/src-setup-error/messages.ts

@@ -0,0 +1 @@
+export const message = 'Hello World' as const

tests/fixtures/tsconfig.setup.clean.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "rootDir": "src-setup-clean",
+    "strict": true,
+    "noEmit": true
+  },
+  "include": [
+    "src-setup-clean/**/*.ts",
+    "src-setup-clean/**/*.vue"
+  ]
+}

tests/fixtures/tsconfig.setup.error.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "rootDir": "src-setup-error",
+    "strict": true,
+    "noEmit": true
+  },
+  "include": [
+    "src-setup-error/**/*.ts",
+    "src-setup-error/**/*.vue"
+  ]
+}

tests/index.spec.ts

@@ -54,7 +54,7 @@ describe('index', () => {
       } catch (err) {
         expect(consoleSpy).not.toBeCalled()
       }
-    })
+    }, 20000)
 
     test('throws errors in vue files', async () => {
       expect.hasAssertions()
@@ -65,13 +65,15 @@ describe('index', () => {
         })
         expect('Should not have passed').toBeFalsy()
       } catch (err) {
-        expect(err.message).toBe('Type Check returned errors, see above')
+        expect((err as Error).message).toBe(
+          'Type Check returned errors, see above'
+        )
         expect(consoleSpy).toBeCalledTimes(1)
         expect(consoleSpy.mock.calls[0][1]).toContain(
           "/tests/fixtures/src-error-vue/App.vue (14,7): Type 'string' is not assignable to type 'number'."
         )
       }
-    })
+    }, 20000)
 
     test('throws errors in imported files', async () => {
       expect.hasAssertions()
@@ -82,9 +84,9 @@ describe('index', () => {
         })
         expect('Should not have passed').toBeFalsy()
       } catch (err) {
-        errorTSExpectations(err)
+        errorTSExpectations(err as Error)
       }
-    })
+    }, 20000)
 
     test('respects exclude option', async () => {
       expect.assertions(1)
@@ -97,7 +99,7 @@ describe('index', () => {
       } catch (err) {
         expect(consoleSpy).not.toBeCalled()
       }
-    })
+    }, 20000)
 
     test('respects files option', async () => {
       expect.assertions(1)
@@ -110,7 +112,7 @@ describe('index', () => {
       } catch (err) {
         expect(consoleSpy).not.toBeCalled()
       }
-    })
+    }, 20000)
 
     test('respects include option', async () => {
       expect.assertions(1)
@@ -123,7 +125,7 @@ describe('index', () => {
       } catch (err) {
         expect(consoleSpy).not.toBeCalled()
       }
-    })
+    }, 20000)
 
     test('performs incremental builds (clean)', async () => {
       expect.hasAssertions()
@@ -164,7 +166,7 @@ describe('index', () => {
         await runTSC()
         expect('Should not have passed').toBeFalsy()
       } catch (err) {
-        errorTSExpectations(err)
+        errorTSExpectations(err as Error)
         await checkBuildFile(buildInfo, ['app.vue', 'messages.ts'])
 
         // check that the build info file is able to be read, this should take much less time
@@ -173,9 +175,50 @@ describe('index', () => {
           await runTSC()
           expect('Should not have passed').toBeFalsy()
         } catch (err) {
-          errorTSExpectations(err)
+          errorTSExpectations(err as Error)
         }
       }
     }, 20000)
+
+    test('warns about script setup (no errors)', async () => {
+      expect.hasAssertions()
+      try {
+        await tsc({
+          root: fixturesDir,
+          tsconfig: 'tsconfig.setup.clean.json',
+        })
+        expect(consoleSpy).toBeCalledTimes(2)
+        expect(consoleSpy.mock.calls[0][1]).toContain(
+          '<script setup> is not supported, file will be skipped'
+        )
+        expect(consoleSpy.mock.calls[1][1]).toContain(
+          '<script setup> is not supported, file will be skipped'
+        )
+      } catch (err) {
+        expect(err).toBeFalsy()
+      }
+    }, 20000)
+
+    test('warns about script setup but still errors in other files', async () => {
+      expect.hasAssertions()
+      try {
+        await tsc({
+          root: fixturesDir,
+          tsconfig: 'tsconfig.setup.error.json',
+        })
+        expect('Should not have passed').toBeFalsy()
+      } catch (err) {
+        expect((err as Error).message).toBe(
+          'Type Check returned errors, see above'
+        )
+        expect(consoleSpy).toBeCalledTimes(2)
+        expect(consoleSpy.mock.calls[0][1]).toContain(
+          '<script setup> is not supported, file will be skipped'
+        )
+        expect(consoleSpy.mock.calls[1][1]).toContain(
+          "/tests/fixtures/src-setup-error/Other.vue (10,28): Type 'string' is not assignable to type 'number'."
+        )
+      }
+    }, 20000)
   })
 })