feat!: move package to ESM only

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 npm-debug.log
 coverage/
 dist/
+.idea/

demo/package.json

@@ -15,9 +15,11 @@
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/compiler-sfc": "^3.4.13",
     "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.16",
     "babel-eslint": "^10.1.0",
     "eslint": "^8.56.0",
@@ -29,6 +31,10 @@
     "eslint-plugin-vue": "^9.20.1",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.0.11"
+    "unplugin-auto-import": "^19.2.0",
+    "unimport": "^5.0.1",
+    "vite": "^5.0.11",
+    "vue-tsc": "^2.2.10",
+    "typescript": "^5.1.3"
   }
 }

demo/src/views/directive/VTooltipDemo1.vue

@@ -1,3 +1,6 @@
+<script lang="ts">
+//
+</script>
 <template>
   <h1>VTooltip Demo 1</h1>
 

demo/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "floating-vue/directives": ["../packages/floating-vue/src/directives.ts"],
+      "floating-vue": ["../packages/floating-vue/src/index.ts"]
+    }
+  },
+  "include": ["*.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"]
+}

demo/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "files": []
+}

demo/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "paths": {
+      "floating-vue/directives": ["../packages/floating-vue/src/directives.ts"],
+      "floating-vue": ["../packages/floating-vue/src/index.ts"]
+    },
+    "noEmit": true
+  },
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ]
+}

demo/vite.config.ts

@@ -1,8 +1,30 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import { FloatingVueDirectives } from 'floating-vue/unimport-presets'
+import { resolve }  from 'node:path'
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      'floating-vue/style.css': resolve('./node_modules/floating-vue/dist/style.css'),
+      'floating-vue/dist/style.css': resolve('./node_modules/floating-vue/dist/style.css'),
+      'floating-vue/components': resolve('./node_modules/floating-vue/components.mjs'),
+      'floating-vue/directives': resolve('./node_modules/floating-vue/directives.mjs'),
+      'floating-vue': resolve('./node_modules/floating-vue/dist/index.mjs'),
+    }
+  },
+  define: {
+    'VERSION': JSON.stringify('0.0.0'),
+  },
   plugins: [
     vue(),
+      AutoImport({
+        imports: [
+          FloatingVueDirectives(),
+        ],
+        dts: true,
+        vueDirectives: true,
+      })
   ],
 })

docs/.vitepress/components/theme-editor/ConfigEditor.vue

@@ -1,7 +1,7 @@
 <script>
 import { builtinThemes } from './builtin-themes'
 import { mapState, state } from './state'
-import { SHOW_EVENT_MAP, placements } from 'floating-vue'
+import { SHOW_EVENT_MAP, placements } from 'floating-vue/utils'
 import ToolIcon from '~icons/lucide/wrench'
 import Tabs from './Tabs.vue'
 import { loadValue, storeValue } from './util'

docs/components.d.ts

