diff --git a/.changeset/late-gorillas-sin.md b/.changeset/late-gorillas-sin.md new file mode 100644 index 0000000000..48eb66c078 --- /dev/null +++ b/.changeset/late-gorillas-sin.md @@ -0,0 +1,5 @@ +--- +'@builder.io/mitosis': patch +--- + +[Mitosis] Feature: Create an option to add comments in closing divs with the \_id attribute in them diff --git a/packages/core/src/__tests__/debug-ids.test.ts b/packages/core/src/__tests__/debug-ids.test.ts new file mode 100644 index 0000000000..2ac94ae043 --- /dev/null +++ b/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'], + }); +}); diff --git a/packages/core/src/__tests__/mitosis.test.ts b/packages/core/src/__tests__/mitosis.test.ts index 30efefc1a7..3f009e714a 100644 --- a/packages/core/src/__tests__/mitosis.test.ts +++ b/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 ( + <> +