Update Vue 3 adapter to Typescript and esbuild

packages/vue3/build.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+const esbuild = require('esbuild')
+const { nodeExternalsPlugin } = require('esbuild-node-externals')
+
+let config = {
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  target: 'es2020',
+  plugins: [nodeExternalsPlugin()],
+}
+
+if (process.argv.slice(1).includes('--watch')) {
+  config.watch = {
+    onRebuild(error) {
+      if (error) console.error('watch build failed:', error)
+      else console.log('watch build succeeded')
+    },
+  }
+}
+
+esbuild
+  .build({
+    ...config,
+    entryPoints: ['src/index.ts'],
+    format: 'esm',
+    outfile: 'dist/index.esm.js',
+    platform: 'browser',
+  })
+  .catch(() => process.exit(1))
+
+esbuild
+  .build({
+    ...config,
+    entryPoints: ['src/index.ts'],
+    format: 'cjs',
+    outfile: 'dist/index.js',
+    platform: 'browser',
+  })
+  .catch(() => process.exit(1))
+
+esbuild
+  .build({
+    ...config,
+    entryPoints: ['src/server.ts'],
+    format: 'esm',
+    outfile: 'dist/server.esm.js',
+    platform: 'node',
+  })
+  .catch(() => process.exit(1))
+
+esbuild
+  .build({
+    ...config,
+    entryPoints: ['src/server.ts'],
+    format: 'cjs',
+    outfile: 'dist/server.js',
+    platform: 'node',
+  })
+  .catch(() => process.exit(1))

packages/vue3/package.json

@@ -15,23 +15,30 @@
   "bugs": {
     "url": "/~https://github.com/inertiajs/inertia/issues"
   },
-  "source": "src/index.js",
+  "source": "src/index.ts",
   "main": "dist/index.js",
-  "typings": "index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
-    ".": "./dist/index.js",
-    "./server": "./dist/server.js"
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./types/index.d.js"
+    },
+    "./server": {
+      "import": "./dist/server.esm.js",
+      "require": "./dist/server.js",
+      "types": "./types/server.d.js"
+    }
   },
   "scripts": {
-    "build": "npm run clean && npm run build:browser && npm run build:server",
-    "build:browser": "microbundle --format es,cjs",
-    "build:server": "microbundle --format es,cjs --target node --output ./dist/server.js ./src/server.js",
-    "clean": "rm -rf dist",
+    "build": "npm run clean && ./build.js && tsc --emitDeclarationOnly",
+    "clean": "rm -rf types && rm -rf dist",
     "prepublishOnly": "npm run build",
-    "watch": "microbundle watch --format es,cjs"
+    "watch": "./build.js --watch"
   },
   "devDependencies": {
-    "microbundle": "^0.12.0",
+    "esbuild": "^0.16.13",
+    "typescript": "^4.9.4",
     "vue": "^3.0.0"
   },
   "peerDependencies": {

packages/vue3/src/app.js → packages/vue3/src/app.ts

@@ -1,10 +1,11 @@
-import { createHeadManager, router } from '@inertiajs/core'
+import { createHeadManager, Page, router } from '@inertiajs/core'
 import { computed, h, markRaw, ref, shallowRef } from 'vue'
 import remember from './remember'
+import { VuePageHandlerArgs } from './types'
 import useForm from './useForm'
 
 const component = ref(null)
-const page = ref({})
+const page = ref<Page>({} as unknown as Page)
 const layout = shallowRef(null)
 const key = ref(null)
 let headManager = null
@@ -47,7 +48,7 @@ export default {
       router.init({
         initialPage,
         resolveComponent,
-        swapComponent: async (args) => {
+        swapComponent: async (args: VuePageHandlerArgs) => {
           component.value = markRaw(args.component)
           page.value = args.page
           key.value = args.preserveState ? key.value : Date.now()

packages/vue3/src/types.ts

@@ -0,0 +1,13 @@
+import { PageHandler } from '@inertiajs/core'
+import { ComponentPublicInstance } from 'vue'
+import useForm from './useForm'
+
+export type VuePageHandlerArgs = Parameters<PageHandler>[0] & {
+  component: ComponentPublicInstance | Promise<ComponentPublicInstance>
+}
+
+declare module '@inertiajs/core' {
+  export interface Router {
+    form: typeof useForm
+  }
+}

packages/vue3/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "include": ["src/app.ts"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "noEmitOnError": true,
+
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "target": "ES2020",
+    "types": ["node"],
+
+    "declaration": true,
+    "declarationDir": "types",
+
+    "module": "ES2020",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+
+    "noImplicitThis": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "preserveConstEnums": true,
+    "removeComments": true,
+    "typeRoots": ["./node_modules/@types"]
+    // "strict": true
+  }
+}