fix: auto-import machines correctly during dev (#19)

* refactor: machines importing

* fix: use `imports.extend` to implement suffix (#18)

* fix: remove unnecessary code

* chore: add linting to `ci` workflow

* chore: fix broken workflow

* ci: run workflow on all push and PR events

* ci: run push only on main branch

* chore: remove machine

Co-authored-by: Daniel Roe <daniel@roe.dev>

.github/workflows/ci.yml

@@ -5,8 +5,6 @@ on:
  branches:
  - main
  pull_request:
- branches:
- - main
 
 jobs:
  ci:
@@ -45,5 +43,8 @@ jobs:
  - name: Prepare environment 🌳
  run: yarn dev:prepare
 
+ - name: Run lint 🧹
+ run: yarn lint
+
  - name: Run tests 🧪
  run: yarn test:types && yarn test

package.json

@@ -37,32 +37,34 @@
  "docs:dev": "vitepress dev docs --port 4000",
  "docs:build": "vitepress build docs",
  "docs:serve": "vitepress serve docs",
+ "lint": "eslint --ext .js,.ts,.vue .",
  "test": "vitest run",
  "test:watch": "vitest",
  "test:types": "tsc --noEmit",
  "test:coverage": "vitest run --coverage"
  },
  "dependencies": {
- "@nuxt/kit": "^3.0.0-rc.10",
+ "@nuxt/kit": "^3.0.0-rc.11",
  "@xstate/fsm": "^2.0.0",
  "@xstate/vue": "^2.0.0",
  "globby": "^13.1.2",
- "pathe": "^0.3.7",
+ "pathe": "^0.3.8",
  "unimport": "^0.6.7",
  "xstate": "^4.33.6"
  },
  "devDependencies": {
  "@nuxt/module-builder": "latest",
- "@nuxt/schema": "^3.0.0-rc.10",
- "@nuxt/test-utils": "^3.0.0-rc.10",
- "@nuxt/vite-builder": "^3.0.0-rc.10",
- "@nuxt/webpack-builder": "^3.0.0-rc.10",
+ "@nuxt/schema": "^3.0.0-rc.11",
+ "@nuxt/test-utils": "^3.0.0-rc.11",
+ "@nuxt/vite-builder": "^3.0.0-rc.11",
+ "@nuxt/webpack-builder": "^3.0.0-rc.11",
  "@nuxtjs/eslint-config-typescript": "11.0.0",
  "eslint": "latest",
- "nuxt": "^3.0.0-rc.10",
- "playwright": "^1.25.2",
+ "node-fetch-native": "^0.1.7",
+ "nuxt": "^3.0.0-rc.11",
+ "playwright": "^1.26.0",
  "typescript": "^4.8.3",
- "vitepress": "v1.0.0-alpha.15",
+ "vitepress": "v1.0.0-alpha.17",
  "vitest": "^0.23.4",
  "vue": "^3.2.39",
  "vue-demi": "^0.13.11",

src/module.ts

@@ -31,6 +31,6 @@ export default defineNuxtModule<ModuleOptions>({
  // Setup auto-importing
  setupAutoImports(options.minimal)
 
- if (options.customMachines) { await setupCustomMachines(options.customMachines) }
+ if (options.customMachines) { setupCustomMachines(options.customMachines) }
  }
 })

src/parts/customMachine.ts

@@ -1,43 +1,29 @@
-import { useNuxt, addImports } from '@nuxt/kit'
-import { Import } from 'unimport'
-import { globby } from 'globby'
+import { useNuxt, addImportsDir } from '@nuxt/kit'
 import { resolve } from 'pathe'
 
 import type { CustomMachinesOptions } from '../types'
 
-export const setupCustomMachines = async (machinesOptions: CustomMachinesOptions) => {
+export const setupCustomMachines = (machinesOptions: CustomMachinesOptions) => {
  const nuxt = useNuxt()
 
- const nuxtSrcDir = nuxt.options.srcDir
  const { dir, importSuffix } = machinesOptions
 
- const resolvedDir = resolve(nuxtSrcDir, dir)
+ const resolvedDir = resolve(nuxt.options.srcDir, dir)
 
- const scannedFiles = await scanMachines(resolvedDir)
+ addImportsDir(resolvedDir)
 
- // Map with resolved paths as key, and values as import names
- const resolvedNames = new Map<string, string>()
+ nuxt.hook('imports:extend', (imports) => {
+ for (const i of imports) {
+ const file = i.from
+ if (!file.startsWith(resolvedDir)) { continue }
 
- for (const file of scannedFiles) {
- const fullFileName = file.split('/').at(-1)
- const bareName = fullFileName.split('.').at(0).toLowerCase()
+  // Update import name with import suffix
+  const fullFileName = file.split('/').at(-1)
+  const bareName = fullFileName.split('.').at(0).toLowerCase()
 
- resolvedNames.set(file, bareName + importSuffix)
- }
+ const newName = bareName + importSuffix
 
- const imports: Import[] = []
- resolvedNames.forEach((importName, filePath) => {
- imports.push({
- from: filePath,
- name: 'default',
- as: importName
- })
+ i.as = newName
+ }
  })
-
- addImports(imports)
-}
-
-const scanMachines = async (resolvedDir: string) => {
- // Sorting to make it consistent between runs
- return (await globby(resolvedDir)).sort()
 }

src/types.d.ts

@@ -1,9 +1,9 @@
 export interface CustomMachinesOptions {
-  dir?: string,
-  importSuffix?: string,
- }
+ dir?: string,
+ importSuffix?: string,
+}
 
 export interface ModuleOptions {
-  minimal: boolean;
-  customMachines: CustomMachinesOptions | false;
- }
+ minimal: boolean;
+ customMachines: CustomMachinesOptions | false;
+}

tests/fixture/nuxt.config.ts

@@ -1,4 +1,4 @@
-import { defineNuxtConfig } from 'nuxt'
+import { defineNuxtConfig } from 'nuxt/config'
 import XStateModule from '../../'
 
 export default defineNuxtConfig({