Update Vue 2 adapter to Typescript and esbuild

inertiajs · Jan 3, 2023 · 342312d · 342312d
1 parent 60248cd
commit 342312d
Show file tree

Hide file tree

Showing 14 changed files with 128 additions and 137 deletions.
diff --git a/packages/vue2/.gitignore b/packages/vue2/.gitignore
@@ -1,4 +1,5 @@
 dist
+types
 node_modules
 package-lock.json
 yarn.lock
diff --git a/packages/vue2/build.js b/packages/vue2/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))
diff --git a/packages/vue2/index.d.ts b/packages/vue2/index.d.ts
diff --git a/packages/vue2/package.json b/packages/vue2/package.json
@@ -2,7 +2,7 @@
   "name": "@inertiajs/vue2",
   "version": "1.0.0-beta.2",
   "license": "MIT",
-  "description": "The Vue adapter for Inertia.js",
+  "description": "The Vue 2 adapter for Inertia.js",
   "contributors": [
     "Jonathan Reinink <jonathan@reinink.ca>",
     "Claudio Dekker <claudio@ubient.net>",
@@ -17,23 +17,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": "^2.6.0"
   },
   "peerDependencies": {

diff --git a/packages/vue2/src/app.js → packages/vue2/src/app.ts b/packages/vue2/src/app.js → packages/vue2/src/app.ts
@@ -1,8 +1,9 @@
 import { createHeadManager, router } from '@inertiajs/core'
 import remember from './remember'
+import { VuePageHandlerArgs } from './types'
 import useForm from './useForm'
 
-let app = {}
+let app = {} as any
 let headManager = null
 
 export default {
@@ -46,7 +47,7 @@ export default {
       router.init({
         initialPage: this.initialPage,
         resolveComponent: this.resolveComponent,
-        swapComponent: async ({ component, page, preserveState }) => {
+        swapComponent: async ({ component, page, preserveState }: VuePageHandlerArgs) => {
           this.component = component
           this.page = page
           this.key = preserveState ? this.key : Date.now()
@@ -84,7 +85,7 @@ export default {
 
 export const plugin = {
   install(Vue) {
-    router.form = useForm // needed so that we can access the form helper at this.$inertia.form
+    router.form = useForm
     Vue.mixin(remember)
 
     Vue.mixin({

diff --git a/packages/vue2/src/createInertiaApp.js → packages/vue2/src/createInertiaApp.ts b/packages/vue2/src/createInertiaApp.js → packages/vue2/src/createInertiaApp.ts
diff --git a/packages/vue2/src/head.js → packages/vue2/src/head.ts b/packages/vue2/src/head.js → packages/vue2/src/head.ts
diff --git a/packages/vue2/src/index.js → packages/vue2/src/index.ts b/packages/vue2/src/index.js → packages/vue2/src/index.ts
diff --git a/packages/vue2/src/link.js → packages/vue2/src/link.ts b/packages/vue2/src/link.js → packages/vue2/src/link.ts
diff --git a/packages/vue2/src/remember.js → packages/vue2/src/remember.ts b/packages/vue2/src/remember.js → packages/vue2/src/remember.ts
diff --git a/packages/vue2/src/server.js → packages/vue2/src/server.ts b/packages/vue2/src/server.js → packages/vue2/src/server.ts
diff --git a/packages/vue2/src/types.ts b/packages/vue2/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
+  }
+}
diff --git a/packages/vue2/src/useForm.js → packages/vue2/src/useForm.ts b/packages/vue2/src/useForm.js → packages/vue2/src/useForm.ts
@@ -1,12 +1,12 @@
-import { router } from '@inertiajs/core'
+import { router, VisitOptions } from '@inertiajs/core'
 import cloneDeep from 'lodash.clonedeep'
 import isEqual from 'lodash.isequal'
 import Vue from 'vue'
 
 export default function useForm(...args) {
   const rememberKey = typeof args[0] === 'string' ? args[0] : null
   const data = (typeof args[0] === 'string' ? args[1] : args[0]) || {}
-  const restored = rememberKey ? router.restore(rememberKey) : null
+  const restored = rememberKey ? (router.restore(rememberKey) as { data: any; errors: any }) : null
   let defaults = cloneDeep(data)
   let cancelToken = null
   let recentlySuccessfulTimeoutId = null
@@ -79,7 +79,7 @@ export default function useForm(...args) {
 
       return this
     },
-    submit(method, url, options = {}) {
+    submit(method, url, options: VisitOptions = {}) {
       const data = transform(this.data())
       const _options = {
         ...options,
@@ -143,13 +143,13 @@ export default function useForm(...args) {
             return options.onCancel()
           }
         },
-        onFinish: () => {
+        onFinish: (visit) => {
           this.processing = false
           this.progress = null
           cancelToken = null
 
           if (options.onFinish) {
-            return options.onFinish()
+            return options.onFinish(visit)
           }
         },
       }

diff --git a/packages/vue2/tsconfig.json b/packages/vue2/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
+  }
+}