chore: update TS config

demo/package.json

@@ -6,6 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
+    "types:build": "vue-tsc -p tsconfig.build.json",
+    "types:check": "vue-tsc --composite false",
     "preview": "vite preview"
   },
   "dependencies": {

demo/src/App.vue

@@ -1,70 +1,98 @@
 <script setup lang="ts">
 import CodeExample from './components/CodeExample.vue'
 import { snippetz } from '@scalar/snippetz'
-import { type ClientId, type TargetId} from '@scalar/snippetz-core'
+import { type ClientId, type TargetId } from '@scalar/snippetz-core'
 import { ref } from 'vue'
 
 const selectedTarget = ref<TargetId>('node')
 const selectedClient = ref<ClientId>('undici')
 
-function selectPlugin(plugin: { target: TargetId, client: ClientId }) {
+function selectPlugin(plugin: { target: TargetId; client: ClientId }) {
   selectedTarget.value = plugin.target
   selectedClient.value = plugin.client
 }
 </script>
 
 <template>
-  <h1>
-    Snippetz
-  </h1>
+  <h1>Snippetz</h1>
 
   <div class="introduction">
     <p>
-      @scalar/snippetz is a library that generates code snippets for making HTTP requests in Node.js and the browser.
+      @scalar/snippetz is a library that generates code snippets for making HTTP
+      requests in Node.js and the browser.
     </p>
   </div>
 
-  <h2>
-    Clients
-  </h2>
+  <h2>Clients</h2>
 
-  <button v-for="plugin in snippetz().plugins()" :key="plugin.client" class="client" :class="{ 'client--selected': selectedClient === plugin.client && selectedTarget === plugin.target }" @click="() => { selectPlugin(plugin) }">
-      {{ plugin.target }}/{{ plugin.client }}
+  <button
+    v-for="plugin in snippetz().plugins()"
+    :key="plugin.client"
+    class="client"
+    :class="{
+      'client--selected':
+        selectedClient === plugin.client && selectedTarget === plugin.target,
+    }"
+    @click="
+      () => {
+        selectPlugin(plugin)
+      }
+    "
+  >
+    {{ plugin.target }}/{{ plugin.client }}
   </button>
 
-  <h2>
-    Examples
-  </h2>
+  <h2>Examples</h2>
 
   <div class="examples">
-    <CodeExample :target="selectedTarget" :client="selectedClient" :request="{ url: 'https://example.com' }"/>
-    <CodeExample :target="selectedTarget" :client="selectedClient" :request="{ url: 'https://example.com', method: 'POST' }"/>
-    <CodeExample :target="selectedTarget" :client="selectedClient" :request="{ url: 'https://example.com', method: 'POST', headers: [
-      {
-        name: 'Content-Type',
-        value: 'application/json'
-      }
-    ]
-    }"/>
-    <CodeExample target="node" :client="selectedClient" :request="{
-      url: 'https://example.com',
-      method: 'POST',
-      headers: [
-        {
-          name: 'Content-Type',
-          value: 'application/json; charset=utf-8',
+    <CodeExample
+      :target="selectedTarget"
+      :client="selectedClient"
+      :request="{ url: 'https://example.com' }"
+    />
+    <CodeExample
+      :target="selectedTarget"
+      :client="selectedClient"
+      :request="{ url: 'https://example.com', method: 'POST' }"
+    />
+    <CodeExample
+      :target="selectedTarget"
+      :client="selectedClient"
+      :request="{
+        url: 'https://example.com',
+        method: 'POST',
+        headers: [
+          {
+            name: 'Content-Type',
+            value: 'application/json',
+          },
+        ],
+      }"
+    />
+    <CodeExample
+      target="node"
+      :client="selectedClient"
+      :request="{
+        url: 'https://example.com',
+        method: 'POST',
+        headers: [
+          {
+            name: 'Content-Type',
+            value: 'application/json; charset=utf-8',
+          },
+        ],
+        postData: {
+          mimeType: 'application/json',
+          text: JSON.stringify({ hello: 'world' }),
         },
-      ],
-      postData: {
-        mimeType: 'application/json',
-        text: JSON.stringify({ hello: 'world' })
-      }
-    }"/>
+      }"
+    />
   </div>
 </template>
 
 <style scoped>
