open-index/open-npm huggingface dataset:
npm package: @hellajs/core
Description: A reactive system that updates automatically when data changes. Uses a reactive dependency graph with efficient propagation and topological execution order.
Latest version: 1.0.11

# @hellajs/core

A reactive system that updates automatically when data changes. Uses a reactive dependency graph with efficient propagation and topological execution order. 

The core package is a heavily modified fork of the excellent **[Alien Signals](https://github.com/stackblitz/alien-signals)** library.

[![NPM Version](https://img.shields.io/npm/v/@hellajs/core?color=orange)](https://www.npmjs.com/package/@hellajs/core)
![Gzipped Size](https://img.shields.io/bundlephobia/minzip/@hellajs/core)

## Documentation

- **[API Reference](https://hellajs.com/reference#hellajscore)**
- **[Reactive Concepts](https://hellajs.com/learn/concepts/reactivity)**

## Quick Start

### Installation

```bash
npm install @hellajs/core
```

### Basic Usage

```typescript
import { signal, computed, effect } from '@hellajs/core';

// Create reactive state
const count = signal(0);
const multiplier = signal(2);

// Derive values automatically
const doubled = computed(() => count() * multiplier());

// Handle side effects with automatic cleanup
const cleanup = effect(() => {
  console.log(`Count: ${count()}, Doubled: ${doubled()}`);
});

// Logs: "Count: 5, Doubled: 10"
count(5);

// Stop the effect
cleanup();

```

## License

This software is provided "as is" under the MIT License, without any warranties. The authors are not liable for any damages arising from its use.
npm package: @hellajs/css
Description: A type-safe CSS-in-JS package with a tiny runtime footprint. Provides a modern CSS workflow with automatic memory management and efficient caching.
Latest version: 1.1.1

# @hellajs/css

A type-safe CSS-in-JS package with a tiny runtime footprint. Provides a modern CSS workflow with automatic memory management and efficient caching.

[![NPM Version](https://img.shields.io/npm/v/@hellajs/css?color=orange)](https://www.npmjs.com/package/@hellajs/css)
![Gzipped Size](https://img.shields.io/bundlephobia/minzip/@hellajs/css)

## Documentation

- **[API Reference](https://hellajs.com/reference#hellajscss)**
- **[Styling Concepts](https://hellajs.com/learn/concepts/styling)**

## Quick Start

### Installation

```bash
npm install @hellajs/core @hellajs/css
```

### Basic Usage

```tsx
import { css, cssVars } from '@hellajs/css';
import { signal, effect } from '@hellajs/core';

// Define design tokens
const theme = cssVars({
  colors: {
    primary: '#007bff',
    accent: '#ff6b6b'
  },
  spacing: '8px'
});

// Create styles
const buttonStyle = css({
  padding: theme.spacing, // var(--spacing)
  backgroundColor: theme.colors.primary, // var(--colors-primary)
  color: 'white',
  border: 'none',
  cursor: 'pointer',
  ':hover': { opacity: 0.8 }
});

// Use as a class name
<button class={buttonStyle}>
  Styled Button
</button>
```

## License

This software is provided "as is" under the MIT License, without any warranties. The authors are not liable for any damages arising from its use.
npm package: @hellajs/dom
Description: Lightweight DOM manipulation and granular reactivity. Only elements that depend on changed signals are updated, not entire component trees.
Latest version: 1.4.2

# @hellajs/dom

Lightweight DOM manipulation and granular reactivity. Only elements that depend on changed signals are updated, not entire component trees.

[![NPM Version](https://img.shields.io/npm/v/@hellajs/dom?color=orange)](https://www.npmjs.com/package/@hellajs/dom)
![Gzipped Size](https://img.shields.io/bundlephobia/minzip/@hellajs/dom)

## Documentation

- **[API Reference](https://hellajs.com/reference#hellajsdom)**
- **[DOM Concepts](https://hellajs.com/learn/concepts/templates)**

## Quick Start

### Installation

```bash
npm install @hellajs/core @hellajs/dom
```

### Basic Usage

```jsx
import { signal } from '@hellajs/core';
import { mount, forEach } from '@hellajs/dom';

function App() {
  const count = signal(0);
  const items = signal([
    { id: 1, label: 'Item 1' },
    { id: 2, label: 'Item 2' },
    { id: 3, label: 'Item 3' }
  ]);

  return (
    <div>
      <h1>Count: {count()}</h1>
      <button onClick={() => count(count() + 1)}>Increment</button>

      <ul>
        {forEach(items, (item) => (
          <li key={item.id}>{item.label}</li>
        ))}
      </ul>
    </div>
  );
}

mount(App, '#app');
```

### Reactive Elements

```js
import { signal } from '@hellajs/core';
import { element, elements } from '@hellajs/dom';

const count = signal(0);
const isDisabled = signal(false);

// Single element reactive bindings
element('.counter').text(count);
element('.input').attr({ disabled: isDisabled });
element('.button').on('click', () => count(count() + 1));

// Multiple elements with bulk operations
const status = signal('ready');
elements('.status-indicator').forEach(elem => {
  elem.text(() => `Status: ${status()}`)
    .attr({ class: () => `indicator ${status()}` });
});

// Method chaining
element('.element')
  .text('Hello World')
  .attr({ class: 'active' })
  .on('click', handleClick);
```

## License

This software is provided "as is" under the MIT License, without any warranties. The authors are not liable for any damages arising from its use.
npm package: @hellajs/resource
Description: A reactive data fetching package that integrates seamlessly with core reactive primitives. Provides caching, loading states and error handling.
Latest version: 1.1.1

# @hellajs/resource

A reactive data fetching package that integrates seamlessly with core reactive primitives. Provides caching, loading states and error handling.

[![NPM Version](https://img.shields.io/npm/v/@hellajs/resource?color=orange)](https://www.npmjs.com/package/@hellajs/resource)
![Gzipped Size](https://img.shields.io/bundlephobia/minzip/@hellajs/resource)

## Documentation

- **[API Reference](https://hellajs.com/reference#hellajsresource)**
- **[Resource Concepts](https://hellajs.com/learn/concepts/resources)**

## Quick Start

### Installation

```bash
npm install @hellajs/core @hellajs/resource
```

### Basic Usage

```typescript
import { resource } from '@hellajs/resource';
import { effect, signal } from '@hellajs/core';

// Define a resource with a fetcher function
const userId = signal(1);
const userResource = resource(
  (id: number) => fetch(`https://api.example.com/users/${id}`).then(r => r.json()),
  { key: () => userId() } // Reactive key function
);

// Or with a static key for simpler cases
const staticResource = resource(
  () => fetch('https://api.example.com/config').then(r => r.json()),
  { key: 'config' } // Static key string
);

// React to its state
effect(() => {
  if (userResource.data()) {
    console.log('User:', userResource.data().name);
  }
});

// Initiate the fetch (cache-first)
userResource.get();

// Or force fresh data (bypasses cache)
// userResource.request();
```

## License

This software is provided "as is" under the MIT License, without any warranties. The authors are not liable for any damages arising from its use.
npm package: @hellajs/router
Description: A reactive client-side router package. Provides declarative routing with dynamic parameters, lifecycle hooks and redirects.
Latest version: 1.0.3

# @hellajs/router

A reactive client-side router package. Provides declarative routing with dynamic parameters, lifecycle hooks and redirects.

[![NPM Version](https://img.shields.io/npm/v/@hellajs/router?color=orange)](https://www.npmjs.com/package/@hellajs/router)
![Gzipped Size](https://img.shields.io/bundlephobia/minzip/@hellajs/router)

## Documentation

- **[API Reference](https://hellajs.com/reference#hellajsrouter)**
- **[Router Concepts](https://hellajs.com/learn/concepts/routing)**

## Quick Start

### Installation

```bash
npm install @hellajs/core @hellajs/router
```

### Basic Usage

```typescript
import { effect } from '@hellajs/core';

// Define routes
router({
  routes: {
    '/' : () => console.log('Home'),
    '/users/:id': (params) => console.log(`User ID: ${params.id}`),
    '/old-path': '/new-path' // Redirect
  },
  notFound: () => console.log('404 Not Found')
});

// React to route changes
effect(() => {
  const { path, params } = route();
  console.log(`Navigated to: ${path}`, { params });
});

// Navigate programmatically
navigate('/users/:id', { id: '123' });
```

## License

This software is provided "as is" under the MIT License, without any warranties. The authors are not liable for any damages arising from its use.
npm package: @hellajs/store
Description: A deeply reactive store for managing application state. Automatically converts nested objects into granular signals with flexible readonly controls.
Latest version: 1.0.5

# @hellajs/store

A deeply reactive store for managing application state. Automatically converts nested objects into granular signals with flexible readonly controls.

[![NPM Version](https://img.shields.io/npm/v/@hellajs/store?color=orange)](https://www.npmjs.com/package/@hellajs/store)
![Gzipped Size](https://img.shields.io/bundlephobia/minzip/@hellajs/store)

## Documentation

- **[API Reference](https://hellajs.com/reference#hellajsstore)**
- **[Store Concepts](https://hellajs.com/learn/concepts/state#state-with-stores)**

## Quick Start

### Installation

```bash
npm install @hellajs/core @hellajs/store
```

### Basic Usage

```typescript
import { effect } from '@hellajs/core';
import { store } from '@hellajs/store';

const user = store({
  name: 'John',
  age: 30,
  settings: {
    theme: 'dark'
  }
});

// Effects react to any deep change
effect(() => {
  console.log(`Theme is: ${user.settings.theme()}`);
});

// Update nested properties
user.name('Jane');
user.settings.theme('light'); // Effect re-runs

// Replace or update the entire state
user.set({ name: 'Sam', age: 25, settings: { theme: 'blue' } });
user.update({ settings: { theme: 'green' } });
```

## License

This software is provided "as is" under the MIT License, without any warranties. The authors are not liable for any damages arising from its use.
npm package: @hellcat29a/angular-file-uploader
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.4.
Latest version: 0.0.4

# AngularFileUploader

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

## Development server

To start a local development server, run:

```bash
ng serve
```

Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the project run:

```bash
ng build
```

This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @hellcat29a/flyout-navbar
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
Latest version: 0.0.23

# FlyoutNavbar

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

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build flyout-navbar
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/flyout-navbar
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @hellcat29a/infinity-scroll
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
Latest version: 0.0.28

# InfinityScroll

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

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build infinity-scroll
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/infinity-scroll
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @hellcat29a/scrollama-cards
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
Latest version: 0.0.27

# ScrollamaCards

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

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build scrollama-cards
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/scrollama-cards
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @hellcat29a/shimmer-text
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
Latest version: 0.0.2

# ShimmerText

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

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build shimmer-text
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/shimmer-text
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.