feat!: move package to ESM only #1078

userquin · 2025-05-11T17:31:01Z

This PR doesn't include type module, we can do it later.

This PR includes:

move the package to ESM-only: all CJS stuff removed
add unimport-presets subpackage export for directives: I will also include a new preset to use Nuxt components loaders and some utilities here => this subpackage export can be used also with unplugin-auto-import, check the demo playground
add directives subpackage export
add components subpackage export
add utils subpackage export
add script to patch the build:
- remove static css imports from index.d.ts
- add d.mts variants for modules and vue components
- fix d.mts files with correct .mjs imports (static and dynamic imports)

Later I will add also a new unplugin-vue-components-resolvers subpackage export to allow use directives and components via unplugin-vue-components: 2 new resolvers for directives and components.

For context, check my unvuetify monorepo.

TODO:

Migration if using imports:

import {
  // Directives
  vTooltip,
  vClosePopper,
  // Components
  VDropdown,
  VTooltip,
  VMenu,
  // Utitlities
  SHOW_EVENT_MAP,
  placements
} from 'floating-vue'

to

// Directives
import { vTooltip, vClosePopper } from 'floating-vue/directives'
// Components
import { VDropdown, VTooltip, VMenu } from 'floating-vue/components'
// Utilities
import { SHOW_EVENT_MAP, placements } from 'floating-vue/utils'

netlify · 2025-05-11T17:31:06Z

✅ Deploy Preview for v-tooltip ready!

Name	Link
🔨 Latest commit	`824e294`
🔍 Latest deploy log	https://app.netlify.com/sites/v-tooltip/deploys/682120547edce00008d6b196
😎 Deploy Preview	https://deploy-preview-1078--v-tooltip.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

gemini-code-assist

Hello @userquin, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request migrates the floating-vue package to be an ESM-only module. This involves removing CJS artifacts, and introducing subpackage exports for directives, unimport presets, components, and utils. A patching script is added to handle post-build adjustments, including removing static CSS imports from index.d.ts, adding .d.mts variants, and fixing .mjs imports in declaration files. The demo application is also updated to reflect these changes, including adding unplugin-auto-import to showcase the new unimport presets.

Highlights

ESM-only Migration: The package is now ESM-only, with all CJS-related code removed.
Subpackage Exports: New subpackage exports are added for directives, unimport presets, components, and utils.
Build Patching: A script is introduced to patch the build, handling tasks like CSS import removal and .d.mts file generation.
Demo Updates: The demo application is updated to use the new ESM modules and unplugin-auto-import.

Changelog

Click here to see the changelog

