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 ( + <> +
+
Hello
+ {/* end child1 */} +
World
+ {/* end child2 */} +
+ {/* 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 ( +
+
Hello
+
World
+
+ ); + } + " + `); + }); +}); diff --git a/packages/core/src/__tests__/specs/debug-ids.lite.tsx b/packages/core/src/__tests__/specs/debug-ids.lite.tsx new file mode 100644 index 0000000000..1e17a61654 --- /dev/null +++ b/packages/core/src/__tests__/specs/debug-ids.lite.tsx @@ -0,0 +1,12 @@ +/** @jsx jsx */ + +export default function DebugIds() { + return ( +
+
Hello
+
+ World +
+
+ ); +} diff --git a/packages/core/src/__tests__/specs/debug-ids.raw.tsx b/packages/core/src/__tests__/specs/debug-ids.raw.tsx new file mode 100644 index 0000000000..1e17a61654 --- /dev/null +++ b/packages/core/src/__tests__/specs/debug-ids.raw.tsx @@ -0,0 +1,12 @@ +/** @jsx jsx */ + +export default function DebugIds() { + return ( +
+
Hello
+
+ World +
+
+ ); +} diff --git a/packages/core/src/generators/mitosis/generator.ts b/packages/core/src/generators/mitosis/generator.ts index 98998f4f06..76c94baed1 100644 --- a/packages/core/src/generators/mitosis/generator.ts +++ b/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 += ``; + str += `${ + options.addCloseTagIdComments && json.properties._id ? `{/* end ${json.properties._id} */}` : '' + }`; return str; }; @@ -242,6 +244,7 @@ export const componentToMitosis: TranspilerGenerator> }); 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> ${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 ? ']' : ')'} } `; diff --git a/packages/core/src/generators/mitosis/types.ts b/packages/core/src/generators/mitosis/types.ts index 7411da0658..3e23d0c630 100644 --- a/packages/core/src/generators/mitosis/types.ts +++ b/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 = {};