Add support for inline localized values for Builder (#1659)

* in progress * update generator * update * updates more * test updates * change test format * remove other test * moar * lint fix * pr updates * changeset
BuilderIO · Jan 22, 2025 · 1d74164 · 1d74164
1 parent 8b492b7
commit 1d74164
Show file tree

Hide file tree

Showing 9 changed files with 592 additions and 7 deletions.
diff --git a/.changeset/many-cooks-pull.md b/.changeset/many-cooks-pull.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+adds support to Builder parser and generator for inline localized content
diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -3991,6 +3991,353 @@ alert('hi');",
 }
 `;
 
+exports[`Builder > localization 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "<p>Time left: {state.timeLeft} seconds</p>",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "localizedValues": {
+            "component.options.text": {
+              "@type": "@builder.io/core:LocalizedValue",
+              "Default": "<p>hello default</p>",
+              "es-AR": "<p>hello argentina</p>",
+              "fr-CA": "<p>hello france</p><p><br></p>",
+            },
+          },
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "<p>hello default</p>",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "localizedValues": {
+        "component.options.image": {
+          "@type": "@builder.io/core:LocalizedValue",
+          "Default": "https://cdn.builder.io/api/v1/image/placeholder?default",
+          "es-AR": "https://cdn.builder.io/api/v1/image/placeholder?es-ar",
+          "fr-CA": "https://cdn.builder.io/api/v1/image/placeholder?fr-ca",
+        },
+      },
+      "meta": {},
+      "name": "Image",
+      "properties": {
+        "$tagName": undefined,
+        "image": "https://cdn.builder.io/api/v1/image/placeholder?default",
+      },
+      "scope": {},
+      "slots": {},
+    },
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "localizedValues": {
+        "component.options.title": {
+          "@type": "@builder.io/core:LocalizedValue",
+          "Default": "<p>hello default</p>",
+          "es-AR": "<p>hello argentina</p>",
+          "fr-CA": "<p>hello france</p><p><br></p>",
+        },
+      },
+      "meta": {},
+      "name": "CustomComponent",
+      "properties": {
+        "$tagName": undefined,
+        "title": "<p>hello default</p>",
+      },
+      "scope": {},
+      "slots": {},
+    },
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "css": {
+          "bindingType": "expression",
+          "code": "{\\"display\\":\\"flex\\",\\"flexDirection\\":\\"column\\",\\"position\\":\\"relative\\",\\"flexShrink\\":\\"0\\",\\"boxSizing\\":\\"border-box\\",\\"marginTop\\":\\"20px\\",\\"cursor\\":\\"pointer\\",\\"pointerEvents\\":\\"auto\\"}",
+          "type": "single",
+        },
+        "scriptsClientOnly": {
+          "bindingType": "expression",
+          "code": "false",
+          "type": "single",
+        },
+      },
+      "children": [],
+      "localizedValues": {
+        "linkUrl": {
+          "@type": "@builder.io/core:LocalizedValue",
+          "Default": "http://builder.io",
+        },
+        "properties.href": {
+          "@type": "@builder.io/core:LocalizedValue",
+          "Default": "http://builder.io",
+        },
+      },
+      "meta": {},
+      "name": "CustomCode",
+      "properties": {
+        "$tagName": "a",
+        "builderTag": "a",
+        "code": "<a>Link</a>
+",
+        "href": "http://builder.io",
+      },
+      "scope": {},
+      "slots": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": undefined,
+  "meta": {
+    "useMetadata": {
+      "httpRequests": undefined,
+    },
+  },
+  "name": "MyComponent",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
+exports[`Builder > localization 2`] = `
+"import { Image, CustomComponent, CustomCode } from \\"@components\\";
+
+export default function MyComponent(props) {
+  return (
+    <>
+      <div>
+        <p>Time left: {state.timeLeft} seconds</p>
+      </div>
+      <div>
+        <p>hello default</p>
+      </div>
+      <Image image=\\"https://cdn.builder.io/api/v1/image/placeholder?default\\" />
+      <CustomComponent title=\\"<p>hello default</p>\\" />
+      <CustomCode
+        $tagName=\\"a\\"
+        href=\\"http://builder.io\\"
+        code=\\"<a>Link</a>
+\\"
+        builderTag=\\"a\\"
+        scriptsClientOnly={false}
+        css={{
+          display: \\"flex\\",
+          flexDirection: \\"column\\",
+          position: \\"relative\\",
+          flexShrink: \\"0\\",
+          boxSizing: \\"border-box\\",
+          marginTop: \\"20px\\",
+          cursor: \\"pointer\\",
+          pointerEvents: \\"auto\\",
+        }}
+      />
+    </>
+  );
+}
+"
+`;
+
+exports[`Builder > localization 3`] = `
+{
+  "data": {
+    "blocks": [
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {},
+        "children": [
+          {
+            "@type": "@builder.io/sdk:Element",
+            "bindings": {},
+            "component": {
+              "name": "Text",
+              "options": {
+                "text": "<p>Time left: {{state.timeLeft}} seconds</p>",
+              },
+            },
+            "tagName": "span",
+          },
+        ],
+        "code": {
+          "actions": {},
+          "bindings": {},
+        },
+        "properties": {},
+        "tagName": "div",
+      },
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {},
+        "children": [
+          {
+            "@type": "@builder.io/sdk:Element",
+            "bindings": {},
+            "component": {
+              "name": "Text",
+              "options": {
+                "text": {
+                  "@type": "@builder.io/core:LocalizedValue",
+                  "Default": "<p>hello default</p>",
+                  "es-AR": "<p>hello argentina</p>",
+                  "fr-CA": "<p>hello france</p><p><br></p>",
+                },
+              },
+            },
+            "tagName": "span",
+          },
+        ],
+        "code": {
+          "actions": {},
+          "bindings": {},
+        },
+        "properties": {},
+        "tagName": "div",
+      },
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {},
+        "children": [],
+        "code": {
+          "actions": {},
+          "bindings": {},
+        },
+        "component": {
+          "name": "Image",
+          "options": {
+            "image": {
+              "@type": "@builder.io/core:LocalizedValue",
+              "Default": "https://cdn.builder.io/api/v1/image/placeholder?default",
+              "es-AR": "https://cdn.builder.io/api/v1/image/placeholder?es-ar",
+              "fr-CA": "https://cdn.builder.io/api/v1/image/placeholder?fr-ca",
+            },
+          },
+        },
+      },
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {},
+        "children": [],
+        "code": {
+          "actions": {},
+          "bindings": {},
+        },
+        "component": {
+          "name": "CustomComponent",
+          "options": {
+            "title": {
+              "@type": "@builder.io/core:LocalizedValue",
+              "Default": "<p>hello default</p>",
+              "es-AR": "<p>hello argentina</p>",
+              "fr-CA": "<p>hello france</p><p><br></p>",
+            },
+          },
+        },
+      },
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {
+          "component.options.scriptsClientOnly": "false",
+        },
+        "children": [],
+        "code": {
+          "actions": {},
+          "bindings": {
+            "component.options.scriptsClientOnly": "false",
+          },
+        },
+        "component": {
+          "name": "Custom Code",
+          "options": {
+            "builderTag": "a",
+            "code": "<a>Link</a>
+",
+            "href": "http://builder.io",
+            "scriptsClientOnly": false,
+          },
+        },
+        "linkUrl": {
+          "@type": "@builder.io/core:LocalizedValue",
+          "Default": "http://builder.io",
+        },
+        "properties": {
+          "href": {
+            "@type": "@builder.io/core:LocalizedValue",
+            "Default": "http://builder.io",
+          },
+        },
+        "responsiveStyles": {
+          "large": {
+            "boxSizing": "border-box",
+            "cursor": "pointer",
+            "display": "flex",
+            "flexDirection": "column",
+            "flexShrink": "0",
+            "marginTop": "20px",
+            "pointerEvents": "auto",
+            "position": "relative",
+          },
+        },
+      },
+    ],
+    "jsCode": "",
+    "tsCode": "",
+  },
+}
+`;
+
 exports[`Builder > nodes as props 1`] = `
 {
   "@type": "@builder.io/mitosis/component",

diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -18,6 +18,7 @@ import stamped from './data/blocks/stamped-io.raw.tsx?raw';
 import booleanContent from './data/builder/boolean.json?raw';
 import customComponentSlotPropertyContent from './data/builder/custom-component-slot-property.json?raw';
 import lazyLoadSection from './data/builder/lazy-load-section.json?raw';
+import localization from './data/builder/localization.json?raw';
 import slotsContent from './data/builder/slots.json?raw';
 import slots2Content from './data/builder/slots2.json?raw';
 import textBindings from './data/builder/text-bindings.json?raw';
@@ -473,6 +474,17 @@ describe('Builder', () => {
     expect(mitosis).toMatchSnapshot();
   });
 
+  test('localization', () => {
+    const originalBuilder = JSON.parse(localization);
+    const component = builderContentToMitosisComponent(originalBuilder);
+    const mitosisJsx = componentToMitosis()({ component });
+    expect(component).toMatchSnapshot();
+    expect(mitosisJsx).toMatchSnapshot();
+
+    const backToBuilder = componentToBuilder()({ component });
+    expect(backToBuilder).toMatchSnapshot();
+  });
+
   test('preserve cssCode when converting', () => {
     const builderJson: BuilderContent = {
       data: {