Add enabled option (#2)

Author: duncanmcclean

README.md

@@ -26,7 +26,7 @@ It will be rendered like this:
 <!-- Start component: src/components/MyComponent.vue -->
 <div>
     My component file
-    
+
     <!-- Start component: src/components/SubComponent.vue -->
     <div>Sub component</div>
     <!-- End component: src/components/SubComponent.vue -->
@@ -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
-```
+```

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);
     },
 };

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;
             }
 

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: '<div>Test Content</div>',
+        };
+
+        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: '<div>Test Content</div>',
+        };
+
+        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: '<div>Test Content</div>',
+        };
+
+        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();
+    });
 });

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: '<div>Test</div>',
+        };
+
+        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: '<div>Test</div>',
+        };
+
+        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();
+    });
 });