Skip to content

Commit

Permalink
docs: Add Spanish translations to Injector/Intl doc pages (#199)
Browse files Browse the repository at this point in the history
* docs: Translate Injector pages to Spanish

* docs: Translate Intl page to Spanish

* Address feedback (missing translations, removing original language text)
  • Loading branch information
rlmestre authored Dec 11, 2023
1 parent 3f7914c commit a2e33ef
Show file tree
Hide file tree
Showing 13 changed files with 1,457 additions and 0 deletions.
62 changes: 62 additions & 0 deletions docs/src/content/docs/es/utilities/Injectors/active-element.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
title: injectActiveElement
description: Una utilidad de Angular para crear un Observable que emite el elemento activo del documento.
badge: stable
contributor: nevzat-topçu
---

## Importa la función

```ts
import { injectActiveElement } from 'ngxtension/active-element';
```

## Uso

### Básico

Crea un Observable que emite cuando el elemento activo -enfocado- cambia.

```ts
import { Component } from '@angular/core';
import { injectActiveElement } from 'ngxtension/active-element';

@Component({
standalone: true,
selector: 'app-example',
template: `
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<span>{{ (activeElement$ | async)?.innerHTML }}</span>
`,
})
export class ExampleComponent {
activeElement$ = injectActiveElement();
}
```

## Uso fuera de un contexto de inyección

La función `injectActiveElement` acepta un parámetro `Injector` opcional, lo que permite su uso fuera de un contexto de inyección.

```ts
@Component()
export class ExampleComponent implements OnInit {
private readonly injector = inject(Injector);

ngOnInit() {
const activeElement$ = injectActiveElement(this.injector);
}
}
```

## API

### Inputs

- `injector?: Injector` - Opcional. Permite usar la función fuera de un contexto de inyección de Angular.

### Outputs

- Emite un Observable del HTMLElement activo del documento.
82 changes: 82 additions & 0 deletions docs/src/content/docs/es/utilities/Injectors/assert-injector.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
---
title: assertInjector
description: Una utilidad de Angular para afirmar que una función se invoca en un contexto de inyección y devolver el Injector garantizado.
badge: stable
contributor: chau-tran
---

`assertInjector` es una extensión de [`assertInInjectionContext`](https://angular.io/api/core/assertInInjectionContext) que acepta una `Function` y un `Injector` personalizado opcional.

`assertInjector` afirmará que la `Function` se invoque en un [Contexto de Inyección](https://angular.io/guide/dependency-injection-context) y devolverá un `Injector` **garantizado** ya sea el _personalizado_ que se pasa o el _predeterminado_.

```ts
import { assertInjector } from 'ngxtension/assert-injector';
```

## Uso

`assertInjector` se usa principalmente para las funciones de inyección personalizadas (CIF) o funciones abstractas que pueden depender de un Contexto de Inyección (como: `effect()` o `takeUntilDestroyed()`).

```ts
export function toSignal<T>(observable: Observable<T>, injector?: Injector): Signal<T> {
injector = assertInjector(toSignal, injector);
return runInInjectionContext(injector, () => {
const source = signal<T>(undefined!);

effect((onCleanup) => {
const sub = observable.subscribe((value) => {
source.set(value);
});
onCleanup(() => sub.unsubscribe());
});

return source.asReadonly();
});
}
```

## Afirmar y ejecutar

`assertInjector` también puede aceptar un `runner` que es una función que se invocará en el contexto de inyección del `Injector` garantizado que afirma. Este uso acorta el CIF al no tener que llamar explícitamente a `runInInjectionContext`.

```ts
export function toSignal<T>(observable: Observable<T>, injector?: Injector): Signal<T> {
return assertInjector(toSignal, injector, () => {
const source = signal<T>(undefined!);

effect((onCleanup) => {
const sub = observable.subscribe((value) => {
source.set(value);
});
onCleanup(() => sub.unsubscribe());
});

return source.asReadonly();
});
}
```

### Recuperar el `Injector` afirmado

Como el `runner` se invoca con el contexto del `Injector` afirmado, podemos recuperar _ese_ `Injector` con `inject(Injector)` en el cuerpo del `runner`. Por ejemplo, un `effect()` anidado podría necesitar el `Injector`.

```ts
export function injectFoo(injector?: Injector) {
return assertInjector(injectFoo, injector, () => {
const assertedInjector = inject(Injector);

// 👇 el efecto externo se ejecuta automáticamente en el Contexto de Inyección
effect(() => {
/* hacer algo para el efecto externo */
effect(
() => {
/* hacer algo para el efecto interno */
},
{ injector: assertedInjector },
);
});

return 'foo';
});
}
```
99 changes: 99 additions & 0 deletions docs/src/content/docs/es/utilities/Injectors/auto-effect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
---
title: injectAutoEffect
description: Una utilidad de Angular para crear un Effect auto-alambrado.
badge: stable
contributor: chau-tran
---

`injectAutoEffect` es una CIF que devuelve un `Effect` _auto-alambrado_, por tanto el nombre `auto-effect`. Este `Effect` se puede usar en lugares que no tienen un Contexto de Inyección **implícito** como `ngOnInit` o `afterNextRender`.

```ts
import { injectAutoEffect } from 'ngxtension/auto-effect';
```

## Uso

```ts
@Component()
export class MyComponent {
@Input({ required: true }) data!: Signal<Data>;

private autoEffect = injectAutoEffect();

constructor() {
// Esto NO FUNCIONARÁ porque la entrada `data` aún no se ha resuelto
effect(() => {
console.log(this.data());
});
}

ngOnInit() {
// `data` Input no se resuelve hasta que se invoca `ngOnInit`
this.autoEffect(() => {
console.log(this.data());
});
}
}
```

### Función de limpieza

Un `effect()` normal puede opcionalmente invocar el argumento `onCleanup` para ejecutar alguna lógica de limpieza cada vez que se invoca el `Effect`.

```ts
effect((onCleanup) => {
const sub = interval(1000).subscribe();
onCleanup(() => sub.unsubscribe());
});
```

`injectAutoEffect()` permite a los consumidores **devolver** un `CleanUpFn` en su lugar. Esto es puramente preferencia y no tiene ningún efecto
en el rendimiento de `effect()`

```ts
const autoEffect = injectAutoEffect();
autoEffect(() => {
const sub = interval(1000).subscribe():
return () => sub.unsubscribe();
})
```

### Efecto Anidado

Para un `effect` normal, siempre necesitamos pasar el `Injector` al segundo parámetro de `effect()` anidado.

```ts
effect((onCleanup) => {
const innerEffectRef = effect(
() => {
/* lógica de efecto interno */
},
{ manualCleanup: true, injector: injector },
);
onCleanup(() => innerEffectRef.destroy());
});
```

Con `injectAutoEffect()`, `autoEffect` siempre se invocará con el `Injector` inicial (donde invocamos `injectAutoEffect()`).

```ts
const autoEffect = injectAutoEffect();
autoEffect(() => {
const innerEffectRef = autoEffect(
() => {
/* lógica de efecto interno */
},
{ manualCleanup: true },
);
return () => innerEffectRef.destroy();
});
```

Opcionalmente, el callback `autoEffect` expone el `Injector` para que los consumidores puedan usarlo si es necesario..

```ts
const autoEffect = injectAutoEffect();
autoEffect((injector) => {
/* do something */
});
```
Loading

0 comments on commit a2e33ef

Please sign in to comment.