diff --git a/README.md b/README.md
index a711ed9..f5377bc 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ It will be rendered like this:
My component file
-
+
Sub component
@@ -51,18 +51,22 @@ npm install vue-component-debug --save-dev
To enable it, add the `VueComponentDebug` plugin to your Vue application. This can be done in your main entry file (e.g., `main.js` or `main.ts`):
```javascript
-import { createApp } from 'vue'
-import VueComponentDebug from 'vue-component-debug'
-import App from './App.vue'
+import { createApp } from 'vue';
+import VueComponentDebug from 'vue-component-debug';
+import App from './App.vue';
-const app = createApp(App)
+const app = createApp(App);
-app.use(VueComponentDebug)
+app.use(VueComponentDebug);
-app.mount('#app')
+app.mount('#app');
```
-Comments will only be added in development mode.
+By default, comments will always be outputted while in development mode and removed in production mode. However, you're welcome to override this behavior by passing an `enabled` option to the plugin:
+
+```javascript
+app.use(VueComponentDebug, { enabled: false });
+```
## Development
@@ -78,4 +82,4 @@ npm run build
# Preview production build
npm run preview
-```
\ No newline at end of file
+```
diff --git a/src/index.js b/src/index.js
index 2348f01..112004a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,8 +3,8 @@ import { createComponentDebugMixin } from './mixins/componentDebug.js';
export { createComponentDebugMixin };
export default {
- install(app = {}) {
- const debugMixin = createComponentDebugMixin();
+ install(app = {}, options = {}) {
+ const debugMixin = createComponentDebugMixin(options);
app.mixin(debugMixin);
},
};
diff --git a/src/mixins/componentDebug.js b/src/mixins/componentDebug.js
index 88f10db..7bc3a6d 100644
--- a/src/mixins/componentDebug.js
+++ b/src/mixins/componentDebug.js
@@ -1,7 +1,9 @@
-export function createComponentDebugMixin() {
+export function createComponentDebugMixin(options = {}) {
+ const { enabled = process.env.NODE_ENV === 'development' } = options;
+
return {
mounted() {
- if (process.env.NODE_ENV !== 'development') {
+ if (!enabled) {
return;
}
@@ -14,7 +16,7 @@ export function createComponentDebugMixin() {
this.$el.parentNode?.insertBefore(endComment, this.$el.nextSibling);
},
beforeUnmount() {
- if (process.env.NODE_ENV !== 'development') {
+ if (!enabled) {
return;
}
diff --git a/tests/debugMixin.test.js b/tests/debugMixin.test.js
index 290db8c..940206c 100644
--- a/tests/debugMixin.test.js
+++ b/tests/debugMixin.test.js
@@ -229,4 +229,74 @@ describe('createComponentDebugMixin', () => {
document.body.removeChild(container);
});
+
+ it('respects enabled option when set to false', () => {
+ process.env.NODE_ENV = 'development';
+
+ const TestComponent = {
+ name: 'TestComponent',
+ __file: 'src/components/TestComponent.vue',
+ mixins: [createComponentDebugMixin({ enabled: false })],
+ template: '
Test Content
',
+ };
+
+ const wrapper = mount(TestComponent, {
+ attachTo: document.body,
+ });
+
+ const element = wrapper.element;
+
+ // Should not have comment siblings when disabled
+ expect(element.previousSibling).toBeNull();
+ expect(element.nextSibling).toBeNull();
+
+ wrapper.unmount();
+ });
+
+ it('respects enabled option when set to true in production', () => {
+ process.env.NODE_ENV = 'production';
+
+ const TestComponent = {
+ name: 'TestComponent',
+ __file: 'src/components/TestComponent.vue',
+ mixins: [createComponentDebugMixin({ enabled: true })],
+ template: '
Test Content
',
+ };
+
+ const wrapper = mount(TestComponent, {
+ attachTo: document.body,
+ });
+
+ const element = wrapper.element;
+
+ // Should have comments even in production when explicitly enabled
+ expect(element.previousSibling?.nodeType).toBe(Node.COMMENT_NODE);
+ expect(element.nextSibling?.nodeType).toBe(Node.COMMENT_NODE);
+ expect(element.previousSibling.nodeValue).toBe(' Start component: src/components/TestComponent.vue ');
+
+ wrapper.unmount();
+ });
+
+ it('defaults to development mode behavior when no enabled option provided', () => {
+ process.env.NODE_ENV = 'development';
+
+ const TestComponent = {
+ name: 'TestComponent',
+ __file: 'src/components/TestComponent.vue',
+ mixins: [createComponentDebugMixin()],
+ template: '
Test Content
',
+ };
+
+ const wrapper = mount(TestComponent, {
+ attachTo: document.body,
+ });
+
+ const element = wrapper.element;
+
+ // Should have comments in development by default
+ expect(element.previousSibling?.nodeType).toBe(Node.COMMENT_NODE);
+ expect(element.nextSibling?.nodeType).toBe(Node.COMMENT_NODE);
+
+ wrapper.unmount();
+ });
});
diff --git a/tests/plugin.test.js b/tests/plugin.test.js
index 564d3dd..a58b5c4 100644
--- a/tests/plugin.test.js
+++ b/tests/plugin.test.js
@@ -186,4 +186,52 @@ describe('VueComponentDebug Plugin', () => {
wrapper.unmount();
});
+
+ it('accepts enabled option and passes it to mixin', () => {
+ process.env.NODE_ENV = 'development';
+
+ const TestComponent = {
+ name: 'TestComponent',
+ template: '
Test
',
+ };
+
+ const wrapper = mount(TestComponent, {
+ attachTo: document.body,
+ global: {
+ plugins: [[VueComponentDebug, { enabled: false }]],
+ },
+ });
+
+ const element = wrapper.element;
+
+ // Should not have comments when disabled via options
+ expect(element.previousSibling).toBeNull();
+ expect(element.nextSibling).toBeNull();
+
+ wrapper.unmount();
+ });
+
+ it('can force enable in production mode via options', () => {
+ process.env.NODE_ENV = 'production';
+
+ const TestComponent = {
+ name: 'TestComponent',
+ template: '
Test
',
+ };
+
+ const wrapper = mount(TestComponent, {
+ attachTo: document.body,
+ global: {
+ plugins: [[VueComponentDebug, { enabled: true }]],
+ },
+ });
+
+ const element = wrapper.element;
+
+ // Should have comments even in production when explicitly enabled
+ expect(element.previousSibling?.nodeType).toBe(Node.COMMENT_NODE);
+ expect(element.nextSibling?.nodeType).toBe(Node.COMMENT_NODE);
+
+ wrapper.unmount();
+ });
});