Fix broken angular block

[armgjoka]

Description

Updated parsing of innerHtml which was causing issues on code gen for angular.

• format the codebase: from the root, run yarn fmt:prettier.
• update all snapshots (in core & CLI): from the root, run yarn test:update
• add Changeset entry: from the root, run yarn g:changeset and follow the CLI instructions. Alternatively, use the Changeset Github Bot to create the file.

[changeset-bot]

🦋 Changeset detected

Latest commit: 81e48f0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@builder.io/mitosis	Patch
@builder.io/mitosis-cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 81e48f0.

Command	Status	Duration	Result
nx e2e @builder.io/e2e-app	✅ Succeeded	1m 9s	View ↗
nx run-many --target test	✅ Succeeded	4m 47s	View ↗
nx run-many --target build --exclude @builder.i...	✅ Succeeded	3m 41s	View ↗
nx build @builder.io/mitosis-site	✅ Succeeded	2m 20s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-20 21:51:37 UTC

[samijaber]

in general, we have the approach of using expect(template).toMatchInlineSnapshot() so that we can notice any surprising changes across all tests when new PRs are made.

If you don't mind adding inline snapshots for relevant objects. See https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/__tests__/builder.test.ts for examples of how we use it.

oyou just write toMatchInlineSnapshot(), and once you run the tests it will populate it. See https://vitest.dev/guide/snapshot#inline-snapshots

[armgjoka]

@samijaber thanks for the suggestion, updated it

[sidmohanty11]

we still need to convert this to [innerHTML]="'${safeValue}'" right?

import {Component} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <div [innerHTML]="'hello &quot;'">

    </div>
  `,
})
export class PlaygroundComponent {}

bootstrapApplication(PlaygroundComponent);

innerHTML="text" doesn't work in https://angular.dev/playground

[sidmohanty11]

Last bit, can we please add a test for this? From Mitosis -> Angular generation?

For example, we can use this as the *.raw.tsx

export default function MyComponent(props) {
  return (
    <div innerHTML='hello "'>
      Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks!
    </div>
  );
}

this should convert the quote and update the innerHTML to [innerHTML]

To do this,

• we can add a new raw file here: https://github.com/BuilderIO/mitosis/tree/main/packages/core/src/__tests__/data/angular
• include this test here: https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/__tests__/test-generator.ts#L366
• update the snapshots