fix: mitosis update (#4310)

* chore(deps-dev): bump the builder-io group with 2 updates

Bumps the builder-io group with 2 updates: [@builder.io/mitosis](https://github.com/BuilderIO/mitosis) and [@builder.io/mitosis-cli](https://github.com/BuilderIO/mitosis).


Updates `@builder.io/mitosis` from 0.9.2 to 0.11.0
- [Release notes](https://github.com/BuilderIO/mitosis/releases)
- [Commits](https://github.com/BuilderIO/mitosis/compare/@builder.io/[email protected][email protected]/[email protected])

Updates `@builder.io/mitosis-cli` from 0.9.2 to 0.11.0
- [Release notes](https://github.com/BuilderIO/mitosis/releases)
- [Commits](https://github.com/BuilderIO/mitosis/compare/@builder.io/[email protected][email protected]/[email protected])

---
updated-dependencies:
- dependency-name: "@builder.io/mitosis"
  dependency-version: 0.11.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: builder-io
- dependency-name: "@builder.io/mitosis-cli"
  dependency-version: 0.11.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: builder-io
...

Signed-off-by: dependabot[bot] <[email protected]>

* fix: issues from mitosis update

* chore: update mitosis

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: nmerget

__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png

@@ -6,6 +6,7 @@ const onClickPlugin = require('../plugins/on-click.cjs');
 module.exports = {
 	typescript: true,
 	attributePassing: {
+		enabled: true,
 		customRef: '_ref'
 	},
 	api: 'signals',

package-lock.json

@@ -46,8 +46,8 @@
   },
   "devDependencies": {
     "@builder.io/eslint-plugin-mitosis": "0.0.17",
-    "@builder.io/mitosis": "0.10.0",
-    "@builder.io/mitosis-cli": "0.10.0",
+    "@builder.io/mitosis": "0.12.1",
+    "@builder.io/mitosis-cli": "0.12.1",
     "@typescript-eslint/eslint-plugin": "8.37.0",
     "cpr": "3.0.1",
     "cssnano": "7.1.0",

packages/components/configs/angular/index.cjs

@@ -1,6 +1,6 @@
 import { replaceInFileSync } from 'replace-in-file';
 
-import { readFileSync, writeFileSync } from 'node:fs';
+import { writeFileSync } from 'node:fs';
 
 import components, { Overwrite } from './components.js';
 
@@ -21,7 +21,7 @@ const setControlValueAccessorReplacements = (
 	replacements.push({
 		from: '} from "@angular/core";',
 		to:
-			`Renderer2, model } from "@angular/core";\n` +
+			`Renderer2 } from "@angular/core";\n` +
 			`import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n`
 	});
 
@@ -58,7 +58,7 @@ const setControlValueAccessorReplacements = (
 	// insert custom interface functions before ngOnInit
 	// TODO update attribute by config if necessary (e.g. for checked attribute?)
 	replacements.push({
-		from: 'ngOnInit()',
+		from: 'ngAfterViewInit()',
 		to: `
 		writeValue(value: any) {
 			${valueAccessorRequired ? 'if(value){' : ''}
@@ -83,7 +83,7 @@ const setControlValueAccessorReplacements = (
 		  this.disabled.set(disabled);
 		}
 
-		ngOnInit()`
+		ngAfterViewInit()`
 	});
 };
 
@@ -169,29 +169,12 @@ export default (tmp?: boolean) => {
 		});
 
 		const replacements: Overwrite[] = [
-			// TODO: We don't need this after Angular drops support for v17 in may 2025
 			{
 				from: /allowSignalWrites: true,/g,
 				to: ''
 			}
 		];
 
-		if (
-			readFileSync(file)
-				.toString()
-				.includes('this.initialized.set(true);')
-		) {
-			// TODO: Solve this in mitosis by splitting onInit and onMount into ngOnInit and ngAfterViewInit
-			replacements.push({
-				from: 'this.initialized.set(true);',
-				to: ''
-			});
-			replacements.push({
-				from: 'ngAfterViewInit() {',
-				to: 'ngAfterViewInit() {\nthis.initialized.set(true);\n'
-			});
-		}
-
 		if (component.config?.angular?.controlValueAccessor) {
 			setControlValueAccessorReplacements(
 				replacements,

packages/components/package.json

@@ -75,18 +75,7 @@ export const getComponents = (): Component[] => [
 				{
 					from: 'attr.checked',
 					to: 'checked'
-				},
-				// To remove whitespaces from label...
-				{
-					from: `      <label [attr.id]="_labelId()">
-        {{label() ?? DEFAULT_LABEL}}
-        <select`,
-					to: `<label [attr.id]="_labelId()">{{label() ?? DEFAULT_LABEL}}<select`
-				},
-				// TODO: Move this to mitosis
-				{ from: 'trackByOption0', to: 'trackByOption0(i,option)' },
-				{ from: 'trackByOption1', to: 'trackByOption1(index,option)' },
-				{ from: 'trackByOption2', to: 'trackByOption2(i,option)' }
+				}
 			],
 			react: [
 				{ from: 'key={uuid()}', to: 'key={getOptionLabel(option)}' }

packages/components/scripts/post-build/angular.ts

@@ -34,7 +34,10 @@ import { DBCheckboxProps, DBCheckboxState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate'],
+		signals: {
+			writeable: ['disabled', 'checked']
+		}
 	}
 });
 

packages/components/scripts/post-build/components.ts

@@ -21,7 +21,10 @@ import {
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'checked', 'value', 'name']
+		nativeAttributes: ['disabled', 'checked', 'value', 'name'],
+		signals: {
+			writeable: ['disabled', 'checked']
+		}
 	}
 });
 

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -67,7 +67,10 @@ import {
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled']
+		nativeAttributes: ['disabled', 'required', 'multiple'],
+		signals: {
+			writeable: ['disabled', 'values']
+		}
 	}
 });
 
@@ -99,6 +102,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 		_placeholderId: undefined,
 		_infoTextId: undefined,
 		_validity: 'no-validation',
+		_userInteraction: false,
 		// Workaround for Vue output: TS for Vue would think that it could be a function, and by this we clarify that it's a string
 		_descByIds: '',
 		_selectedLabels: '',
@@ -142,7 +146,9 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 					state._voiceOverFallback = state._invalidMessage;
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
-				state._validity = props.validation ?? 'invalid';
+				if (state._userInteraction) {
+					state._validity = props.validation ?? 'invalid';
+				}
 			} else if (
 				state.hasValidState() &&
 				selectRef?.validity.valid &&
@@ -422,6 +428,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 			if (skip) return;
 
 			state._values = values;
+			state._userInteraction = true;
 			if (props.onOptionSelected) {
 				props.onOptionSelected(values ?? []);
 			}
@@ -688,8 +695,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 	}, [props.values]);
 
 	onUpdate(() => {
-		state.handleValidation();
-	}, [state._values]);
+		if (selectRef) {
+			state.handleValidation();
+		}
+	}, [state._values, selectRef]);
 
 	onUpdate(() => {
 		state._validity = props.validation;

packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx

@@ -261,6 +261,7 @@ export type DBCustomSelectDefaultState = {
 	_internalChangeTimestamp: number;
 	_documentClickListenerCallbackId?: string;
 	_searchValue?: string;
+	_userInteraction?: boolean;
 	getNativeSelectValue: () => string;
 	getOptionLabel: (option: CustomSelectOptionType) => string;
 	getOptionChecked: (value?: string) => boolean;