Registry / web-framework / vite-plugin-vue-facing-decorator-hmr

vite-plugin-vue-facing-decorator-hmr

library1.0.1jsnpmunverified

This Vite plugin addresses a known incompatibility between `vue-facing-decorator` and Vite's Hot Module Replacement (HMR) system when the `toNative()` method is omitted from Vue components. The `vue-facing-decorator` library typically requires calling `toNative()` on decorated components for HMR to function correctly, but this practice can severely degrade developer experience by breaking IDE features like auto-completion in environments such as WebStorm. This plugin, currently at version 1.0.1 (as of its initial release in 2024), transparently injects the necessary `toNative()` logic during the Vite build process, allowing developers to omit it from their source code, thereby preserving IDE functionality while maintaining HMR support. It offers a targeted solution for a specific development workflow challenge.

web-framework

npm install vite-plugin-vue-facing-decorator-hmr

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUE-FA

vite-plugin-vue-facing-decorator-hmr

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vueFacingDecoratorHmr

✓ import vueFacingDecoratorHmr from 'vite-plugin-vue-facing-decorator-hmr';

✗ const vueFacingDecoratorHmr = require('vite-plugin-vue-facing-decorator-hmr');

Vite configuration files (e.g., vite.config.js/ts) are typically ESM and use import statements.

This quickstart demonstrates how to integrate the plugin into your Vite configuration file to enable HMR for `vue-facing-decorator` components.

// vite.config.js or vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueFacingDecoratorHmr from 'vite-plugin-vue-facing-decorator-hmr'; export default defineConfig({ plugins: [ vue(), vueFacingDecoratorHmr() ] });

Debug

Known issues

gotchaVue components using `vue-facing-decorator` typically require `export default toNative(MyComp)` for Vite HMR to work. Omitting `toNative()` without this plugin will result in broken HMR.

fix

Install `vite-plugin-vue-facing-decorator-hmr` and add it to your Vite plugins, then remove manual `toNative()` calls from your component files.

affects: All versions of `vue-facing-decorator` prior to using this plugin.

gotchaUsing `toNative()` directly in your `vue-facing-decorator` components can cause IDEs like WebStorm to break auto-completion and other language service features.

fix

This plugin is designed to address this. Use the plugin and omit `toNative()` from your source code.

affects: All versions of `vue-facing-decorator` when `toNative()` is explicitly used.

Errors

Common errors & fixes

Hot Module Replacement (HMR) not working for Vue components using `vue-facing-decorator`.

The `toNative()` method from `vue-facing-decorator` was not called on the component, or the `vite-plugin-vue-facing-decorator-hmr` plugin is not correctly configured.

fix

Ensure `vite-plugin-vue-facing-decorator-hmr` is installed and added to your `vite.config.js`/`ts` plugins array. Remove any manual `toNative()` calls if you are using this plugin.

IDE (e.g., WebStorm) reports 'Cannot resolve symbol 'MyProp'' or similar auto-completion issues in Vue components using `vue-facing-decorator`.

Explicitly exporting `toNative(MyComponent)` at the end of the component file interferes with the IDE's static analysis capabilities.

fix

Remove the `export default toNative(MyComp)` line from your component files. Install and configure `vite-plugin-vue-facing-decorator-hmr` in your Vite config to handle this automatically during the build process.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

viterequiredThis is a Vite plugin and requires Vite as a build tool dependency.

vue-facing-decoratorrequiredThe plugin specifically targets and fixes HMR issues for components using this decorator library.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Arakmar/vite-plugin-vue-facing-decorator-hmr ↗

packagehttps://www.npmjs.com/package/vite-plugin-vue-facing-decorator-hmr ↗