Saltar al contenido principal
Neural UIv2.0.3Documentación
Ver v1 GitHub

Migrar de 1.x a 2.x

Planifica el cambio de generación con declaraciones publicadas, entrypoints públicos y propiedad explícita del estado.

Actualiza en una rama aislada

Core 2 es un cambio de generación, no un parche intercambiable con 1.x. Esta guía compara las declaraciones publicadas de 1.15.2 y 2.0.1. Inventaría entrypoints y bindings utilizados, crea una rama aislada, fija Angular/CDK 22 y TypeScript a versiones compatibles y sustituye una funcionalidad cada vez. Conserva el bundle de producción anterior hasta superar los tests del consumidor. No instales aliases de inputs obsoletos de 1.x.

Imports, estilos e iconos

Usa imports públicos @neural-ui/core/<entrypoint> y el entrypoint público de estilos. @neural-ui/core/icon de 1.x no existe en v2: proyecta SVG o utiliza el resolver opcional; Neural Icons sigue siendo un paquete separado opcional. Button conserva su selector y añade tone. Compara los tokens de tu tema con token-manifest en vez de copiar selectores CSS privados.

example.ts
import { NeuButtonComponent } from '@neural-ui/core/button';
import { NeuInputComponent } from '@neural-ui/core/input';
// styles.scss: @use '@neural-ui/core/styles' as *;

Formularios y nombres de campos

En Input, cambia los bindings maxlength/minlength por maxLength/minLength. Prefiere [formField] para Signal Forms y deja que el campo controle validación, disabled, touched, dirty y reset. V2 publicada también admite el puente de formularios de Angular 22 para [formControl], formControlName y ngModel cuando el contrato del componente lo permite; no deduzcas incompatibilidad porque ya no declare un proveedor CVA. Elige un propietario del formulario por control y verifica la integración real, sin un wrapper CVA paralelo.

Select y estado controlado

Select sustituye multiple por mode='single' o mode='multiple'; revisa la forma de value. editable, identityConfig y urlParam desaparecen. Configura selectionOptions y filterOptions con sus tipos públicos. El padre controla open/value cuando están enlazados. Puede rechazar una propuesta sin que el hijo cambie el estado aceptado. Traslada la sincronización de URL al router y prueba la reconstrucción de objetos con identificadores estables.

example.ts
import { Component, signal } from '@angular/core';
import { NeuSelectComponent } from '@neural-ui/core/select';

@Component({
  imports: [NeuSelectComponent],
  template: `<neu-select
    mode="multiple"
    label="Teams"
    [options]="teams"
    [(value)]="selected"
  />`,
})
export class MigratedSelection {
  readonly teams = [{ label: 'Design', value: 'design' }];
  readonly selected = signal<readonly string[]>([]);
}

Table y TreeTable

Table agrupa numerosos inputs de 1.x en opciones tipadas, layout y dataMode. Reconstruye el contrato de consulta, selección y metadatos con la API v2 en vez de renombrar mecánicamente un booleano. TreeTable sustituye nodes por data y un objeto hierarchy separado; raíces e hijos tienen estados y revisiones independientes. Las respuestas remotas deben aplicar sus identificadores y revisiones correspondientes. La exportación debe distinguir filas cargadas del conjunto remoto.

Verifica antes de retirar la instalación anterior

Compila la aplicación contra el paquete público empaquetado, sin aliases al código fuente. Verifica formularios, propuestas controladas, teclado/foco, estados vacío/error/carga, carreras remotas, cancelación y exportación. Ejecuta un consumidor SSR real y comprueba HTML inicial útil, reutilización del DOM, ausencia de NG050x y una sola primera interacción. Compara el bundle con tu baseline actual. Cualquier ruptura posterior a 2.0.1 pública requiere una decisión SemVer explícita, no un alias oculto.