Fix/class classname consolidation (#1584)

* f * f * f
BuilderIO · Oct 7, 2024 · dad8e2f · dad8e2f
1 parent 4e277a9
commit dad8e2f
Show file tree

Hide file tree

Showing 28 changed files with 628 additions and 184 deletions.
diff --git a/.changeset/soft-moles-dream.md b/.changeset/soft-moles-dream.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Fix: do not consolidate class and className for Mitosis components
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1500,8 +1500,13 @@ exports[`Alpine.js > jsx > Javascript Test > class + ClassName + css 1`] = `
     padding: 10px;
   }
 </style>
-<div class=\\"test2 test div\\" x-data=\\"myBasicComponent()\\">
-  Hello! I can run in React, Vue, Solid, or Liquid!
+<div x-data=\\"myBasicComponent()\\">
+  <MyComp class=\\"test\\" className=\\"test2\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </MyComp>
+  <div class=\\"test2 test div\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </div>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -4288,8 +4293,13 @@ exports[`Alpine.js > jsx > Typescript Test > class + ClassName + css 1`] = `
     padding: 10px;
   }
 </style>
-<div class=\\"test2 test div\\" x-data=\\"myBasicComponent()\\">
-  Hello! I can run in React, Vue, Solid, or Liquid!
+<div x-data=\\"myBasicComponent()\\">
+  <MyComp class=\\"test\\" className=\\"test2\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </MyComp>
+  <div class=\\"test2 test div\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </div>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -3339,11 +3339,18 @@ import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
 
+import MyComp from \\"./my-component.lite\\";
+
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -3361,7 +3368,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
 })
 export class MyBasicComponentModule {}
@@ -10522,11 +10529,18 @@ import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
 
+import MyComp from \\"./my-component.lite\\";
+
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -10544,7 +10558,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
 })
 export class MyBasicComponentModule {}

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -3384,11 +3384,18 @@ import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
 
+import MyCompModule from \\"./my-component.lite/angular\\";
+
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -3406,7 +3413,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
   bootstrap: [SomeOtherComponent],
 })
@@ -10682,11 +10689,18 @@ import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
 
+import MyCompModule from \\"./my-component.lite/angular\\";
+
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -10704,7 +10718,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
   bootstrap: [SomeOtherComponent],
 })

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -3447,8 +3447,13 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -3466,7 +3471,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
 })
 export class MyBasicComponentModule {}
@@ -10875,8 +10880,13 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -10894,7 +10904,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
 })
 export class MyBasicComponentModule {}

diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -3063,8 +3063,13 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -3079,7 +3084,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
 })
 export class MyBasicComponentModule {}
@@ -9515,8 +9520,13 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -9531,7 +9541,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
 })
 export class MyBasicComponentModule {}

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -6356,8 +6356,13 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -6375,7 +6380,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
 })
 export class MyBasicComponentModule {}
@@ -6386,11 +6391,18 @@ exports[`Angular > jsx > Javascript Test > class + ClassName + css 2`] = `
 "import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
+import MyComp from \\"./my-component.js\\";
+
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -6404,7 +6416,7 @@ import { CommonModule } from \\"@angular/common\\";
     \`,
   ],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, MyComp],
 })
 export default class MyBasicComponent {}
 "
@@ -19887,8 +19899,13 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -19906,7 +19923,7 @@ export default class MyBasicComponent {}
 
 @NgModule({
   declarations: [MyBasicComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, MyCompModule],
   exports: [MyBasicComponent],
 })
 export class MyBasicComponentModule {}
@@ -19917,11 +19934,18 @@ exports[`Angular > jsx > Typescript Test > class + ClassName + css 2`] = `
 "import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
+import MyComp from \\"./my-component.js\\";
+
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test2 test div\\">
-      Hello! I can run in React, Vue, Solid, or Liquid!
+    <div>
+      <my-comp class=\\"test\\" className=\\"test2\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </my-comp>
+      <div class=\\"test2 test div\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
     </div>
   \`,
   styles: [
@@ -19935,7 +19959,7 @@ import { CommonModule } from \\"@angular/common\\";
     \`,
   ],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, MyComp],
 })
 export default class MyBasicComponent {}
 "

diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -3610,8 +3610,13 @@ exports[`Html > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 `;
 
 exports[`Html > jsx > Javascript Test > class + ClassName + css 1`] = `
-"<div class=\\"test2 test div\\">
-  Hello! I can run in React, Vue, Solid, or Liquid!
+"<div>
+  <MyComp class=\\"test\\" className=\\"test2\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </MyComp>
+  <div class=\\"test2 test div\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </div>
 </div>
 <style>
   .div {
@@ -10550,8 +10555,13 @@ exports[`Html > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 `;
 
 exports[`Html > jsx > Typescript Test > class + ClassName + css 1`] = `
-"<div class=\\"test2 test div\\">
-  Hello! I can run in React, Vue, Solid, or Liquid!
+"<div>
+  <MyComp class=\\"test\\" className=\\"test2\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </MyComp>
+  <div class=\\"test2 test div\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </div>
 </div>
 <style>
   .div {