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(); + }); });