demo/package.json
- Added @tsconfig/node22 and @vue/tsconfig as dev dependencies.
- Added unplugin-auto-import and unimport as dev dependencies.
- Added vue-tsc and typescript as dev dependencies.
demo/src/views/directive/VTooltipDemo1.vue
- Added a <script lang="ts"> block to the component.
demo/tsconfig.app.json
- Added composite and tsBuildInfoFile compiler options.
- Added baseUrl and paths compiler options to map floating-vue and floating-vue/directives to their source files.
demo/tsconfig.json
- Added references to tsconfig.node.json and tsconfig.app.json.
demo/tsconfig.node.json
- Added composite and tsBuildInfoFile compiler options.
- Set module to ESNext and moduleResolution to Bundler.
- Added paths compiler options to map floating-vue and floating-vue/directives to their source files.
- Set noEmit to true.
demo/vite.config.ts
- Imported AutoImport from unplugin-auto-import/vite and FloatingVueDirectives from floating-vue/unimport-presets.
- Added resolve aliases for floating-vue modules.
- Added VERSION define.
- Added AutoImport plugin with FloatingVueDirectives.
package.json
- Moved floating-vue from devDependencies to dependencies.
- Added @types/node as a dev dependency.
- Added unimport and unplugin-vue-components as dev dependencies.
packages/floating-vue/components.d.mts
- Created a new file to export component definitions with .mjs extensions.
packages/floating-vue/components.d.ts
- Created a new file to export component definitions.
packages/floating-vue/components.js
- Created a new file to export components with .js extensions.
packages/floating-vue/components.mjs
- Created a new file to export components with .mjs extensions.
packages/floating-vue/directives.d.ts
- Created a new file to export directive definitions.
packages/floating-vue/package.json
- Updated main, module, types, and exports fields to reflect ESM-only structure.
- Added new exports for components, directives, utils, and unimport-presets.
- Added new files to the files array.
- Added unimport and unplugin-vue-components as peer dependencies.
- Added unimport and unplugin-vue-components to peerDependenciesMeta.
packages/floating-vue/scripts/patch-build.mjs
- Created a new file containing a script to patch the build output, including removing CSS imports and creating .d.mts files.
packages/floating-vue/src/components.ts
- Created a new file to export components.
packages/floating-vue/src/components/PopperWrapper.vue
- Updated import path for Placement type from ../util/popper.js to ../utils.
packages/floating-vue/src/directives.ts
- Created a new file to export directives.
packages/floating-vue/src/index.ts
- Replaced exports from ./util/events and ./util/popper with exports from ./utils.
packages/floating-vue/src/node/types.ts
- Created a new file to define types for directives and unimport presets.
packages/floating-vue/src/unimport-presets.ts
- Created a new file to define unimport presets for directives.
packages/floating-vue/src/utils.ts
- Created a new file to export utility functions.
packages/floating-vue/tsconfig.json
- Excluded src/node/** from compilation.
packages/floating-vue/unimport-presets.d.ts
- Created a new file to export unimport presets definitions.
packages/floating-vue/utils.d.ts
- Created a new file to export utils definitions.
packages/floating-vue/vite.config.ts
- Updated lib.entry to include multiple entry points.
- Added unimport and floating-vue/directives to rollupOptions.external.
pnpm-lock.yaml
- Updated dependencies and devDependencies to reflect the changes in package.json files.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

To ESM we stride,
CJS fades into the night,
Modern modules rise.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request migrates the floating-vue package to ESM-only, which is a significant change. It also introduces new subpackage exports and build script modifications. The changes seem well-structured, but let's examine a few areas for potential improvements and clarifications.

Summary of Findings

Missing JSDoc comments: Several functions in packages/floating-vue/scripts/patch-build.mjs lack JSDoc comments, which could hinder maintainability and understanding of the code.
Inconsistent import patching: The patchFileImports and patchFile functions in packages/floating-vue/scripts/patch-build.mjs appear to perform similar tasks but use different approaches. Consider consolidating them for better consistency.
Hardcoded paths in vite.config.ts: The resolve function in demo/vite.config.ts uses hardcoded paths, which might not be portable across different environments. Consider using relative paths or environment variables.

Merge Readiness

The pull request introduces significant changes and requires careful review. While the overall structure seems sound, addressing the identified issues and ensuring thorough testing are crucial before merging. I am unable to directly approve this pull request, and recommend that others review and approve this code before merging. At a minimum, the high severity issues should be addressed before merging.

demo/vite.config.ts

packages/floating-vue/scripts/patch-build.mjs

userquin · 2025-05-11T19:12:21Z

/gemini review

userquin · 2025-05-11T23:27:09Z

I still need to do some more checks and change the build to use only ESM format in vite rollup options, some steps in the patch script won't be required.

I'm going to check also using unbuild/tsdown to generate the dist.

userquin · 2025-05-11T23:43:50Z

packages/floating-vue/nuxt.mjs

+    )
+  })
+
+  nuxt.hook('components:extend', async (registry) => {


Remove async

I guess we don't need the plugin using Nuxt auto-import stuff: just register the plugin if imports is disabled.

We should add a new option to the module to use auto-import or global registration.

userquin · 2025-05-11T23:44:41Z

packages/floating-vue/nuxt.mjs

+
+  nuxt.hook('components:extend', async (registry) => {
+    const c = prepareFloatingVueComponents(options.components)
+    for (const component of c) {


Move prepare to the for loop

userquin · 2025-05-12T11:03:02Z

demo/tsconfig.node.json

+    "types": ["node"],
+    "paths": {
+      "floating-vue/directives": ["../packages/floating-vue/src/directives.ts"],
+      "floating-vue": ["../packages/floating-vue/src/index.ts"]


we need to add tsc-alias as dev dependency, unbuild or tsdown will resolve these entries, vite requires resolve.alias

tsdown doesn't support stubbing yet...

userquin · 2025-05-12T11:17:29Z

packages/floating-vue/nuxt.d.mts

+  components?: FloatingVueComponentsOptions
+}
+
+const _default: ReturnType<typeof defineNuxtModule>


review this, I guess we should add a nuxt.ts and generate the module properly...

Mister-Hope · 2025-05-25T05:32:00Z

Could you release a forked version of this and maintain this project?

For me, the project doesn't seem to be active maintained, the last release was already years ago, downstream VitePress and VuePress are suffering with some a11y issues and SSR mismatches with some bugs. I was just planning to create a fork on VuePress org (e.g.: vuepress/ecosystem#477) then I saw this, and this could be the hugest refactor among all PRs, so it could be great if you are interested in maintaining a forked edition and cherry pick some existing PRs with new version being released.

Looking forward with your reply, if you are not interested, then I will release a fork of this soon with our bugs fixed.

feat!: move package to ESM only

988967b

gemini-code-assist bot reviewed May 11, 2025

View reviewed changes

gemini-code-assist bot suggested changes May 11, 2025

View reviewed changes

userquin marked this pull request as draft May 11, 2025 17:43

userquin added 10 commits May 11, 2025 20:02

chore: fix types

edb07a4

chore: copy vue files to dist/components and add some jsdocs

6c6c831

chore: remove deprecated directives

f69dcb0

chore: add .idea to .gitignore

aed7f91

chore: remove components and directives from index.t module

7bd44b3

chore: export components and types

fd1c924

chore: add missing components imports to index.ts module

14ab05a

chore: remove vClosePopper export from index.ts module

a161641

chore: add some more jsdoc to the patch script

be6d967

chore: fix docs build

779a6a9

userquin marked this pull request as ready for review May 11, 2025 19:11

userquin added 4 commits May 11, 2025 21:52

chore: add unplugin-vue-components-resolvers

5c6d957

chore: fix directives and component names types

757ff79

chore: prepare unimport preset for nuxt integration

e8e2237

chore: add nuxt types and include unimport preset logic

824e294

userquin commented May 11, 2025

View reviewed changes

userquin commented May 12, 2025

View reviewed changes

feat!: move package to ESM only #1078

Are you sure you want to change the base?

feat!: move package to ESM only #1078

Uh oh!

Conversation

userquin commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v-tooltip ready!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Changelog

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Summary of Findings

Merge Readiness

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

userquin commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

userquin commented May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

userquin May 11, 2025

Choose a reason for hiding this comment

Uh oh!

userquin May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

userquin May 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

userquin May 12, 2025

Choose a reason for hiding this comment

Uh oh!

userquin May 12, 2025

Choose a reason for hiding this comment

Uh oh!

userquin May 12, 2025

Choose a reason for hiding this comment

Uh oh!

Mister-Hope commented May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

userquin commented May 11, 2025 •

edited

Loading

netlify bot commented May 11, 2025 •

edited

Loading

userquin commented May 11, 2025 •

edited

Loading

userquin commented May 11, 2025 •

edited

Loading

userquin May 12, 2025 •

edited

Loading

userquin May 11, 2025 •

edited

Loading

Mister-Hope commented May 25, 2025 •

edited

Loading