diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap index fae5404a38..39bf392a61 100644 --- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap @@ -10997,7 +10997,7 @@ export const MyComponentOnMount = (p) => { h(\\"div\\", { key: \\"builder-5bdc93549f3a4c30b28e85aa1fd91a1c\\", dangerouslySetInnerHTML: - '\\\\n \\\\n \\\\n\\\\n', + '\\"\\\\\\\\n \\\\\\\\n \\\\\\\\n\\\\\\\\n\\"', }) ); }; diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts index 8b3f97e664..237a163490 100644 --- a/packages/core/src/__tests__/test-generator.ts +++ b/packages/core/src/__tests__/test-generator.ts @@ -178,6 +178,9 @@ const SVELTE_SYNTAX_TESTS: Tests = { textExpressions: getRawFile('./syntax/svelte/text-expressions.raw.svelte'), }; +const BuilderRenderContentTests: Tests = { + basic + const REACT_NATIVE_TESTS: Tests = { onClickToPressable, inputToTextInputRN, @@ -646,6 +649,14 @@ export const runTestsForSvelteSyntax = () => { }); }; +export const runTestsForBuilderSyntax = () => { + Object.keys(BuilderRenderContentTests).forEach((key) => { + test(key, async () => { + const singleTest = BuilderRenderContentTests[key]; + const t = isTestWithFailFor(singleTest) ? singleTest.file : singleTest; + }); + }); +}; const tsProject = createTypescriptProject(__dirname + '/tsconfig.json'); const filterTests = (testArray?: Tests[], only?: string[]) => @@ -720,6 +731,11 @@ export const runTestsForTarget = ({ parser: async ({ code }) => parseSvelte(code), testsArray: filterTests([SVELTE_SYNTAX_TESTS], only), }, + { + name: 'builder', + parser: async ({ code }) => parseBuilder(code), + testsArray: filterTests([BuilderRenderContentTests], only), + }, ]; for (const { name, parser, testsArray } of parsers) { if (testsArray) { diff --git a/packages/core/src/parsers/svelte/index.ts b/packages/core/src/parsers/svelte/index.ts index 594adb7c7b..12e4fd131b 100644 --- a/packages/core/src/parsers/svelte/index.ts +++ b/packages/core/src/parsers/svelte/index.ts @@ -11,6 +11,7 @@ import { collectTypes, isTypeScriptComponent } from './typescript'; import type { Ast } from 'svelte/types/compiler/interfaces'; import type { MitosisComponent } from '../../types/mitosis-component'; +import { builderContentToMitosisComponent } from '../builder/builder'; import type { SveltosisComponent } from './types'; function mapAstToMitosisJson( @@ -74,3 +75,12 @@ export const parseSvelte = async function ( const componentName = path.split('/').pop()?.split('.')[0] ?? 'MyComponent'; return mapAstToMitosisJson(ast, componentName, string_, usesTypescript); }; + +export const parseBuilderSyntax = async function ( + string_: string, + path = 'MyComponent.svelte', +): Promise { + const component = builderContentToMitosisComponent(JSON.parse(string_)); + + return component; +}; diff --git a/packages/core/src/plugins/compile-away-builder-components.ts b/packages/core/src/plugins/compile-away-builder-components.ts index ef9fb881a7..5038fed689 100644 --- a/packages/core/src/plugins/compile-away-builder-components.ts +++ b/packages/core/src/plugins/compile-away-builder-components.ts @@ -207,7 +207,7 @@ export const components: CompileAwayComponentsMap = { createMitosisNode({ name: (node.properties.builderTag as string) || 'div', properties: { - innerHTML: node.properties.code || '', + innerHTML: JSON.stringify(node.properties.code || ''), }, bindings: bindings, }),