@@ -12,7 +12,6 @@ declare module 'vue' {
     DropdownMobileDemo: typeof import('./.vitepress/components/DropdownMobileDemo.vue')['default']
     DropdownPlacement: typeof import('./.vitepress/components/DropdownPlacement.vue')['default']
     DropdownSimpleExample: typeof import('./.vitepress/components/DropdownSimpleExample.vue')['default']
-    DropdownVClodePopperDemo: typeof import('./.vitepress/components/DropdownVClodePopperDemo.vue')['default']
     MenuSimpleExample: typeof import('./.vitepress/components/MenuSimpleExample.vue')['default']
     OffsetExample: typeof import('./.vitepress/components/OffsetExample.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

docs/vite.config.js

@@ -20,6 +20,7 @@ export default defineConfig({
   resolve: {
     alias: {
       'floating-vue/style.css': resolve(__dirname, '../packages/floating-vue/dist/style.css'),
+      'floating-vue/utils': resolve(__dirname, '../packages/floating-vue/src/utils.ts'),
       'floating-vue': resolve(__dirname, '../packages/floating-vue/src/index.ts'),
     },
   },

package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@akryum/sheep": "^0.5.0",
-    "floating-vue": "workspace:*",
+    "@types/node": "^22.15.17",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@vue/eslint-config-standard": "^8.0.1",
@@ -24,6 +24,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.14.1",
+    "floating-vue": "workspace:*",
     "typescript": "^5.1.3"
   }
 }

packages/floating-vue/components.d.mts

@@ -0,0 +1,15 @@
+export { VDropdown, VMenu, VTooltip } from './dist/components.mjs'
+export { Placement } from './dist/utils.mjs'
+export { TriggerEvent } from './dist/components/PopperWrapper.vue.mjs'
+export { hideAllPoppers, recomputeAllPoppers } from './dist/components/Popper.mjs'
+
+export { default as Popper } from './dist/components/Popper.vue.mjs'
+export { default as PopperContent } from './dist/components/PopperContent.vue.mjs'
+export { default as PopperMethods } from './dist/components/PopperMethods.mjs'
+export { default as PopperWrapper } from './dist/components/PopperWrapper.vue.mjs'
+export { default as ThemeClass } from './dist/components/ThemeClass.mjs'
+export { default as Tooltip } from './dist/components/Tooltip.mjs'
+export { default as TooltipDirective } from './dist/components/TooltipDirective.vue.mjs'
+
+export declare const ComponentNames: readonly ['VDropdown' | 'VMenu' | 'VTooltip' | 'Popper' | 'PopperContent' | 'PopperMethods' | 'PopperWrapper' | 'ThemeClass' | 'Tooltip' | 'TooltipDirective'];
+export type ComponentName = typeof ComponentNames[number];

packages/floating-vue/components.d.ts

@@ -0,0 +1,15 @@
+export { VDropdown, VMenu, VTooltip } from './dist/components';
+export { Placement } from './dist/utils';
+export { TriggerEvent } from './dist/components/PopperWrapper.vue.js';
+export { hideAllPoppers, recomputeAllPoppers } from './dist/components/Popper.js';
+
+export { default as Popper } from './dist/components/Popper.vue.js';
+export { default as PopperContent } from './dist/components/PopperContent.vue.js';
+export { default as PopperMethods } from './dist/components/PopperMethods.js';
+export { default as PopperWrapper } from './dist/components/PopperWrapper.vue.js';
+export { default as ThemeClass } from './dist/components/ThemeClass.js';
+export { default as Tooltip } from './dist/components/Tooltip.js';
+export { default as TooltipDirective } from './dist/components/TooltipDirective.vue.js';
+
+export declare const ComponentNames: readonly ['VDropdown' | 'VMenu' | 'VTooltip' | 'Popper' | 'PopperContent' | 'PopperMethods' | 'PopperWrapper' | 'ThemeClass' | 'Tooltip' | 'TooltipDirective'];
+export type ComponentName = typeof ComponentNames[number];

packages/floating-vue/components.js

@@ -0,0 +1,11 @@
+export { VDropdown, VMenu, VTooltip } from './dist/components'
+export { hideAllPoppers, recomputeAllPoppers } from './dist/components/Popper'
+
+export { default as Popper } from './dist/components/Popper.vue'
+export { default as PopperMethods } from './dist/components/PopperMethods'
+export { default as PopperWrapper } from './dist/components/PopperWrapper.vue'
+export { default as ThemeClass } from './dist/components/ThemeClass'
+export { default as Tooltip } from './dist/components/Tooltip'
+export { default as TooltipDirective } from './dist/components/TooltipDirective.vue'
+
+export const ComponentNames = ['VDropdown', 'VMenu', 'VTooltip', 'Popper', 'PopperContent', 'PopperMethods', 'PopperWrapper', 'ThemeClass', 'Tooltip', 'TooltipDirective']

packages/floating-vue/components.mjs

@@ -0,0 +1,11 @@
+export { VDropdown, VMenu, VTooltip } from './dist/components.mjs'
+export { hideAllPoppers, recomputeAllPoppers } from './dist/components/Popper.mjs'
+
+export { default as Popper } from './dist/components/Popper.vue'
+export { default as PopperMethods } from './dist/components/PopperMethods.mjs'
+export { default as PopperWrapper } from './dist/components/PopperWrapper.vue'
+export { default as ThemeClass } from './dist/components/ThemeClass.mjs'
+export { default as Tooltip } from './dist/components/Tooltip.mjs'
+export { default as TooltipDirective } from './dist/components/TooltipDirective.vue'
+
+export const ComponentNames = ['VDropdown', 'VMenu', 'VTooltip', 'Popper', 'PopperContent', 'PopperMethods', 'PopperWrapper', 'ThemeClass', 'Tooltip', 'TooltipDirective']

packages/floating-vue/directives.d.ts

@@ -0,0 +1 @@
+export * from './dist/directives';

packages/floating-vue/nuxt-schema.d.ts

@@ -0,0 +1,41 @@
+// only for build, excluded from the package
+declare module '@nuxt/schema' {
+  import type { InlinePreset, UnimportOptions } from 'unimport'
+  export type HookResult = Promise<void> | void
+  export interface ImportPresetWithDeprecation extends InlinePreset {
+  }
+  export interface ImportsOptions extends UnimportOptions {}
+  export interface Component {
+    pascalName: string;
+    kebabName: string;
+    export: string;
+    filePath: string;
+    shortPath: string;
+    chunkName: string;
+    prefetch: boolean;
+    preload: boolean;
+    global?: boolean;
+    island?: boolean;
+    mode?: 'client' | 'server' | 'all';
+    /**
+     * This number allows configuring the behavior of overriding Nuxt components.
+     * If multiple components are provided with the same name, then higher priority
+     * components will be used instead of lower priority components.
+     */
+    priority?: number;
+  }
+  export interface NuxtHooks {
+    'imports:sources': (presets: ImportPresetWithDeprecation[]) => HookResult
+    'components:extend': (components: Component[]) => HookResult
+  }
+  export interface Nuxt {
+    options: {
+      build: {
+        transpile: string[]
+      }
+      css: string[]
+      imports: ImportsOptions
+    }
+    hook: <H extends keyof NuxtHooks>(hook: H, callback: NuxtHooks[H]) => void
+  }
+}

packages/floating-vue/nuxt.d.mts

@@ -0,0 +1,12 @@
+import type { defineNuxtModule } from '@nuxt/kit'
+import type { FloatingVueDirectivesOptions } from 'floating-vue/directives'
+import type { FloatingVueComponentsOptions } from 'floating-vue/components'
+
+export interface FloatingVueNuxtOptions {
+  directives?: FloatingVueDirectivesOptions
+  components?: FloatingVueComponentsOptions
+}
+
+const _default: ReturnType<typeof defineNuxtModule>
+
+export default _default

packages/floating-vue/nuxt.d.ts

@@ -0,0 +1,12 @@
+import type { defineNuxtModule } from '@nuxt/kit'
+import type { FloatingVueDirectivesOptions } from 'floating-vue/directives'
+import type { FloatingVueComponentsOptions } from 'floating-vue/components'
+
+export interface FloatingVueNuxtOptions {
+  directives?: FloatingVueDirectivesOptions
+  components?: FloatingVueComponentsOptions
+}
+
+const _default: ReturnType<typeof defineNuxtModule>
+
+export default _default

packages/floating-vue/nuxt.mjs

@@ -1,8 +1,48 @@
-export default async function (_, _nuxt) {
+import {
+  FloatingVueDirectives,
+  enableDirectives,
+  prepareFloatingVueComponents,
+} from 'floating-vue/unimport-presets'
+
+/**
+ * Nuxt module implementation.
+ * @param options {import('./nuxt').FloatingVueNuxtOptions}
+ * @param _nuxt {import('@nuxt/schema').Nuxt}
+ * @returns {Promise<void>}
+ */
+export default async function (options = {}, _nuxt) {
   const { addPluginTemplate } = await import('@nuxt/kit')
 
+  /** @type {import('@nuxt/schema').Nuxt} */
   const nuxt = (this && this.nuxt) || _nuxt
 
+  const imports = nuxt.options.imports
+  imports.addons = enableDirectives(imports.addons)
+
+  nuxt.hook('imports:sources', (sources) => {
+    sources.push(
+      FloatingVueDirectives(options.directives),
+    )
+  })
+
+  nuxt.hook('components:extend', async (registry) => {
+    const c = prepareFloatingVueComponents(options.components)
+    for (const component of c) {
+      registry.push({
+        pascalName: component.pascalName,
+        kebabName: component.kebabName,
+        export: component.export,
+        filePath: component.filePath,
+        shortPath: component.filePath,
+        chunkName: component.kebabName,
+        prefetch: false,
+        preload: false,
+        global: false,
+        mode: 'all',
+      })
+    }
+  })
+
   nuxt.options.css.push('floating-vue/dist/style.css')
 
   addPluginTemplate({