-h1, h2 {
+h1,
+h2 {
   font-size: 1.2rem;
   margin: 2rem 0;
 }

demo/src/main.ts

@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import './style.css'
-// @ts-ignore TODO: Fix tsconfig in a separate PR
 import App from './App.vue'
 
 createApp(App).mount('#app')

demo/tsconfig.json

@@ -1,25 +1,19 @@
 {
+  "extends": "../tsconfig.json",
+  "include": ["./src"],
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "rootDir": "./src",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@test/*": ["./test/*"]
+    },
+    "types": ["vite/client"],
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/"
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "ts-node": {
+    "require": ["tsconfig-paths/register"]
+  }
 }

demo/vite.config.ts

@@ -1,25 +1,9 @@
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import path from 'path'
+import { defineConfig } from 'vitest/config'
 
-// https://vitejs.dev/config/
-export default defineConfig(({ command }) => {
-  return {
-    plugins: [vue()],
-    resolve:
-      command === 'serve'
-        ? {
-            alias: [
-              // Resolve the uncompiled source code for all @scalar packages.
-              {
-                find: /^@scalar\/([^/]+)$/,
-                replacement: path.resolve(
-                  __dirname,
-                  '../packages/$1/src/index.ts'
-                ),
-              },
-            ],
-          }
-        : {},
-  }
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    dedupe: ['vue'],
+  },
 })

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "dev": "pnpm --filter demo dev",
     "build": "turbo build",
     "lint": "pnpm -r lint:check",
     "lint:fix": "pnpm -r lint:fix",

packages/snippetz-core/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {},
+  "include": ["src", "rollup.config.ts"]
+}

packages/snippetz-plugin-js-fetch/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {},
+  "include": ["src", "rollup.config.ts"]
+}

packages/snippetz-plugin-js-ofetch/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {},
+  "include": ["src", "rollup.config.ts"]
+}

packages/snippetz-plugin-node-fetch/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {},
+  "include": ["src", "rollup.config.ts"]
+}

packages/snippetz-plugin-node-ofetch/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {},
+  "include": ["src", "rollup.config.ts"]
+}

packages/snippetz/src/snippetz.test.ts

@@ -58,7 +58,6 @@ describe('hasPlugin', async () => {
   })
 
   it('returns false if it doesn’t know the plugin', async () => {
-    // @ts-expect-error Testing invalid input
     const result = snippetz().hasPlugin('node', 'fantasy')
 
     expect(result).toBe(false)

packages/snippetz/src/snippetz.ts

@@ -48,8 +48,8 @@ export function snippetz() {
         return details.target === target && details.client === client
       })
     },
-    hasPlugin(target: string, client: ClientId) {
-      return Boolean(this.findPlugin(target as TargetId, client))
+    hasPlugin(target: string, client: string) {
+      return Boolean(this.findPlugin(target as TargetId, client as ClientId))
     },
   }
 }

packages/snippetz/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {},
+  "include": ["src", "rollup.config.ts"]
+}

tsconfig.json

@@ -1,20 +1,27 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
+    "target": "ES2022" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "module": "ESNext" /* Specify what module code is generated. */,
+    "moduleResolution": "Bundler",
+    // Required for isolated module compilation (ESBuild)
     "isolatedModules": true,
-
-    /* Linting */
+    // Support proper ESM builds
+    "esModuleInterop": true,
+    // Ensure that casing is correct in imports.
+    "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "types": ["vite/client"],
+  "exclude": ["dist", "node_modules", "**/dist", "**/node_modules"],
+  // Required for path rewrites
+  "ts-node": {
+    "require": ["tsconfig-paths/register"]
+  },
+  // Required for path aliasing
+  "tsc-alias": {
+    "resolveFullPaths": true
   }
 }