project x

BuilderIO · Feb 5, 2025 · d646733 · d646733
1 parent cf666ff
commit d646733
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git 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:
-        '<svg\\\\n  width=\\"42\\"\\\\n  height=\\"42\\"\\\\n  viewBox=\\"0 0 42 42\\"\\\\n  fill=\\"none\\"\\\\n  xmlns=\\"http://www.w3.org/2000/svg\\"\\\\n>\\\\n  <path\\\\n    d=\\"M19.626 0.0327762C19.5357 0.0409786 19.2486 0.0696867 18.9903 0.0901925C13.0313 0.627445 7.4496 3.84276 3.9144 8.78466C1.94585 11.5324 0.686788 14.6493 0.211053 17.9508C0.0429057 19.1032 0.0223999 19.4436 0.0223999 21.0061C0.0223999 22.5687 0.0429057 22.9091 0.211053 24.0615C1.35118 31.9398 6.95747 38.5591 14.561 41.0116C15.9226 41.4504 17.358 41.7498 18.9903 41.9302C19.626 42 22.3737 42 23.0094 41.9302C25.8269 41.6186 28.2138 40.9214 30.5679 39.7197C30.9288 39.5352 30.9985 39.486 30.9493 39.4449C30.9165 39.4203 29.3785 37.3575 27.533 34.8639L24.1782 30.3322L19.9746 24.1107C17.6615 20.6903 15.7586 17.8933 15.7422 17.8933C15.7257 17.8892 15.7093 20.6534 15.7011 24.0287C15.6888 29.9385 15.6847 30.1763 15.6109 30.3158C15.5043 30.5167 15.4223 30.5987 15.25 30.689C15.1188 30.7546 15.0039 30.7669 14.3847 30.7669H13.6752L13.4865 30.648C13.3635 30.57 13.2733 30.4675 13.2117 30.3486L13.1256 30.164L13.1338 21.9412L13.1461 13.7143L13.2733 13.5543C13.3389 13.4682 13.4783 13.3575 13.5767 13.3041C13.7449 13.2221 13.8105 13.2139 14.52 13.2139C15.3566 13.2139 15.4961 13.2467 15.7134 13.4846C15.775 13.5502 18.0511 16.9788 20.7743 21.1086C23.4975 25.2385 27.2213 30.8776 29.0504 33.6459L32.3724 38.678L32.5405 38.5673C34.0292 37.5994 35.6041 36.2214 36.8508 34.786C39.5043 31.7389 41.2145 28.0232 41.7886 24.0615C41.9568 22.9091 41.9773 22.5687 41.9773 21.0061C41.9773 19.4436 41.9568 19.1032 41.7886 17.9508C40.6485 10.0724 35.0422 3.45315 27.4387 1.00065C26.0976 0.565927 24.6704 0.266542 23.0709 0.0860913C22.6772 0.0450797 19.9664 -3.30508e-05 19.626 0.0327762ZM28.2138 12.7218C28.4106 12.8202 28.5706 13.0089 28.628 13.2057C28.6608 13.3123 28.669 15.5926 28.6608 20.7313L28.6485 28.1052L27.3484 26.1121L26.0443 24.1189V18.7587C26.0443 15.2932 26.0607 13.3451 26.0853 13.2508C26.1509 13.0212 26.2944 12.8407 26.4913 12.7341C26.6595 12.648 26.721 12.6397 27.3649 12.6397C27.9718 12.6397 28.0785 12.648 28.2138 12.7218Z\\"\\\\n    fill=\\"#9CD3D7\\"\\\\n  />\\\\n  <path\\\\n    d=\\"M32.1674 38.7681C32.0239 38.8584 31.9787 38.9199 32.1059 38.8502C32.1961 38.7968 32.3437 38.6861 32.3191 38.682C32.3068 38.682 32.2371 38.723 32.1674 38.7681ZM31.8844 38.9527C31.8106 39.0101 31.8106 39.0142 31.9008 38.9691C31.95 38.9445 31.991 38.9158 31.991 38.9076C31.991 38.8748 31.9705 38.883 31.8844 38.9527ZM31.6794 39.0757C31.6055 39.1331 31.6055 39.1372 31.6958 39.0921C31.745 39.0675 31.786 39.0388 31.786 39.0306C31.786 38.9978 31.7655 39.006 31.6794 39.0757ZM31.4743 39.1988C31.4005 39.2562 31.4005 39.2603 31.4907 39.2152C31.5399 39.1906 31.5809 39.1618 31.5809 39.1536C31.5809 39.1208 31.5604 39.129 31.4743 39.1988ZM31.1626 39.3628C31.0068 39.4448 31.015 39.4776 31.1708 39.3997C31.2405 39.3628 31.2938 39.3259 31.2938 39.3177C31.2938 39.289 31.2897 39.2931 31.1626 39.3628Z\\"\\\\n    fill=\\"#9CD3D7\\"\\\\n  />\\\\n</svg>\\\\n',
+        '\\"<svg\\\\\\\\n  width=\\\\\\\\\\"42\\\\\\\\\\"\\\\\\\\n  height=\\\\\\\\\\"42\\\\\\\\\\"\\\\\\\\n  viewBox=\\\\\\\\\\"0 0 42 42\\\\\\\\\\"\\\\\\\\n  fill=\\\\\\\\\\"none\\\\\\\\\\"\\\\\\\\n  xmlns=\\\\\\\\\\"http://www.w3.org/2000/svg\\\\\\\\\\"\\\\\\\\n>\\\\\\\\n  <path\\\\\\\\n    d=\\\\\\\\\\"M19.626 0.0327762C19.5357 0.0409786 19.2486 0.0696867 18.9903 0.0901925C13.0313 0.627445 7.4496 3.84276 3.9144 8.78466C1.94585 11.5324 0.686788 14.6493 0.211053 17.9508C0.0429057 19.1032 0.0223999 19.4436 0.0223999 21.0061C0.0223999 22.5687 0.0429057 22.9091 0.211053 24.0615C1.35118 31.9398 6.95747 38.5591 14.561 41.0116C15.9226 41.4504 17.358 41.7498 18.9903 41.9302C19.626 42 22.3737 42 23.0094 41.9302C25.8269 41.6186 28.2138 40.9214 30.5679 39.7197C30.9288 39.5352 30.9985 39.486 30.9493 39.4449C30.9165 39.4203 29.3785 37.3575 27.533 34.8639L24.1782 30.3322L19.9746 24.1107C17.6615 20.6903 15.7586 17.8933 15.7422 17.8933C15.7257 17.8892 15.7093 20.6534 15.7011 24.0287C15.6888 29.9385 15.6847 30.1763 15.6109 30.3158C15.5043 30.5167 15.4223 30.5987 15.25 30.689C15.1188 30.7546 15.0039 30.7669 14.3847 30.7669H13.6752L13.4865 30.648C13.3635 30.57 13.2733 30.4675 13.2117 30.3486L13.1256 30.164L13.1338 21.9412L13.1461 13.7143L13.2733 13.5543C13.3389 13.4682 13.4783 13.3575 13.5767 13.3041C13.7449 13.2221 13.8105 13.2139 14.52 13.2139C15.3566 13.2139 15.4961 13.2467 15.7134 13.4846C15.775 13.5502 18.0511 16.9788 20.7743 21.1086C23.4975 25.2385 27.2213 30.8776 29.0504 33.6459L32.3724 38.678L32.5405 38.5673C34.0292 37.5994 35.6041 36.2214 36.8508 34.786C39.5043 31.7389 41.2145 28.0232 41.7886 24.0615C41.9568 22.9091 41.9773 22.5687 41.9773 21.0061C41.9773 19.4436 41.9568 19.1032 41.7886 17.9508C40.6485 10.0724 35.0422 3.45315 27.4387 1.00065C26.0976 0.565927 24.6704 0.266542 23.0709 0.0860913C22.6772 0.0450797 19.9664 -3.30508e-05 19.626 0.0327762ZM28.2138 12.7218C28.4106 12.8202 28.5706 13.0089 28.628 13.2057C28.6608 13.3123 28.669 15.5926 28.6608 20.7313L28.6485 28.1052L27.3484 26.1121L26.0443 24.1189V18.7587C26.0443 15.2932 26.0607 13.3451 26.0853 13.2508C26.1509 13.0212 26.2944 12.8407 26.4913 12.7341C26.6595 12.648 26.721 12.6397 27.3649 12.6397C27.9718 12.6397 28.0785 12.648 28.2138 12.7218Z\\\\\\\\\\"\\\\\\\\n    fill=\\\\\\\\\\"#9CD3D7\\\\\\\\\\"\\\\\\\\n  />\\\\\\\\n  <path\\\\\\\\n    d=\\\\\\\\\\"M32.1674 38.7681C32.0239 38.8584 31.9787 38.9199 32.1059 38.8502C32.1961 38.7968 32.3437 38.6861 32.3191 38.682C32.3068 38.682 32.2371 38.723 32.1674 38.7681ZM31.8844 38.9527C31.8106 39.0101 31.8106 39.0142 31.9008 38.9691C31.95 38.9445 31.991 38.9158 31.991 38.9076C31.991 38.8748 31.9705 38.883 31.8844 38.9527ZM31.6794 39.0757C31.6055 39.1331 31.6055 39.1372 31.6958 39.0921C31.745 39.0675 31.786 39.0388 31.786 39.0306C31.786 38.9978 31.7655 39.006 31.6794 39.0757ZM31.4743 39.1988C31.4005 39.2562 31.4005 39.2603 31.4907 39.2152C31.5399 39.1906 31.5809 39.1618 31.5809 39.1536C31.5809 39.1208 31.5604 39.129 31.4743 39.1988ZM31.1626 39.3628C31.0068 39.4448 31.015 39.4776 31.1708 39.3997C31.2405 39.3628 31.2938 39.3259 31.2938 39.3177C31.2938 39.289 31.2897 39.2931 31.1626 39.3628Z\\\\\\\\\\"\\\\\\\\n    fill=\\\\\\\\\\"#9CD3D7\\\\\\\\\\"\\\\\\\\n  />\\\\\\\\n</svg>\\\\\\\\n\\"',
     })
   );
 };

diff --git 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 = <X extends BaseTranspilerOptions>({
         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
@@ -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<MitosisComponent> {
+  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
@@ -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,
       }),