feat: switch to Typescript and provide type declaration file

Closes #36

.eslintrc.cjs

@@ -1,23 +1,27 @@
-module.exports = {
+require('@rushstack/eslint-patch/modern-module-resolution');
+const { defineConfig } = require('eslint-define-config');
+
+module.exports = defineConfig({
   root: true,
-  extends: [
-    'airbnb-base',
-    'plugin:vue/vue3-recommended',
-    'plugin:prettier/recommended',
-    'eslint-config-vitest-globals',
-  ],
   env: {
     browser: true,
     node: true,
-    'vue/setup-compiler-macros': true,
-  },
-  globals: {
-    __DEV__: 'readonly',
+    'vitest-globals/env': true,
   },
-  ignorePatterns: ['node_modules', 'dist'],
+  ignorePatterns: ['node_modules', 'dist', 'temp'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    '@vue/eslint-config-airbnb-with-typescript',
+    'plugin:vitest-globals/recommended',
+    'prettier',
+  ],
   rules: {
-    'prettier/prettier': 'error',
-    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'no-param-reassign': ['error', { props: false }],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: true,
+      },
+    ],
   },
-};
+});

.gitignore

@@ -17,6 +17,7 @@ coverage
 yarn.lock
 package-lock.json
 .pnpm-store/
+temp
 
 /cypress/videos/
 /cypress/screenshots/

.vscode/extensions.json

@@ -1,7 +1,8 @@
 {
   "recommendations": [
-    "johnsoncodehk.volar",
+    "vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
     "esbenp.prettier-vscode",
-    "ZixuanChen.vitest-explorer"
+    "zixuanchen.vitest-explorer"
   ]
 }

api-extractor.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "mainEntryPointFilePath": "<projectFolder>/temp/index.d.ts",
+  "bundledPackages": [],
+  "compiler": {
+    "tsconfigFilePath": "<projectFolder>/tsconfig.types.json"
+  },
+  "apiReport": {
+    "enabled": false
+  },
+  "docModel": {
+    "enabled": false
+  },
+  "dtsRollup": {
+    "enabled": true,
+    "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  },
+  "messages": {
+    "compilerMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      }
+    },
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      }
+    },
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      }
+    }
+  }
+}

demo/App.vue

@@ -6,7 +6,7 @@
   </main>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import NavLinks from './components/NavLinks.vue';
 

demo/collect-css-ssr.js → demo/collect-css-ssr.ts

@@ -1,7 +1,9 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-bitwise */
 
