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\\"',
})
);
};
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,
}),