feat: setup chokidar watcher

posva · Jun 17, 2022 · 15f217f · 15f217f
1 parent 2295ff5
commit 15f217f
Show file tree

Hide file tree

Showing 17 changed files with 150 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "chokidar": "^3.5.3",
     "unplugin": "^0.7.0"
   },
   "devDependencies": {

diff --git a/playground/index.html b/playground/index.html
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
-  <div id="app"></div>
-  <a href="/__inspect/module?id=./main.ts&index=2" target="_blank" style="text-decoration: none; margin-top:10px; display: block;">visit /__inspect/ to inspect the intermediate state</a>
-  <script type="module" src="./main.ts"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <a
+      href="/__inspect/module?id=./main.ts&index=2"
+      target="_blank"
+      style="text-decoration: none; margin-top: 10px; display: block"
+      >visit /__inspect/ to inspect the intermediate state</a
+    >
+    <script type="module" src="./main.ts"></script>
+  </body>
 </html>
diff --git a/playground/src/routes/[...path].vue b/playground/src/routes/[...path].vue
@@ -0,0 +1,6 @@
+<template>
+  <main>
+    <h1>Not Found</h1>
+    <p>{{ $route.params.path }} does not exist.</p>
+  </main>
+</template>
diff --git a/playground/src/routes/[name].vue b/playground/src/routes/[name].vue
@@ -0,0 +1,5 @@
+<template>
+  <main>
+    <h1>Param: {{ $route.params.name }}</h1>
+  </main>
+</template>
diff --git a/playground/src/routes/about.vue b/playground/src/routes/about.vue
@@ -0,0 +1,5 @@
+<template>
+  <main>
+    <h1>About</h1>
+  </main>
+</template>
diff --git a/playground/src/routes/deep/nesting/works/too.vue b/playground/src/routes/deep/nesting/works/too.vue
diff --git a/playground/src/routes/haha/oeuoe.vue b/playground/src/routes/haha/oeuoe.vue
diff --git a/playground/src/routes/index.vue b/playground/src/routes/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <main>
+    <h1>Home</h1>
+  </main>
+</template>
diff --git a/playground/src/routes/partial-[name].vue b/playground/src/routes/partial-[name].vue
@@ -0,0 +1,5 @@
+<template>
+  <main>
+    <h1>Partial Param: {{ $route.params.name }}</h1>
+  </main>
+</template>
diff --git a/playground/src/routes/users/[id].vue b/playground/src/routes/users/[id].vue
diff --git a/playground/src/routes/users/edit.vue b/playground/src/routes/users/edit.vue
diff --git a/playground/src/routes/users/index.vue b/playground/src/routes/users/index.vue
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -3,8 +3,5 @@ import Inspect from 'vite-plugin-inspect'
 import Unplugin from '../src/vite'
 
 export default defineConfig({
-  plugins: [
-    Inspect(),
-    Unplugin(),
-  ],
+  plugins: [Inspect(), Unplugin()],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/context.ts b/src/core/context.ts
@@ -0,0 +1,66 @@
+import { FSWatcher, watch as chokidar } from 'chokidar'
+import { resolve } from 'path'
+
+export interface RoutesContextOptions {
+  extensions?: string[]
+  routesFolder?: string
+  importMode?:
+    | 'sync'
+    | 'async'
+    | ((path: string, resolvedOptions: any) => 'sync' | 'async')
+
+  ignore?: string[]
+
+  routeStyle?: 'nuxt' | 'remix'
+
+  routesModuleId?: string
+
+  root?: string
+}
+
+const DEFAULT_OPTIONS: Required<RoutesContextOptions> = {
+  extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx'],
+  ignore: [],
+  routesFolder: 'src/routes',
+  importMode: 'async',
+  routeStyle: 'nuxt',
+  routesModuleId: '@routes',
+  root: process.cwd(),
+}
+
+export function createRoutesContext(opt?: RoutesContextOptions) {
+  const options: Required<RoutesContextOptions> = { ...DEFAULT_OPTIONS, ...opt }
+  let serverWatcher: FSWatcher | null = null
+
+  function setupWatcher(watcher?: FSWatcher) {
+    // already setup
+    if (serverWatcher) return
+
+    // create the watcher if necessary
+    // console.log({ root: options.root, routesFolder: options.routesFolder })
+    if (!watcher) {
+      watcher = chokidar(options.routesFolder, {
+        // TODO: allow user options
+        cwd: options.root,
+      })
+    }
+
+    serverWatcher = watcher
+
+    watcher
+      .on('change', (path) => {
+        // TODO: parse defineRoute macro?
+        console.log('change', path)
+      })
+      .on('add', (path) => {
+        console.log('add', path)
+      })
+      .on('unlink', (path) => {
+        console.log('remove', path)
+      })
+  }
+
+  return {
+    setupWatcher,
+  }
+}
diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -0,0 +1 @@
+export type Awaitable<T> = T | PromiseLike<T>
diff --git a/src/index.ts b/src/index.ts
@@ -1,12 +1,42 @@
+import { resolve } from 'path'
 import { createUnplugin } from 'unplugin'
+import { createRoutesContext } from './core/context'
 import type { Options } from './types'
+import { watch } from 'chokidar'
 
-export default createUnplugin<Options>((options) => ({
-  name: 'unplugin-vue-router',
-  transformInclude(id) {
-    return id.endsWith('main.ts')
-  },
-  transform(code) {
-    return code.replace('__UNPLUGIN__', `Hello Unplugin! ${options}`)
-  },
-}))
+const root = process.cwd()
+export default createUnplugin<Options>((options) => {
+  const ctx = createRoutesContext(options)
+
+  return {
+    name: 'unplugin-vue-router',
+    enforce: 'pre',
+
+    // should we transform the file id?
+    transformInclude(id) {
+      // console.log(id)
+      return id.endsWith('main.ts')
+    },
+
+    buildStart() {
+      ctx.setupWatcher()
+    },
+
+    watchChange(id, change) {
+      console.log('we watch', { id, change })
+      process.exit(0)
+    },
+
+    // load(id) {
+    //   console.log('load', { id })
+    //   return null
+    // },
+
+    transform(code) {
+      return code.replace(
+        '__UNPLUGIN__',
+        `Hello Unplugin! ${options || 'no options'}`
+      )
+    },
+  }
+})