fix attribute name block-id that should be builder-id (#1221)

* fix attribute name block-id that should be builder-id * try again * fixup! try again * fixup! try again --------- Co-authored-by: Miško Hevery <[email protected]>
BuilderIO · Jul 13, 2023 · 1b73d25 · 1b73d25 · vercel · Jul 13, 2023
1 parent d990c9c
commit 1b73d25
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 50 deletions.
diff --git a/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap b/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap
@@ -61,7 +61,7 @@ function MyComponent(props) {
           }}
         >
           <div
-            block-id=\\"builder-e0369e6217b94644b2ca95c5e7f9df9e\\"
+            builder-id=\\"builder-e0369e6217b94644b2ca95c5e7f9df9e\\"
             css={{
               display: \\"flex\\",
               flexDirection: \\"column\\",
@@ -85,7 +85,7 @@ function MyComponent(props) {
             <p>Something Great to Say</p>
           </div>
           <div
-            block-id=\\"builder-33f700bc894a4975bb34606268ec0b7f\\"
+            builder-id=\\"builder-33f700bc894a4975bb34606268ec0b7f\\"
             css={{
               display: \\"flex\\",
               flexDirection: \\"column\\",
@@ -163,7 +163,7 @@ function MyComponent(props) {
           }}
         >
           <div
-            block-id=\\"builder-399e99cdaf164ec989e69f78f405e48f\\"
+            builder-id=\\"builder-399e99cdaf164ec989e69f78f405e48f\\"
             css={{
               display: \\"flex\\",
               flexDirection: \\"column\\",
@@ -187,7 +187,7 @@ function MyComponent(props) {
             <p>Something Great to Say</p>
           </div>
           <div
-            block-id=\\"builder-7e06f73598864f728c37a63526fc993b\\"
+            builder-id=\\"builder-7e06f73598864f728c37a63526fc993b\\"
             css={{
               display: \\"flex\\",
               flexDirection: \\"column\\",
@@ -269,7 +269,7 @@ function MyComponent(props) {
           }}
         >
           <div
-            block-id=\\"builder-cd3a8932d54549979d32352c4d6d5809\\"
+            builder-id=\\"builder-cd3a8932d54549979d32352c4d6d5809\\"
             css={{
               display: \\"flex\\",
               flexDirection: \\"column\\",
@@ -293,7 +293,7 @@ function MyComponent(props) {
             <p>Something Great to Say</p>
           </div>
           <div
-            block-id=\\"builder-634fcbb6974e4897b6b387f80974dc55\\"
+            builder-id=\\"builder-634fcbb6974e4897b6b387f80974dc55\\"
             css={{
               display: \\"flex\\",
               flexDirection: \\"column\\",
@@ -434,7 +434,7 @@ function MyComponent(props) {
             }}
           >
             <div
-              block-id=\\"builder-e0369e6217b94644b2ca95c5e7f9df9e\\"
+              builder-id=\\"builder-e0369e6217b94644b2ca95c5e7f9df9e\\"
               css={{
                 display: \\"flex\\",
                 flexDirection: \\"column\\",
@@ -458,7 +458,7 @@ function MyComponent(props) {
               <p>Something Great to Say</p>
             </div>
             <div
-              block-id=\\"builder-33f700bc894a4975bb34606268ec0b7f\\"
+              builder-id=\\"builder-33f700bc894a4975bb34606268ec0b7f\\"
               css={{
                 display: \\"flex\\",
                 flexDirection: \\"column\\",
@@ -572,7 +572,7 @@ function MyComponent(props) {
             }}
           >
             <div
-              block-id=\\"builder-399e99cdaf164ec989e69f78f405e48f\\"
+              builder-id=\\"builder-399e99cdaf164ec989e69f78f405e48f\\"
               css={{
                 display: \\"flex\\",
                 flexDirection: \\"column\\",
@@ -596,7 +596,7 @@ function MyComponent(props) {
               <p>Something Great to Say</p>
             </div>
             <div
-              block-id=\\"builder-7e06f73598864f728c37a63526fc993b\\"
+              builder-id=\\"builder-7e06f73598864f728c37a63526fc993b\\"
               css={{
                 display: \\"flex\\",
                 flexDirection: \\"column\\",
@@ -714,7 +714,7 @@ function MyComponent(props) {
             }}
           >
             <div
-              block-id=\\"builder-cd3a8932d54549979d32352c4d6d5809\\"
+              builder-id=\\"builder-cd3a8932d54549979d32352c4d6d5809\\"
               css={{
                 display: \\"flex\\",
                 flexDirection: \\"column\\",
@@ -738,7 +738,7 @@ function MyComponent(props) {
               <p>Something Great to Say</p>
             </div>
             <div
-              block-id=\\"builder-634fcbb6974e4897b6b387f80974dc55\\"
+              builder-id=\\"builder-634fcbb6974e4897b6b387f80974dc55\\"
               css={{
                 display: \\"flex\\",
                 flexDirection: \\"column\\",

diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -1049,7 +1049,7 @@ export default function MyComponent(props) {
     <For each={state.submenusItem.menuItems}>
       {(item, index) => (
         <div
-          block-id=\\"builder-ID\\"
+          builder-id=\\"builder-ID\\"
           class=\\"class-id\\"
           css={{
             padding: \\"2px\\",
@@ -1064,16 +1064,16 @@ export default function MyComponent(props) {
 `;
 
 exports[`Builder > Section 1`] = `
-"<div block-id=\\"builder-82a5c11482a644a8aa74dca341e3d6f1\\" class=\\"div\\">
+"<div builder-id=\\"builder-82a5c11482a644a8aa74dca341e3d6f1\\" class=\\"div\\">
   <p>EAGER LOAD</p>
 </div>
 <div
-  block-id=\\"builder-6f37b822156149cc9033e4cbee511d2f\\"
+  builder-id=\\"builder-6f37b822156149cc9033e4cbee511d2f\\"
   class=\\"div-2\\"
   data-el=\\"div-1\\"
 >
   <section
-    block-id=\\"builder-6f37b822156149cc9033e4cbee511d2f\\"
+    builder-id=\\"builder-6f37b822156149cc9033e4cbee511d2f\\"
     lazyLoad=\\"true\\"
     class=\\"section\\"
   >

diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -215,11 +215,11 @@ export const MyComponentOnMount = (p) => {
               class=\\"csanagh\\"
             >
               <div
-                block-id=\\"builder-2cad86b387ec405d82917895d7af0a12\\"
+                builder-id=\\"builder-2cad86b387ec405d82917895d7af0a12\\"
                 class=\\"crwdrpw\\"
               >
                 <div
-                  key=\\"builder-5fed2723c1cc4fb39e9d22b9c54ef179\\"
+                  key=\\"builder-2cad86b387ec405d82917895d7af0a12\\"
                   dangerouslySetInnerHTML=\\"<p>Item 1</p>\\"
                   class=\\"builder-text\\"
                 ></div>
@@ -232,11 +232,11 @@ export const MyComponentOnMount = (p) => {
               class=\\"c4qyc1p\\"
             >
               <div
-                block-id=\\"builder-2dbfa56b8988461c8566bbe759580e9b\\"
+                builder-id=\\"builder-2dbfa56b8988461c8566bbe759580e9b\\"
                 class=\\"ctcw2m4\\"
               >
                 <div
-                  key=\\"builder-18279a99b32240f19aa21d3f4b015cc9\\"
+                  key=\\"builder-2dbfa56b8988461c8566bbe759580e9b\\"
                   dangerouslySetInnerHTML=\\"<p>Item 1 content</p>\\"
                   class=\\"builder-text\\"
                 ></div>
@@ -251,11 +251,11 @@ export const MyComponentOnMount = (p) => {
               class=\\"csanagh\\"
             >
               <div
-                block-id=\\"builder-1365fc457ece45db82ad90dbe9819e7c\\"
+                builder-id=\\"builder-1365fc457ece45db82ad90dbe9819e7c\\"
                 class=\\"crwdrpw\\"
               >
                 <div
-                  key=\\"builder-2a93def22a354cf7aa193c20d1ad6def\\"
+                  key=\\"builder-1365fc457ece45db82ad90dbe9819e7c\\"
                   dangerouslySetInnerHTML=\\"<p>Item 2</p>\\"
                   class=\\"builder-text\\"
                 ></div>
@@ -268,11 +268,11 @@ export const MyComponentOnMount = (p) => {
               class=\\"c4qyc1p\\"
             >
               <div
-                block-id=\\"builder-7362f9fd64c647c5a400d9e75c74473f\\"
+                builder-id=\\"builder-7362f9fd64c647c5a400d9e75c74473f\\"
                 class=\\"ctcw2m4\\"
               >
                 <div
-                  key=\\"builder-fd6ef41da6d040328fbd8b0801611fe5\\"
+                  key=\\"builder-7362f9fd64c647c5a400d9e75c74473f\\"
                   dangerouslySetInnerHTML=\\"<p>Item 2 content</p>\\"
                   class=\\"builder-text\\"
                 ></div>
@@ -391,11 +391,11 @@ export const MyComponentOnMount = (p) => {
             const state = __proxyMerge__(s, l);
             return (
               <div
-                block-id=\\"builder-927e0013cb8142a9bd46a4f3811d0865\\"
+                builder-id=\\"builder-927e0013cb8142a9bd46a4f3811d0865\\"
                 class=\\"cdrk993\\"
               >
                 <div
-                  key=\\"default\\"
+                  key=\\"builder-927e0013cb8142a9bd46a4f3811d0865\\"
                   class=\\"builder-text\\"
                   dangerouslySetInnerHTML={(() => {
                     try {
@@ -552,11 +552,11 @@ export const MyComponentOnMount = (p) => {
     h(
       \\"div\\",
       {
-        \\"block-id\\": \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
-        class: \\"cjrqfb1\\",
+        \\"builder-id\\": \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
+        class: \\"cjrqfb1 builder-block\\",
       },
       h(\\"div\\", {
-        key: \\"builder-fa4480d2f48a44a7a2e98cf07c54927b\\",
+        key: \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
         class: \\"builder-text\\",
         dangerouslySetInnerHTML: (() => {
           try {
@@ -789,11 +789,11 @@ export const MyComponentOnMount = (p) => {
     h(
       \\"div\\",
       {
-        \\"block-id\\": \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
-        class: \\"cjrqfb1\\",
+        \\"builder-id\\": \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
+        class: \\"cjrqfb1 builder-block\\",
       },
       h(\\"div\\", {
-        key: \\"builder-fa4480d2f48a44a7a2e98cf07c54927b\\",
+        key: \\"builder-1072afed47764e7cb37d088fd66f3a67\\",
         class: \\"builder-text\\",
         dangerouslySetInnerHTML: (() => {
           try {
@@ -980,8 +980,8 @@ exports.MyComponentOnMount = (p) => {
   return h(
     \\"div\\",
     {
-      \\"block-id\\": \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
-      class: \\"cjrqfb1\\",
+      \\"builder-id\\": \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
+      class: \\"cjrqfb1 builder-block\\",
       style: {
         backgroundColor: (() => {
           try {
@@ -993,7 +993,7 @@ exports.MyComponentOnMount = (p) => {
       },
     },
     h(\\"div\\", {
-      key: \\"default\\",
+      key: \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
       class: \\"builder-text\\",
       dangerouslySetInnerHTML: (() => {
         try {
@@ -1251,9 +1251,12 @@ export const ComponentD187055AF171488FAD843ACF045D6BF7OnMount = (p) => {
       builder-id=\\"builder-139a8479536b4c4f9c2738e724ed0952\\"
       class=\\"cj49hqu builder-block\\"
     >
-      <div block-id=\\"builder-2ae3b4104cc0478e85eff49694792d9c\\" class=\\"cjrqfb1\\">
+      <div
+        builder-id=\\"builder-2ae3b4104cc0478e85eff49694792d9c\\"
+        class=\\"cjrqfb1\\"
+      >
         <div
-          key=\\"builder-139a8479536b4c4f9c2738e724ed0952\\"
+          key=\\"builder-2ae3b4104cc0478e85eff49694792d9c\\"
           class=\\"builder-text\\"
           dangerouslySetInnerHTML={(() => {
             try {
@@ -1468,9 +1471,12 @@ exports.MyComponentOnMount = (p) => {
 
   return (
     <>
-      <div block-id=\\"builder-71f26e4ffffe4e24940aa12e5250fa5f\\" class=\\"cjrqfb1\\">
+      <div
+        builder-id=\\"builder-71f26e4ffffe4e24940aa12e5250fa5f\\"
+        class=\\"cjrqfb1 builder-block\\"
+      >
         <div
-          key=\\"default\\"
+          key=\\"builder-71f26e4ffffe4e24940aa12e5250fa5f\\"
           class=\\"builder-text\\"
           dangerouslySetInnerHTML={(() => {
             try {
@@ -1723,7 +1729,10 @@ export const MyComponentOnMount = (p) => {
   useStylesScopedQrl(qrl(\\"./low.js\\", \\"MyComponentStyles\\", []));
 
   return (
-    <div block-id=\\"builder-72cc5d17a18e4d7cb5e6a61a4cad2f94\\" class=\\"crt27f8\\">
+    <div
+      builder-id=\\"builder-72cc5d17a18e4d7cb5e6a61a4cad2f94\\"
+      class=\\"crt27f8 builder-block\\"
+    >
       <p>
         Hello <span class=\\"names\\">World</span>
       </p>
@@ -8209,8 +8218,8 @@ exports.MyComponentOnMount = (p) => {
   return h(
     \\"div\\",
     {
-      \\"block-id\\": \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
-      class: \\"cjrqfb1\\",
+      \\"builder-id\\": \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
+      class: \\"cjrqfb1 builder-block\\",
       style: {
         backgroundColor: (() => {
           try {
@@ -8222,7 +8231,7 @@ exports.MyComponentOnMount = (p) => {
       },
     },
     h(\\"div\\", {
-      key: \\"default\\",
+      key: \\"builder-192569f8d0a943398ec7ab9c327e104f\\",
       class: \\"builder-text\\",
       dangerouslySetInnerHTML: (() => {
         try {
@@ -8342,8 +8351,8 @@ export const MyComponentOnMount = (p) => {
     h(
       \\"div\\",
       {
-        \\"block-id\\": \\"builder-0362b5109657483c9f7cb083fbbef511\\",
-        class: \\"cxvcn5v\\",
+        \\"builder-id\\": \\"builder-0362b5109657483c9f7cb083fbbef511\\",
+        class: \\"cxvcn5v builder-block\\",
       },
       \\"<p>Main Text</p>\\"
     )
@@ -8476,23 +8485,23 @@ export const MyComponentOnMount = (p) => {
       ></CoreButton>
       {state.visible ? (
         <div
-          block-id=\\"builder-845ebd803c89485383568d433b6fd517\\"
+          builder-id=\\"builder-845ebd803c89485383568d433b6fd517\\"
           class=\\"cjrqfb1\\"
         >
           <div
-            key=\\"default\\"
+            key=\\"builder-845ebd803c89485383568d433b6fd517\\"
             dangerouslySetInnerHTML=\\"<p>Show when visible=true</p>\\"
             class=\\"builder-text\\"
           ></div>
         </div>
       ) : null}
       {!state.visible ? (
         <div
-          block-id=\\"builder-67baa3b2073942b99017e846759776aa\\"
+          builder-id=\\"builder-67baa3b2073942b99017e846759776aa\\"
           class=\\"cjrqfb1\\"
         >
           <div
-            key=\\"default\\"
+            key=\\"builder-67baa3b2073942b99017e846759776aa\\"
             dangerouslySetInnerHTML=\\"<p>Show when visible=false</p>\\"
             class=\\"builder-text\\"
           ></div>

diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
@@ -383,7 +383,7 @@ const componentMappers: {
       }),
     };
     const properties = { ...block.properties };
-    if (block.id) properties['block-id'] = block.id;
+    if (block.id) properties['builder-id'] = block.id;
     if (block.class) properties['class'] = block.class;
 
     if (block.layerName) {