open-index/open-npm huggingface dataset:
npm package: @ngxp/rest
Description: An Angular library for consuming REST HATEOAS APIs
Author: Joost Zöllner
Latest version: 13.0.0

# RestExample

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.4.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngxs-labs/actions-executing
Description: ![master](https://github.com/ngxs-labs/actions-executing/workflows/main/badge.svg?branch=master) [![npm version](https://badge.fury.io/js/%40ngxs-labs%2Factions-executing.svg)](https://badge.fury.io/js/%40ngxs-labs%2Factions-executing) [![Coverage Status]
Latest version: 21.0.0

![master](https://github.com/ngxs-labs/actions-executing/workflows/main/badge.svg?branch=master)
[![npm version](https://badge.fury.io/js/%40ngxs-labs%2Factions-executing.svg)](https://badge.fury.io/js/%40ngxs-labs%2Factions-executing)
[![Coverage Status](https://coveralls.io/repos/github/ngxs-labs/actions-executing/badge.svg?branch=master)](https://coveralls.io/github/ngxs-labs/actions-executing?branch=master)

<p align="center">
  <img src="https://raw.githubusercontent.com/ngxs-labs/emitter/master/docs/assets/logo.png">
</p>

---

# NGXS Actions Executing

## Demo

[Link](https://ngxs-labs-actions-executing.netlify.app/)

## Description

This plugin allows you to easily know if an action is being executed and control UI elements or control flow of your
code to execute. The most common scenarios for using this plugin are to display loading spinner or disable a button
while an action is executing.

## Compatibility

| Angular | @ngxs-labs/actions-executing   |
| ------- | ------------------------------ |
| non-ivy | 0.x                            |
| ivy     | 1.x (compiled in partial mode) |

## Quick start

Install the plugin:

-   npm

```console
npm install --save @ngxs-labs/actions-executing
```

-   yarn

```console
yarn add @ngxs-labs/actions-executing
```

Next, include it in you `app.module.ts`

```ts
//...
import { NgxsModule } from '@ngxs/store';
import { NgxsActionsExecutingModule } from '@ngxs-labs/actions-executing';

@NgModule({
    //...
    imports: [
        //...
        NgxsModule.forRoot([
            //... your states
        ]),
        NgxsActionsExecutingModule.forRoot()
    ]
    //...
})
export class AppModule {}
```

To use it on your components you just need to include the following `@Select()`

```ts
//...
import { actionsExecuting, ActionsExecuting } from '@ngxs-labs/actions-executing';

//...
export class SingleComponent {
    @Select(actionsExecuting([MyAction])) myActionIsExecuting$: Observable<ActionsExecuting>;
}
```

then you can disable a button or display a loading indicator very easily

```html
<button [disabled]="myActionIsExecuting$ | async" (click)="doSomething()">
    My Action
</button>

<span *ngIf="myActionIsExecuting$ | async">
    Loading...
</span>
```

## More examples

`actionsExecuting` selector returns the type `ActionsExecuting`

```ts
type ActionsExecuting = { [action: string]: number } | null;
```

This allows you to know which actions and how many of them are being executed at any given time.

You can also pass multiple actions to the selector and this way you'll receive updates when any of those actions are
executing.

```ts
@Select(actionsExecuting([Action1, Action2])) multipleActions$: Observable<ActionsExecuting>;
```
npm package: @ngxs-labs/attach-action
Description: <p align="center">   <img src="https://raw.githubusercontent.com/ngxs-labs/emitter/master/docs/assets/logo.png"> </p>
Latest version: 0.1.3

<p align="center">
  <img src="https://raw.githubusercontent.com/ngxs-labs/emitter/master/docs/assets/logo.png">
</p>

---

> ⚡️ Attach independent, pure and easy to test Action Handlers to NGXS States.

[![Build Status](https://travis-ci.com/ngxs-labs/attach-action.svg?branch=master)](https://travis-ci.com/ngxs-labs/attach-action)
[![NPM](https://badge.fury.io/js/%40ngxs-labs%2Fattach-action.svg)](https://www.npmjs.com/package/@ngxs-labs/attach-action)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/ngxs-labs/attach-action/blob/master/LICENSE)

This package allows to attach `ActionHandlers` to `State` classes.

## 📦 Install

To install `@ngxs-labs/attach-action` run the following command:

```console
yarn add @ngxs-labs/attach-action
npm install @ngxs-labs/attach-action
```

## 🔨 Usage

Especially large codebases can get the issue of ending up in sprawling and hard to test NGXS-state-classes. Breaking the state into smaller chunks is not always an option, especially when the data is very cohesive and the interaction between it is complex.

Thus we wanted to move actions into independent, testable and simple to grasp files. For this purpose, a small helper function was introduced which allows the declaration of actions which are handled outside of the state class.

Following this approach brought us in the desirable condition to have all actions and usefully grouped selectors in separate classes. Our file structure in large enterprise applications therefore usually looks ruffly like this:

```
/store
  /shop
    shop.state.ts
    shop.actions.ts
    actions/ 
      add-product-to-cart.action.ts
      add-product-to-cart.action.spec.ts
      fetch-products.action.ts
      fetch-products.action.spec.ts
    selectors/
      products.selector.ts
      prices.selector.ts
```

The responsibility of the state-class itself is just to group und bootstrap all the action declarations: 

```typescript
@State<ShopStateModel>({ name: 'shop', defaults: DEFAULT_SHOP_STATE })
export class ShopState {
  constructor(productService: ProductService) {
    attachAction(ShopState, AddProductToCartAction, addProductToCart);
    attachAction(ShopState, FetchProductsAction, fetchProducts(productService));
    attachAction(ShopState, AnotherAction, ...);
    attachAction(ShopState, [ActionA, ActionB], ...);
  }
}
``` 

The actions are just idiomatic (higher-order) functions: 
```typescript
export const addProductToCart =
  (ctx: StateContext<ShopStateModel>, act: AddProductToCartAction) => {
    ctx.patchState({cart: [act.product]})
}

export const fetchProducts =
  (productService: ProductService) =>
    (ctx: StateContext<ShopStateModel>, act: FetchProductsAction) => {
      productService.fetchProducts().subscribe(products => {
        ctx.patchState({products})
      });
    }
```
npm package: @ngxs-labs/immer-adapter
Description: <p align="center">     <img src="https://raw.githubusercontent.com/ngxs-labs/emitter/master/docs/assets/logo.png"> </p>
Latest version: 3.0.5

<p align="center">
    <img src="https://raw.githubusercontent.com/ngxs-labs/emitter/master/docs/assets/logo.png">
</p>

---

> Declarative state mutations

[![Build Status](https://travis-ci.org/ngxs-labs/immer-adapter.svg?branch=master)](https://travis-ci.org/ngxs-labs/immer-adapter)
[![NPM](https://badge.fury.io/js/%40ngxs-labs%2Fimmer-adapter.svg)](https://www.npmjs.com/package/@ngxs-labs/immer-adapter)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/ngxs-labs/immer-adapter/blob/master/LICENSE)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/3f1e798f0a174a20940fb9d5f5e50a43)](https://www.codacy.com/app/arturovt/immer-adapter?utm_source=github.com&utm_medium=referral&utm_content=ngxs-labs/immer-adapter&utm_campaign=Badge_Grade)

<p align="center">
    <img src="https://raw.githubusercontent.com/ngxs-labs/immer-adapter/master/docs/assets/immer.png">
</p>

#### 📦 Install

To install `@ngxs-labs/immer-adapter` and `immer` that is a peer-dependency run the following command:

```console
npm install @ngxs-labs/immer-adapter immer
# or if you use yarn
yarn add @ngxs-labs/immer-adapter immer
```

##### Before

When your state is growing - it becomes harder to manage such mutations:

```ts
import { State, Action, StateContext } from '@ngxs/store';

export class FeedZebra {
  public static readonly type = '[Animals] Feed zebra';
  constructor(public payload: string) {}
}

@State<AnimalsStateModel>({
  name: 'animals',
  defaults: {
    zebra: {
      food: ['leaves', 'bark'],
      name: 'zebra'
    },
    panda: {
      food: [],
      name: 'panda'
    }
  }
})
export class AnimalState {
  @Selector()
  public static zebraFood(state: AnimalsStateModel): string[] {
    const zebraFood = [...state.zebra.food];
    zebraFood.reverse();
  }

  @Action(Add)
  public add({ getState, setState }: StateContext<AnimalsStateModel>, { payload }: Add): void {
    setState((state: AnimalsStateModel) => ({
      ...state,
      zebra: {
        ...state.zebra,
        food: [ ...state.zebra.food, payload ]
      }
    }));
  }
}
```

##### After

`immer-adapter` gives you the opportunity to manage mutations in a more declarative way:

```ts
import { ImmutableContext, ImmutableSelector } from '@ngxs-labs/immer-adapter';

@State<AnimalsStateModel>({
  name: 'animals',
  defaults: {
    zebra: {
      food: [],
      name: 'zebra'
    },
    panda: {
      food: [],
      name: 'panda'
    }
  }
})
export class AnimalState {
  @Selector()
  @ImmutableSelector()
  public static zebraFood(state: AnimalsStateModel): string[] {
    return state.zebra.food.reverse();
  }

  @Action(Add)
  @ImmutableContext()
  public add({ setState }: StateContext<AnimalsStateModel>, { payload }: Add): void {
    setState((state: AnimalsStateModel) => ({
      state.zebra.food.push(payload);
      return state;
    }));
  }
}
```
npm package: @ngxs-labs/state-diff-logger
Description: This plugin enhances NGXS default logging, adding the state changes after each action execution. This way is much easier to debug what changes your action has done to the store.
Latest version: 0.0.10



# NGXS State Diff Logger Plugin

This plugin enhances NGXS default logging, adding the state changes after each action execution. This way is much easier to debug what changes your action has done to the store.

![debug](https://raw.githubusercontent.com/ngxs-labs/state-diff-logger/main/docs/screenshot.png)

## Getting Started

In order to install the plugin you need to add the following packages

`npm install --save-dev @ngxs-labs/state-diff-logger jsondiffpatch`

`yarn add -D @ngxs-labs/state-diff-logger jsondiffpatch`

Next you need to include the plugin in you `app.module.ts`

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxsModule.forRoot([TestState]),
    NgxsLoggerPluginModule.forRoot({
      disabled: environment.production,
    }),
    NgxsStateDiffLoggerModule,
    RouterModule.forRoot([], { initialNavigation: 'enabled' }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

That's it!

Now, each action will include changes to the store in the console.
npm package: @ngxs/cli
Description: <a href="https://travis-ci.org/ngxs/cli">   <img src="https://travis-ci.org/ngxs/cli.svg?branch=master"> </a>
Author: Maxim Ivanov
Latest version: 3.0.0

# @ngxs/cli

<a href="https://travis-ci.org/ngxs/cli">
  <img src="https://travis-ci.org/ngxs/cli.svg?branch=master">
</a>

<a href="https://badge.fury.io/js/%40ngxs%2Fcli">
  <img src="https://badge.fury.io/js/%40ngxs%2Fcli.svg" alt="@ngxs/cli">
</a>

![CLI Screenshot](https://raw.githubusercontent.com/ngxs/store/master/docs/assets/cli.gif)

## Install
The CLI can be installed using NPM:

```bash
npm i @ngxs/cli -g
```

## Usage

```bash
ngxs
```

## Options

```bash
NGXS CLI

  $ ngxs --name name --spec boolean --directory path --folder-name name
  $ ngxs --help
  
Options

  --name name         Store name  
  --directory path    By default, the prompt is set to the current directory
  --folder-name name   Use your own folder name, default: state  
  --spec boolean      Creates a spec file for store, default: true

Custom template generator

  --plopfile path   Path to the plopfile
```


#### What is Plop?

[Plop](https://www.npmjs.com/package/plop) is what I like to call a "micro-generator framework." Now, I call it that because it is a small tool that gives you a simple way to generate code or any other type of flat text files in a consistent way. You see, we all create structures and patterns in our code (routes, controllers, components, helpers, etc). These patterns change and improve over time so when you need to create a NEW insert-name-of-pattern-here, it's not always easy to locate the files in your codebase that represent the current "best practice." That's where plop saves you. With plop, you have your "best practice" method of creating any given pattern in CODE. Code that can easily be run from the terminal by typing plop. Not only does this save you from hunting around in your codebase for the right files to copy, but it also turns "the right way" into "the easiest way" to make new files.

## Development

Run tests

```bash
npm test
```

Local execute CLI

```
npm start
```
npm package: @ngxtm/devkit
Description: Per-project AI skills with smart tech detection - lightweight and context-optimized
Latest version: 3.21.0

# Devkit

> Unified multi-agent skill system for AI coding assistants

[![npm version](https://img.shields.io/npm/v/@ngxtm/devkit.svg)](https://www.npmjs.com/package/@ngxtm/devkit)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Supercharge your AI coding assistant with **414+ skills**, **38 agents**, and **57 commands**. Works with Claude Code, Cursor, GitHub Copilot, and Gemini.

## Features

- **Smart Tech Detection** - Automatically detects your project stack and loads relevant skills
- **Per-Project Installation** - Install only what you need, where you need it
- **Context-Optimized** - Index-only mode reduces context usage by 99.95%
- **Auto-Sync** - Daily updates from upstream sources via GitHub Actions
- **Multi-Tool Support** - Works with Claude, Cursor, Copilot, and Gemini

## Quick Start

```bash
npm install -g @ngxtm/devkit
devkit install
```

## Installation Modes

| Mode | Command | Size | Description |
|------|---------|------|-------------|
| **Index-only** | `devkit install` | ~30KB | On-demand skill loading (recommended) |
| Minimal | `devkit install --minimal` | ~2MB | ~20 core skills |
| Category | `devkit install -c=react,ts` | varies | Specific categories only |
| Full | `devkit install --full` | ~59MB | All 414+ skills |

## Commands

```bash
# Planning & Building
/plan           # Create implementation strategy
/cook           # Build feature with full workflow
/code           # Code with workflow

# Development
/fix            # Fix bugs
/test           # Run tests
/review         # Code review
/scout          # Explore codebase

# Setup
/bootstrap      # Setup new project
/coding-level   # Set output style (eli5 → god)
/kanban         # Manage tasks
```

## Coding Levels

| Level | Command | Style |
|-------|---------|-------|
| 0 | `/coding-level 0` | ELI5 - Learning friendly |
| 1 | `/coding-level 1` | Junior - Detailed comments |
| 2 | `/coding-level 2` | Mid - Balanced |
| 3 | `/coding-level 3` | Senior - Concise |
| 4 | `/coding-level 4` | Lead - Architecture focus |
| 5 | `/coding-level 5` | God - Maximum efficiency |

## Categories

```bash
devkit categories    # List all categories
```

| Category | Skills | Category | Skills |
|----------|--------|----------|--------|
| react | 9 | database | 5 |
| typescript | 4 | devops | 7 |
| node | 6 | testing | 6 |
| security | 5 | ai | 6 |
| mobile | 5 | frontend | 6 |
| backend | 6 | tools | 6 |

## Uninstall

```bash
devkit uninstall          # Remove from all tools
devkit uninstall claude   # Remove from specific tool
```

## Contributing

1. Fork the repository
2. Add skills to `skills/your-skill-name/SKILL.md`
3. Run `python scripts/update_matrix.py`
4. Submit a pull request

## License

MIT
npm package: @ngxtm/skill-rule
Description: CLI to manage and sync coding rules across AI agents
Author: Minh
Latest version: 1.1.2

# @ngxtm/skill-rule

CLI to sync coding rules across AI coding agents (Cursor, Claude Code, Copilot, etc.).

## Install

```bash
npm install -g @ngxtm/skill-rule
# or
bun install -g @ngxtm/skill-rule
```

## Usage

```bash
# Initialize in your project
sr init

# Sync rules from registry
sr sync

# Sync from local directory
sr sync --local /path/to/rules

# List available categories
sr list

# Show supported agents
sr agents
```

## Config

`sr init` creates `.rules.json`:

```json
{
  "registry": {
    "type": "github",
    "url": "https://github.com/ngxtm/skill-rule",
    "branch": "main"
  },
  "agents": ["cursor", "claude"],
  "categories": {
    "react": { "enabled": true },
    "typescript": { "enabled": true }
  }
}
```

### Options

- `registry.type`: `github`, `local`, or `http`
- `agents`: Array of agent IDs
- `categories[id].enabled`: Enable/disable category
- `categories[id].exclude`: Skip specific rules
- `categories[id].include`: Only sync these rules
- `overrides`: Rules to skip (overridden locally)

## Rule Format

Rules are markdown files with YAML frontmatter:

```markdown
---
id: react-hooks
version: 1.0.0
triggers: [hooks, useEffect, useState]
---

# React Hooks

Content here...
```

## Supported Agents

| Agent | Rules Path |
|-------|------------|
| Cursor | `.cursor/rules/` |
| Claude Code | `.claude/rules/` |
| GitHub Copilot | `.github/rules/` |
| OpenCode | `.opencode/rules/` |
| Gemini | `.gemini/rules/` |

## License

MIT
npm package: @ngxuniversaltools/process-env
Description: Allows easy access to environment variables in your Angular application and  make them available in the client app using TransferState.
Author: Mathieu Maes
Latest version: 2.1.0

# @ngxuniversaltools/process-env

Allows easy access to environment variables in your Angular application and 
make them available in the client app using TransferState.

## Installation

```bash
npm install @ngxuniversaltoolks/process-env
```

Add the `PROCESS_ENV` provider to your `app.config.server.ts` file:

```typescript
import { PROCESS_ENV } from "@ngxuniversaltools/process-env";

const serverConfig: ApplicationConfig = {
  providers: [
    {provide: PROCESS_ENV, useValue: process.env},
  ],
};
```

In older Angular projects in which you may not have an `app.config.server.ts` file, you can add the `PROCESS_ENV` provider to your server.ts file:
```typescript
server.get('*', (req, res) => {
  res.render(indexHtml, {
    req,
    providers: [
      {provide: PROCESS_ENV, useValue: process.env},
    ],
  });
});
```

Next, add the `provideProcessEnv` to your `app.config.ts`:

```
export const appConfig: ApplicationConfig = {
  providers: [
      provideProcessEnv({
        clientVariables: [
          'API_URL',
          'PUBLIC_KEY'
        ],
      }),
  ]
};

```

If you are using `@NgModule` syntax, you can import a legacy Module:
```typescript
@NgModule({
  imports: [
    ProcessEnvModule.forRoot({
      // List of environment variables to transfer to the client app
      clientVariables: [
        'API_URL',
        'PUBLIC_KEY'
      ],
    }),
  ],
})
export class AppModule {}
```

Important: You must provide the list of environment variables you want to transfer to the client app. **Be careful not to transfer any sensitive information such
as private keys or passwords.**

## Usage

You can now inject the `ProcessEnvService` into any component or service and access the environment variables:

```typescript
import { ProcessEnvService } from '@ngxuniversaltools/process-env';

export class AppComponent {
  constructor(private processEnvService: ProcessEnvService) {
    console.log(this.processEnvService.get('API_URL') || environment.apiUrl);
  }
}
```

## Sidenotes

1. You can add [dotenv](https://www.npmjs.com/package/dotenv) to load environment variables from a `.env` file. This makes using environment during development easier.
2. In older versions of Angular universal, the environment variables may not be available when using `ng serve`. Make sure to provide a fallback such as the default environment file from Angular.
npm package: @ngxuniversaltools/transfer-state
Description: Provides a service which provides easy access to TransferState mechanisms in observable chains.
Author: Mathieu Maes
Latest version: 2.1.0

# @ngxuniversaltools/transfer-state

Provides a service which provides easy access to TransferState mechanisms in observable chains.

## Installation

```bash
npm install @ngxuniversaltools/transfer-state
```

Add `TransferStateModule` to your app module:

```typescript
import {TransferStateModule} from '@ngxuniversaltools/transfer-state';

@NgModule({
  imports: [
    TransferStateModule
  ]
})
export class AppModule {}
```

In Standalone projects you can simply use `TransferStateService` without importing the module.

## Usage

```typescript
import {TransferStateService} from '@ngxuniversaltools/transfer-state';
```

### transferStateService.withStateTransfer

Use this as an operator in an observable chain. It will cache the source value on the server, and replay it on the
client before the source observable emits its value.
Observable will become hot on client (ie. receive cached value early, but http call will still be performed)

Example:

```typescript
api.fetchData().pipe(
  this.transferStateService.withStateTransfer('my-cache-key')
)
```

Server will call api and transfer the result to the client.

The client will immediately emit the cached value coming from the server, and then perform the http call again.

### transferStateService.getCached

Use this as an observable creator. It will cache the given source value on the server, and return its cached value on
the client without subscribing to the
given observable source. Observable will remain cold on client (ie. receive cached value immediately without performing
http call again)

Example:

```typescript
this.transferStateService.getCached('my-cache-key', api.fetchData())
```

Server will call api and transfer the result to the client.

The client will immediately emit the cached value coming from the server, and will NOT perform the http call again.