add flag to add close tag id comments

.changeset/late-gorillas-sin.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Create an option to add comments in closing divs with the \_id attribute in them

packages/core/src/__tests__/debug-ids.test.ts

@@ -0,0 +1,14 @@
+import { componentToMitosis } from '@/generators/mitosis';
+import { runTestsForTarget } from './test-generator';
+
+describe('Mitosis debug IDs', () => {
+  runTestsForTarget({
+    options: {
+      format: 'legacy',
+      debugIds: true,
+    },
+    target: 'mitosis',
+    generator: componentToMitosis,
+    only: ['debug-ids'],
+  });
+});

packages/core/src/__tests__/mitosis.test.ts

@@ -1,4 +1,5 @@
 import { componentToMitosis } from '@/generators/mitosis';
+import { MitosisComponent } from '@/types/mitosis-component';
 import { runTestsForTarget } from './test-generator';
 
 describe('Mitosis, format: legacy', () => {
@@ -31,3 +32,116 @@ describe('Mitosis, format: react', () => {
     generator: componentToMitosis,
   });
 });
+
+describe('Mitosis close tag ID comments', () => {
+  const testComponent: MitosisComponent = {
+    '@type': '@builder.io/mitosis/component',
+    name: 'DebugIds',
+    imports: [],
+    meta: {},
+    state: {},
+    context: { get: {}, set: {} },
+    refs: {},
+    hooks: {
+      onMount: [],
+      onUnMount: { code: '' },
+      onEvent: [],
+      init: { code: '' },
+      onInit: { code: '' },
+      preComponent: { code: '' },
+      postComponent: { code: '' },
+      onUpdate: [],
+    },
+    inputs: [],
+    subComponents: [],
+    children: [
+      {
+        '@type': '@builder.io/mitosis/node',
+        name: 'div',
+        meta: {},
+        properties: { _id: 'root' },
+        scope: {},
+        bindings: {},
+        children: [
+          {
+            '@type': '@builder.io/mitosis/node',
+            name: 'div',
+            meta: {},
+            properties: { _id: 'child1' },
+            scope: {},
+            bindings: {},
+            children: [
+              {
+                '@type': '@builder.io/mitosis/node',
+                name: 'span',
+                meta: {},
+                properties: { _text: 'Hello' },
+                scope: {},
+                bindings: {},
+                children: [],
+              },
+            ],
+          },
+          {
+            '@type': '@builder.io/mitosis/node',
+            name: 'div',
+            meta: {},
+            properties: { _id: 'child2' },
+            scope: {},
+            bindings: {},
+            children: [
+              {
+                '@type': '@builder.io/mitosis/node',
+                name: 'span',
+                meta: {},
+                properties: { _id: 'grandchild', _text: 'World' },
+                scope: {},
+                bindings: {},
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+
+  test('adds close tag ID comments when addCloseTagIdComments is true', () => {
+    const output = componentToMitosis({ addCloseTagIdComments: true })({
+      component: testComponent,
+    });
+    expect(output).toMatchInlineSnapshot(`
+      "export default function DebugIds(props) {
+        return (
+          <>
+            <div _id=\\"root\\">
+              <div _id=\\"child1\\">Hello</div>
+              {/* end child1 */}
+              <div _id=\\"child2\\">World</div>
+              {/* end child2 */}
+            </div>
+            {/* end root */}
+          </>
+        );
+      }
+      "
+    `);
+  });
+
+  test('does not add close tag ID comments when addCloseTagIdComments is false', () => {
+    const output = componentToMitosis({ addCloseTagIdComments: false })({
+      component: testComponent,
+    });
+    expect(output).toMatchInlineSnapshot(`
+      "export default function DebugIds(props) {
+        return (
+          <div _id=\\"root\\">
+            <div _id=\\"child1\\">Hello</div>
+            <div _id=\\"child2\\">World</div>
+          </div>
+        );
+      }
+      "
+    `);
+  });
+});

packages/core/src/__tests__/specs/debug-ids.lite.tsx

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+
+export default function DebugIds() {
+  return (
+    <div _id="root">
+      <div _id="child1">Hello</div>
+      <div _id="child2">
+        <span _id="grandchild">World</span>
+      </div>
+    </div>
+  );
+}

packages/core/src/__tests__/specs/debug-ids.raw.tsx

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+
+export default function DebugIds() {
+  return (
+    <div _id="root">
+      <div _id="child1">Hello</div>
+      <div _id="child2">
+        <span _id="grandchild">World</span>
+      </div>
+    </div>
+  );
+}

packages/core/src/generators/mitosis/generator.ts

@@ -189,7 +189,9 @@ export const blockToMitosis = (
     str += json.children.map((item) => blockToMitosis(item, options, component, true)).join('\n');
   }
 
-  str += `</${json.name}>`;
+  str += `</${json.name}>${
+    options.addCloseTagIdComments && json.properties._id ? `{/* end ${json.properties._id} */}` : ''
+  }`;
 
   return str;
 };
@@ -242,6 +244,7 @@ export const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>
     });
 
     const addWrapper = json.children.length !== 1 || isRootTextNode(json);
+    const forceWrapper = options.addCloseTagIdComments || addWrapper;
 
     const components = Array.from(getComponents(json));
     const mitosisCoreComponents: string[] = [];
@@ -299,11 +302,11 @@ export const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>
 
       ${json.style ? `useStyle(\`${json.style}\`)` : ''}
 
-      return ${options.returnArray ? '[' : '('}${addWrapper ? '<>' : ''}
+      return ${options.returnArray ? '[' : '('}${forceWrapper ? '<>' : ''}
         ${json.children
-          .map((item) => blockToMitosis(item, options, component, addWrapper))
+          .map((item) => blockToMitosis(item, options, component, forceWrapper))
           .join('\n')}
-        ${addWrapper ? '</>' : ''}${options.returnArray ? ']' : ')'}
+        ${forceWrapper ? '</>' : ''}${options.returnArray ? ']' : ')'}
     }
 
   `;

packages/core/src/generators/mitosis/types.ts

@@ -5,6 +5,7 @@ export interface ToMitosisOptions extends BaseTranspilerOptions {
   nativeConditionals?: boolean;
   nativeLoops?: boolean;
   returnArray?: boolean;
+  addCloseTagIdComments?: boolean;
 }
 
 export type MitosisMetadata = {};