open-index/open-npm huggingface dataset:
npm package: @jscutlery/cypress-angular-dev-server
Description: This is an internal package used by [`@jscutlery/cypress-angular`](https://github.com/jscutlery/devkit/tree/main/packages/cypress-angular).
Latest version: 1.7.18

# Cypress Angular Dev Server

This is an internal package used by [`@jscutlery/cypress-angular`](https://github.com/jscutlery/devkit/tree/main/packages/cypress-angular).

It is a helper for starting a Cypress 7+ dev server for Angular. It is used to build components in Cypress to be used in combination with [`@jscutlery/cypress-mount`](https://github.com/jscutlery/devkit/tree/main/packages/cypress-mount).

It can be enabled by adding the configuration below to the `*-e2e/src/plugins/index.ts` file:

```ts
import { startAngularDevServer } from '@jscutlery/cypress-angular-dev-server';

module.exports = (on, config) => {
  on('dev-server:start', (options) =>
    startAngularDevServer({ options, tsConfig: 'tsconfig.cypress.json' })
  );
  return config;
};
```

## Custom Webpack configuration

It's possible to pass a custom Webpack configuration that will be merged with the Angular CLI configuration.

```ts
import { startAngularDevServer } from '@jscutlery/cypress-angular-dev-server';

module.exports = (on, config) => {
  on('dev-server:start', (options) =>
    startAngularDevServer({
      options,
      webpackConfig: { node: { global: true } },
    })
  );
  return config;
};
```
npm package: @jscutlery/cypress-angular-preprocessor
Description: **Deprecated**: Cypress >= 7 requires the new adapter [@jscutlery/cypress-angular-dev-server](https://github.com/jscutlery/test-utils/tree/main/packages/cypress-angular-dev-server) to build Angular components.
Latest version: 0.5.0

# Cypress Angular Preprocessor

**Deprecated**: Cypress >= 7 requires the new adapter [@jscutlery/cypress-angular-dev-server](https://github.com/jscutlery/test-utils/tree/main/packages/cypress-angular-dev-server) to build Angular components.

This is a Cypress preprocessor adapter of Angular's webpack plugin.
It is used to build components in Cypress to be used in combination with [`@jscutlery/cypress-mount`](https://github.com/jscutlery/test-utils/tree/main/packages/cypress-mount) in order to build Angular components.

It can be enabled by adding the configuration below to the `*-e2e/src/plugins/index.js` file:

```ts
const {
  angularPreprocessor,
} = require('@jscutlery/cypress-angular-preprocessor');

module.exports = (on, config) => {
  on('file:preprocessor', angularPreprocessor(config));
};
```
npm package: @jscutlery/cypress-harness
Description: ## The Background Story
Latest version: 0.8.10

# Cypress Harness

## The Background Story

Both unit-testing and e2e testing can get tricky when it comes to interacting with the DOM. In fact, **tests have to be decoupled from the implementation details of the code they test**. Especially if you are interacting with same components of an app in different tests.

This often happens with UI libraries like [Angular Material](https://material.angular.io/) and that is why the Angular Material's team came up with the amazing idea of creating a testing abstraction layer over components called [Component Test Harnesses](https://material.angular.io/cdk/test-harnesses/overview).

One of the most interesting ideas behind Component Test Harnesses is that they are also meant to be platform agnostic, which means they can be used in your unit-tests with Jest or Karma, in your e2e tests with Protractor or Cypress or in your [Cypress Component Tests](../cypress-mount/README.md).

**This library provides Cypress support to Component Test Harnesses.**

![Angular Material Datepicker Harness in Cypress](./cypress-harness.gif)

## Setup

### 1. Install

```shell
yarn add -D @jscutlery/cypress-harness @angular/cdk cypress-pipe

# or

npm install -D @jscutlery/cypress-harness @angular/cdk cypress-pipe
```

### 2. Setup

#### 2.a. Cypress E2E

Update your e2e folder's `cypress/support/e2e.ts` and add:

```ts
import '@jscutlery/cypress-harness/support';
```

then update the `cypress.config.ts` file as follows:

```ts
import { defineConfig } from 'cypress';
import { getPreprocessorConfig } from '@jscutlery/cypress-harness/preprocessor-config';

export default defineConfig({
  e2e: {
    // ... other existing settings if any (like nxE2EPreset() if using Nx).
    ...getPreprocessorConfig(),
  },
});
```

This last part is needed to add support for [package exports conditionals](https://nodejs.org/api/packages.html#conditional-exports)
and allow us to import harnesses from `@angular/cdk/testing` for example.

#### 2.b. Cypress Component Testing

If you are using Cypress Component Testing then there is a different import to add to the following file: `cypress/support/component.ts`:

```ts
import '@jscutlery/cypress-harness/support-ct';
```

_(the `getPreprocessorConfig()` is not required here as it is already set up by `cypress/angular`.)_

## Usage

```ts
describe('datepicker', () => {
  /* getHarness & getAllHarnesses are lazy so you can
   * initialize them wherever you want and reuse them. */
  const datepicker = getHarness(MatDatepickerInputHarness);
  const calendars = getAllHarnesses(MatCalendarHarness);

  it('should set date', () => {
    cy.visit('/'); // or cy.mount(MyComponent); for component testing.
    datepicker.setValue('1/1/2010');
    datepicker.openCalendar();
    datepicker.getCalendar().then((harness) => harness.next()); // next method is already used
    datepicker.getCalendar().selectCell({ text: '10' });
    datepicker.getValue().should('equal', '2/10/2010');
    calendars.should('be.empty');
  });
});
```
npm package: @jscutlery/cypress-mount
Description: **⚠️ This package is now internal, please use [`@jscutlery/cypress-angular`](../../packages/cypress-angular) instead. **
Latest version: 0.12.7

# Cypress Mount

**⚠️ This package is now internal, please use [`@jscutlery/cypress-angular`](../../packages/cypress-angular) instead.
**

This module brings Angular support to [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction.html#What-is-Cypress-Component-Testing).

It is aiming to make Cypress Component Testing with Angular easier than writing code without tests 😜.

## Cypress Component Testing

[Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction.html#What-is-Cypress-Component-Testing) is the missing balance between component unit-testing and pure e2e testing.

It will help you enjoy both the benefits of unit-tests isolation and Cypress tooling & Developer eXperience.

## Setup

### 0. Use NX

Cypress Component Testing _(and everything else)_ is easier with [Nx](https://nx.dev/latest/angular/getting-started/why-nx).

If you are writing a new app, you can create a Nx workspace with the following command:

```shell
yarn create nx-workspace # or npm init nx-workspace
```

... otherwise, you can migrate to Nx using:

```shell
ng add @nrwl/workspace
```

### 1. Install

The following install guide targets Cypress >= 7, follow [this guide](./docs/experimental-install.md) for Cypress < 7.

```shell
yarn add -D @jscutlery/cypress-mount @jscutlery/cypress-angular-dev-server @cypress/webpack-dev-server html-webpack-plugin

# or

npm install -D @jscutlery/cypress-mount @jscutlery/cypress-angular-dev-server @cypress/webpack-dev-server html-webpack-plugin
```

### 2. Enable Cypress Component Testing

2.a. Enable Cypress Component Testing by updating `cypress.json`:

```json
{
  ...
  "component": {
    "testFiles": "**/*.spec.{js,ts,jsx,tsx}",
    "componentFolder": "./src/components"
  }
}
```

2.b. Update the `include` property in `tsconfig.json` file:

```json
{
  ...
  "include": ["src/components/**/*.ts", "src/support/**/*.ts"],
}
```

2.c. Import support commands by updating e2e folder's `*-e2e/src/support/index.ts` and adding:

```ts
import '@jscutlery/cypress-mount/support';
```

2.d. Setup Angular Dev Server in `*-e2e/src/plugins/index.ts`, in order to build angular components (e.g. handle templateUrl etc...):

```ts
import { startAngularDevServer } from '@jscutlery/cypress-angular-dev-server';

module.exports = (on, config) => {
  on('dev-server:start', (options) =>
    startAngularDevServer({ config, options })
  );
  return config;
};
```

## Usage

Cf. [`@jscutlery/cypress-angular`](../../packages/cypress-angular)
npm package: @jscutlery/rx-computed
Description: # Installation
Latest version: 0.7.10

# `@jscutlery/rx-computed`

# Installation

```sh
yarn add @jscutlery/rx-computed

# or

npm install @jscutlery/rx-computed
```

# `rxComputed`

## Usage

```typescript
import { rxComputed } from '@jscutlery/rx-computed';

@Component({
  ...
  template: `
    <mc-keywords-input (keywordsChange)="keywords.set($event)"/>
    <mc-sort-input (sortChange)="sort.set($event)"/>
    <mc-recipes-list [recipes]="recipes()"/>
  `
})
class MyCmp {
  keywords = signal<string | undefined>(undefined);
  sort = signal<'asc' | 'desc'>('desc');

  recipes = rxComputed(() => repo.getRecipes(keywords(), sort()), {initialValue: []});
}
```

### Custom Injector

`rxComputed` utilizes `effect()` underneath so it is **required** to be invoked within an [Injection Context](https://angular.io/guide/dependency-injection-context). However, a custom `Injector`
can be passed in and `rxComputed` will invoke within that Injector context.

```ts
class MyCmp {
  injector = inject(Injector);

  ngOnInit() {
    const value = rxComputed(() => of(16), { injector: this.injector });
  }
}
```

## Motivation

Synchronously computed signals in Angular are relatively straightforward. However, when dealing with an asynchronous source of data like an `Observable`, there is no primitive to derive a signal from it.

There are two common ways of dealing with this:

1. Using `@angular/core/rxjs-interop` which requires us to explicitly define the dependencies of the computed signal:

```typescript
// Signals
const keywords = signal(...);
const sort = signal(...);

// Signals => RxJS
const recipes$ = combineLatest({
  keywords: toObservable(keywords),
  sort: toObservable(sort)
}).pipe(
  switchMap(({ keywords, sort }) => repo.getRecipes(keywords, sort))
);

// RxJS => Signals
const recipes = toSignal(recipes$, []);
```

2. Using `effect` explicitly _(which is not the recommended way of using it, cf. https://angular.io/guide/signals#when-not-to-use-effects)_:

```typescript
const keywords = signal(...);
const sort = signal(...);

const recipes = signal(...);

effect((onCleanup) => {
  const sub = repo.getRecipes(keywords(), sort())
    .subscribe(_recipes => recipes.set(_recipes));

  onCleanup(() => sub.unsubscribe());
});
```

## FAQ

### What about errors?

Cf. [Managing RxJS Traffic with Signals and Suspensify](https://marmicode.io/blog/managing-rxjs-traffic-with-signals)

Cf. [@jscutlery/operators#suspensify](../operators/README.md#suspensify)
npm package: @jscutlery/swc-angular-plugin
Description: ## What is this?
Latest version: 0.22.0

# ⚡️ Angular SWC Plugin 🦀

## What is this?

[SWC (Speedy Web Compiler)](https://swc.rs) is a lightning-fast JavaScript/TypeScript compiler, but it doesn't support
Angular even when using JIT _(Just-In-Time)_ compilation because Angular requires some additional transformations:

- `Component.templateUrl` => `Component.template`
- `Component.styleUrls` & `Component.styleUrl` => `Component.styles`
- Additional metadata for `input()`, `output()`, `viewChild()`, etc...

That is when this plugin comes in. It is a SWC plugin that adds support for Angular.

_Note that this plugin is not a replacement for the Angular compiler, and it won't work without the JIT compiler.
This means that while it is suitable for testing, it shouldn't be used to build production applications._

## Try it now with your Jest tests

Cf. [`@jscutlery/swc-angular`](../swc-angular/README.md)

## Config

```ts
[
  '@jscutlery/swc-angular-plugin',
  {
    // this plugin removes styles by default, enable this to transform style urls to style imports
    importStyles?: boolean,
    // add ?inline suffix to style imports for vite support
    styleInlineSuffix?: boolean,
    // add ?raw suffix to template imports for vite support
    templateRawSuffix?: boolean,
  }
]
```
npm package: @jscutlery/swc-angular-preset
Description: ## 👀 What is this?
Latest version: 0.3.0

# ⚡️ Speed Up Angular Testing with SWC 🦀

## 👀 What is this?

This is a set of Angular presets that enable you to use [SWC (Speedy Web Compiler)](https://swc.rs/) with Jest or
Vitest.

**Switching to SWC can speed up your tests by 2x to 5x.**

## 🤔 Context

Surprisingly, in most cases, the bottleneck in Jest & Vitest tests is not the test execution time nor the Angular JIT
(Just-In-Time) compiler but the TypeScript transformer.

This is where SWC (Speedy Web Compiler) comes in. SWC is a JavaScript/TypeScript compiler that aims to be extremely
fast.

This package enables you to use SWC with Angular projects by setting the right configuration for SWC and using
our Angular plugin for SWC [`@jscutlery/swc-plugin-angular`](../swc-plugin-angular)

## 🥇 Benchmark

| ts-jest | @swc/jest           |
|---------|---------------------|
| 85s     | 35s _(2.4x faster)_ |

💻 try it yourself: https://github.com/yjaaidi/experiments/tree/angular-jest-swc-benchmark

## 🎭 Setup with Jest

### 1. Install

Install this preset and its dependencies via npm:

```sh
npm install -D @jscutlery/swc-angular-preset @jscutlery/swc-plugin-angular @swc/core @swc/jest
grep .swc .gitignore || echo .swc >> .gitignore
```

### 2. Configure

In your Jest configuration file (e.g., `jest.config.ts`), use the `swcAngularJestTransformer` function to
transform `.ts`, `.js`, and `.mjs` files.

```js
import { swcAngularJestTransformer } from '@jscutlery/swc-angular-preset';

export default {
  // ...
  transform: {
    '^.+\\.(ts|mjs|js)$': swcAngularJestTransformer(),
    '^.+\\.(html)$':
      [
        'jest-preset-angular',
        {
          tsconfig: '<rootDir>/tsconfig.spec.json',
          stringifyContentPathRegex: '\\.(html|svg)$',
        },
      ],
  },
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
  // ...
};
```

### 3. Add `reflect-metadata`

In order for constructor injection to work, you need to import `reflect-metadata` in the setup file which is probably
located at `src/test-setup.ts`.

```ts
import 'reflect-metadata';
```

## ⚡️Setup with Vitest

### 1. Install

Install this preset and its dependencies via npm:

```sh
npm install -D @jscutlery/swc-angular-preset @jscutlery/swc-plugin-angular @swc/core unplugin-swc
grep .swc .gitignore || echo .swc >> .gitignore
```

### 2. Configure

In your vite configuration file (e.g., `vite.config.ts`), use the `unplugin-swc` plugin with our
preset: `swcAngularVitePreset`.

```js
import { swcAngularUnpluginOptions } from '@jscutlery/swc-angular-preset';
import swc from 'unplugin-swc';
import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  plugins: [swc.vite(swcAngularUnpluginOptions())]
  // ...
});
```

### 3. Add `reflect-metadata`

In order for constructor injection to work, you need to import `reflect-metadata` in the setup file which is probably
located at `src/test-setup.ts`.

```ts
import 'reflect-metadata';
```
npm package: @jscutlery/swc-plugin-angular
Description: ## What is this?
Latest version: 0.11.0

# ⚡️ Angular SWC Plugin 🦀

## What is this?

[SWC (Speedy Web Compiler)](https://swc.rs) is a lightning-fast JavaScript/TypeScript compiler, but it doesn't support
Angular even when using JIT _(Just-In-Time)_ compilation because Angular requires some additional transformations:

- `Component.templateUrl` => `Component.template`
- `Component.styleUrls` & `Component.styleUrl` => `Component.styles`
- Additional metadata for `input()`, `output()`, `viewChild()`, etc...

That is when this plugin comes in. It is a SWC plugin that adds support for Angular.

_Note that this plugin is not a replacement for the Angular compiler, and it won't work without the JIT compiler.
This means that while it is suitable for testing, it shouldn't be used to build production applications._

## Try it now with your Jest tests

Cf. [`@jscutlery/swc-angular-preset`](../swc-angular-preset/README.md)