-const hashCode = (moduleId) => {
+import type { ModuleNode } from 'vite';
+
+const hashCode = (moduleId: string) => {
   let hash = 0;
   let i;
   let chr;
@@ -14,31 +16,28 @@ const hashCode = (moduleId) => {
   return hash;
 };
 
-const moduleIsStyle = (mod) => {
-  return (
-    (mod.file?.endsWith('.scss') ||
-      mod.file?.endsWith('.css') ||
-      mod.id?.includes('vue&type=style')) &&
-    mod.ssrModule
-  );
-};
+const moduleIsStyle = (mod: ModuleNode) =>
+  (mod?.file?.endsWith('.scss') ||
+    mod?.file?.endsWith('.css') ||
+    mod?.id?.includes('vue&type=style')) &&
+  mod?.ssrModule;
 
 /**
  * Collect SSR CSS for Vite
  */
 export const collectCss = (
-  mods,
+  mods: ModuleNode[] | Set<ModuleNode>,
   styles = new Map(),
   checkedMods = new Set()
 ) => {
   let result = '';
 
   mods.forEach((mod) => {
     if (moduleIsStyle(mod)) {
-      styles.set(mod.url, mod.ssrModule.default);
+      styles.set(mod.url, mod.ssrModule?.default);
     }
 
-    if (mod.importedModules?.size > 0 && !checkedMods.has(mod.id)) {
+    if (mod?.importedModules?.size > 0 && !checkedMods.has(mod.id)) {
       checkedMods.add(mod.id);
 
       collectCss(mod.importedModules, styles, checkedMods);

demo/components/CounterComp.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 
 const count = ref(0);
@@ -10,7 +10,7 @@ function onClick() {
 <template>
   <div>
     <p>
-      <button @click="onClick">Increment Counter</button>
+      <button type="button" @click="onClick">Increment Counter</button>
     </p>
     <p>
       Counter: <code>{{ count }}</code>

demo/components/HydrationState.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { getCurrentInstance, onMounted, ref, toRef } from 'vue';
 
 const props = defineProps({
@@ -7,13 +7,13 @@ const props = defineProps({
   },
 });
 
-const hasInitialVnode = getCurrentInstance().vnode.el !== null;
+const hasInitialVnode = getCurrentInstance()?.vnode.el !== null;
 
-const showReload = ref(undefined);
-const willPerformHydration = ref(undefined);
+const showReload = ref();
+const willPerformHydration = ref();
 const isHydrated = toRef(props, 'isHydrated');
 
-function stateValueClass(value) {
+function stateValueClass(value: boolean) {
   return value === true ? 'text-green' : 'text-red';
 }
 
@@ -32,8 +32,8 @@ onMounted(() => {
 <template>
   <div class="box">
     <p v-if="showReload" class="text-red">
-      Please <button @click="reload">Reload</button> to see lazy hydration
-      effect.
+      Please <button type="button" @click="reload">Reload</button> to see lazy
+      hydration effect.
     </p>
     <ul>
       <li>

demo/components/InputComp.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps({
   modelValue: {
     type: String,
@@ -12,7 +12,9 @@ defineEmits(['update:modelValue']);
     <p>
       <input
         :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="
+          $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+        "
       />
     </p>
     <p>

demo/components/InputHydratedOnInteraction.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useLazyHydration, useHydrateOnInteraction } from '../../src';
 
 defineProps({
@@ -21,7 +21,9 @@ result.onHydrated(() => emit('hydrated'));
     <p>
       <input
         :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="
+          $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+        "
       />
     </p>
     <p>

demo/components/LazilyHydratedCounter.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, toRef } from 'vue';
 import {
   useLazyHydration,
@@ -50,7 +50,7 @@ result.onHydrated(() => emit('hydrated'));
 <template>
   <div>
     <p>
-      <button @click="onClick">Increment Counter</button>
+      <button type="button" @click="onClick">Increment Counter</button>
     </p>
     <p>
       Counter: <code>{{ count }}</code>

demo/components/NavLinks.vue

@@ -22,7 +22,7 @@
   <hr />
 </template>
 
-<script setup>
+<script setup lang="ts">
 const links = [
   {
     label: 'Composables',

demo/entry-client.js → demo/entry-client.ts

@@ -6,6 +6,7 @@ removeCssHotReloaded();
 const { app, router } = createApp();
 
 // wait until router is ready before mounting to ensure hydration match
-router.isReady().then(() => {
+// eslint-disable-next-line no-void
+void router.isReady().then(() => {
   app.mount('#app');
 });

demo/entry-server.js → demo/entry-server.ts

@@ -1,30 +1,43 @@
 import path from 'node:path';
-import { renderToString } from 'vue/server-renderer';
+import type { ModuleNode, ViteDevServer } from 'vite';
+import { renderToString, type SSRContext } from 'vue/server-renderer';
 import { collectCss } from './collect-css-ssr';
 import createApp from './main';
 
-export default async function render(url, { moduleGraph }) {
+export default async function render(
+  url: string,
+  { moduleGraph }: ViteDevServer
+) {
   const { app, router } = createApp();
 
   // set the router to the desired URL before rendering
-  router.push(url);
+  // eslint-disable-next-line no-void
+  void router.push(url);
   await router.isReady();
 
   // passing SSR context object which will be available via useSSRContext()
   // @vitejs/plugin-vue injects code into a component's setup() that registers
   // itself on ctx.modules. After the render, ctx.modules would contain all the
   // components that have been instantiated during this render call.
-  const ctx = {};
+  const ctx = {} as SSRContext;
   const appHtml = await renderToString(app, ctx);
 
-  const mods = new Set();
+  const mods: Set<ModuleNode> = new Set();
 
   // add main module for direct imported styles
-  mods.add(moduleGraph.getModuleById(path.resolve('./demo/main.js')));
+  let mod = moduleGraph.getModuleById(path.resolve('./demo/main.ts'));
+
+  if (mod) {
+    mods.add(mod);
+  }
 
   // add modules from rendered Vue components
-  ctx.modules.forEach((componentPath) => {
-    mods.add(moduleGraph.getModuleById(path.resolve(componentPath)));
+  (ctx.modules as Set<string>).forEach((componentPath) => {
+    mod = moduleGraph.getModuleById(path.resolve(componentPath));
+
+    if (mod) {
+      mods.add(mod);
+    }
   });
 
   return { appHtml, css: collectCss(mods) };