[ENG-8368] fix escaping layerNames (#1689)

BuilderIO · Feb 18, 2025 · 93575b5 · 93575b5
1 parent 04913ee
commit 93575b5
Show file tree

Hide file tree

Showing 34 changed files with 11,850 additions and 1,344 deletions.
diff --git a/.changeset/nine-squids-melt.md b/.changeset/nine-squids-melt.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': minor
+---
+
+Normalize name to create valid className
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2073,6 +2073,25 @@ exports[`Alpine.js > jsx > Javascript Test > import types 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > layerName 1`] = `
+"<style>
+  .layer-name {
+    padding: 10px;
+  }
+</style>
+<section x-data=\\"myLayerNameComponent()\\">
+  <div class=\\"layer-name\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </div>
+</section>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myLayerNameComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > multipleOnUpdate 1`] = `
 "<div x-data=\\"multipleOnUpdate()\\" x-effect=\\"onUpdate\\"></div>
 <script>
@@ -5245,6 +5264,25 @@ exports[`Alpine.js > jsx > Typescript Test > import types 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > layerName 1`] = `
+"<style>
+  .layer-name {
+    padding: 10px;
+  }
+</style>
+<section x-data=\\"myLayerNameComponent()\\">
+  <div class=\\"layer-name\\">
+    Hello! I can run in React, Vue, Solid, or Liquid!
+  </div>
+</section>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myLayerNameComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > multipleOnUpdate 1`] = `
 "<div x-data=\\"multipleOnUpdate()\\" x-effect=\\"onUpdate\\"></div>
 <script>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -4911,6 +4911,43 @@ export class MyImportComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > layerName 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-layer-name-component\\",
+  template: \`
+    <section>
+      <div class=\\"layer-name\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .layer-name {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export default class MyLayerNameComponent {}
+
+@NgModule({
+  declarations: [MyLayerNameComponent],
+  imports: [CommonModule],
+  exports: [MyLayerNameComponent],
+})
+export class MyLayerNameComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > multipleOnUpdate 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12997,6 +13034,43 @@ export class MyImportComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > layerName 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-layer-name-component\\",
+  template: \`
+    <section>
+      <div class=\\"layer-name\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .layer-name {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export default class MyLayerNameComponent {}
+
+@NgModule({
+  declarations: [MyLayerNameComponent],
+  imports: [CommonModule],
+  exports: [MyLayerNameComponent],
+})
+export class MyLayerNameComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > multipleOnUpdate 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -4987,6 +4987,44 @@ export class MyImportComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > layerName 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-layer-name-component\\",
+  template: \`
+    <section>
+      <div class=\\"layer-name\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .layer-name {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export default class MyLayerNameComponent {}
+
+@NgModule({
+  declarations: [MyLayerNameComponent],
+  imports: [CommonModule],
+  exports: [MyLayerNameComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyLayerNameComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > multipleOnUpdate 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13206,6 +13244,44 @@ export class MyImportComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > layerName 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-layer-name-component\\",
+  template: \`
+    <section>
+      <div class=\\"layer-name\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .layer-name {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export default class MyLayerNameComponent {}
+
+@NgModule({
+  declarations: [MyLayerNameComponent],
+  imports: [CommonModule],
+  exports: [MyLayerNameComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyLayerNameComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > multipleOnUpdate 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -5155,6 +5155,43 @@ export class MyImportComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > layerName 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-layer-name-component\\",
+  template: \`
+    <section>
+      <div class=\\"layer-name\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .layer-name {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export default class MyLayerNameComponent {}
+
+@NgModule({
+  declarations: [MyLayerNameComponent],
+  imports: [CommonModule],
+  exports: [MyLayerNameComponent],
+})
+export class MyLayerNameComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > multipleOnUpdate 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13562,6 +13599,43 @@ export class MyImportComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > layerName 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-layer-name-component\\",
+  template: \`
+    <section>
+      <div class=\\"layer-name\\">
+        Hello! I can run in React, Vue, Solid, or Liquid!
+      </div>
+    </section>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+      .layer-name {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export default class MyLayerNameComponent {}
+
+@NgModule({
+  declarations: [MyLayerNameComponent],
+  imports: [CommonModule],
+  exports: [MyLayerNameComponent],
+})
+export class MyLayerNameComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > multipleOnUpdate 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";