Cast enabled option to a string

Author: duncanmcclean

src/mixins/componentDebug.js

@@ -1,9 +1,12 @@
 export function createComponentDebugMixin(options = {}) {
     const { enabled = process.env.NODE_ENV === 'development' } = options;
 
+    // Handle string values from environment variables
+    const isEnabled = typeof enabled === 'string' ? enabled.toLowerCase() === 'true' : Boolean(enabled);
+
     return {
         mounted() {
-            if (!enabled) {
+            if (!isEnabled) {
                 return;
             }
 
@@ -16,7 +19,7 @@ export function createComponentDebugMixin(options = {}) {
             this.$el.parentNode?.insertBefore(endComment, this.$el.nextSibling);
         },
         beforeUnmount() {
-            if (!enabled) {
+            if (!isEnabled) {
                 return;
             }
 

tests/debugMixin.test.js

@@ -299,4 +299,50 @@ describe('createComponentDebugMixin', () => {
 
         wrapper.unmount();
     });
+
+    it('handles string "false" as disabled', () => {
+        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 via string "false"
+        expect(element.previousSibling).toBeNull();
+        expect(element.nextSibling).toBeNull();
+
+        wrapper.unmount();
+    });
+
+    it('handles string "true" as enabled', () => {
+        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 via string "true"
+        expect(element.previousSibling?.nodeType).toBe(Node.COMMENT_NODE);
+        expect(element.nextSibling?.nodeType).toBe(Node.COMMENT_NODE);
+
+        wrapper.unmount();
+    });
 });

tests/plugin.test.js

@@ -234,4 +234,52 @@ describe('VueComponentDebug Plugin', () => {
 
         wrapper.unmount();
     });
+
+    it('handles string "false" from environment variables', () => {
+        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 string "false"
+        expect(element.previousSibling).toBeNull();
+        expect(element.nextSibling).toBeNull();
+
+        wrapper.unmount();
+    });
+
+    it('handles string "true" from environment variables', () => {
+        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 when enabled via string "true"
+        expect(element.previousSibling?.nodeType).toBe(Node.COMMENT_NODE);
+        expect(element.nextSibling?.nodeType).toBe(Node.COMMENT_NODE);
+
+        wrapper.unmount();
+    });
 });