From 852f61e7f262e3bbdc2e59338d5c2712c7e9ff74 Mon Sep 17 00:00:00 2001 From: Steve Sewell Date: Wed, 12 Feb 2025 09:04:25 -0800 Subject: [PATCH 1/3] add flag to add close tag id comments --- packages/core/src/__tests__/debug-ids.test.ts | 14 +++ packages/core/src/__tests__/mitosis.test.ts | 114 ++++++++++++++++++ .../src/__tests__/specs/debug-ids.lite.tsx | 12 ++ .../src/__tests__/specs/debug-ids.raw.tsx | 12 ++ .../core/src/generators/mitosis/generator.ts | 11 +- packages/core/src/generators/mitosis/types.ts | 1 + 6 files changed, 160 insertions(+), 4 deletions(-) create mode 100644 packages/core/src/__tests__/debug-ids.test.ts create mode 100644 packages/core/src/__tests__/specs/debug-ids.lite.tsx create mode 100644 packages/core/src/__tests__/specs/debug-ids.raw.tsx 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 = {}; From 4a9519d1ce9c8a3a87ab96c7638d01139efb2f3f Mon Sep 17 00:00:00 2001 From: Steve Sewell Date: Wed, 12 Feb 2025 09:18:23 -0800 Subject: [PATCH 2/3] changeset --- .changeset/late-gorillas-sin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/late-gorillas-sin.md diff --git a/.changeset/late-gorillas-sin.md b/.changeset/late-gorillas-sin.md new file mode 100644 index 0000000000..e7bdc76528 --- /dev/null +++ b/.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 From c00de1734a439be09edc0bf1f6ca72b20a880eca Mon Sep 17 00:00:00 2001 From: Sami Jaber Date: Tue, 11 Mar 2025 12:13:29 -0400 Subject: [PATCH 3/3] Update .changeset/late-gorillas-sin.md --- .changeset/late-gorillas-sin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/late-gorillas-sin.md b/.changeset/late-gorillas-sin.md index e7bdc76528..48eb66c078 100644 --- a/.changeset/late-gorillas-sin.md +++ b/.changeset/late-gorillas-sin.md @@ -2,4 +2,4 @@ '@builder.io/mitosis': patch --- -Create an option to add comments in closing divs with the \_id attribute in them +[Mitosis] Feature: Create an option to add comments in closing divs with the \_id attribute in them