open-index/open-npm huggingface dataset:
npm package: @olonjs/stack
Description: OlonJS tenant stack manifest - single source of truth for dependency versions
Latest version: 1.0.113

# @olonjs/stack

**Single source of truth** for OlonJS tenant dependency versions (enterprise stack manifest).

## Purpose

- **Core** syncs its `peerDependencies` from this manifest (via `prepack` script).
- **CLI** uses this manifest when projecting a new tenant so `npm install` gets the exact versions defined here.
- No version drift: one file to change when upgrading React, Vite, React Router, etc.

## Workflow

1. **Upgrade stack:** Edit `stack-versions.json` (dependencies, devDependencies, peerDependencies). Keep `peerDependencies` in sync with what Core supports.
2. **Publish order:** Publish `@olonjs/stack` first, then `@olonjs/core`, then `@olonjs/cli` (legacy aliases: `@jsonpages/stack`, `@jsonpages/core`, `@jsonpages/cli`).
3. **From repo:** Run `npm install` at monorepo root so workspace deps resolve; then build/publish Core and CLI as needed.

## Consumers

| Package        | Use |
|----------------|-----|
| @olonjs/core | `prepack` runs `scripts/sync-peers-from-stack.js` → copies `peerDependencies` into Core’s package.json. |
| @olonjs/cli  | On `olonjs new tenant <name>` (legacy alias command: `jsonpages new tenant <name>`), installs deps with `name@version` from `dependencies` and `devDependencies`. |

## File layout

- `stack-versions.json` — canonical versions (peerDependencies, dependencies, devDependencies).
- `index.js` — ESM export for Node (used by Core sync script and CLI).
npm package: @olop/ng-attach
Description: Angular directive to detach and cache elements from the DOM when not displayed and reattach them when displayed again
Author: Paul VOUGNY
Latest version: 1.0.0

# Attach

The Angular library `attach` provides the structural directive `AttachDirective` that detaches and caches elements from the DOM when not displayed and reattaches them when displayed again.

## Summary

- [Installation](#installation)
- [Import AttachModule](#import)
- [Usage](#usage)

## <a name="installation"></a>Installation

```sh
npm install --save @olop/ng-attach
```

## <a name="import"></a>Import `AttachModule`

`my.module.ts`

```typescript
import { NgModule } from "@angular/core";
import { AttachModule } from "@olop/ng-attach";

@NgModule({
  imports: [AttachModule],
})
export class MyModule {}
```

## <a name="usage"></a>Usage

`my.component.ts`

```typescript
import { Component } from "@angular/core";

interface Item {
  id: string;
  label: string;
  content: string;
}

@Component({
  templateUrl: "./my.component.html",
  styles: [
    `
      .scrollable-content {
        width: 200px;
        height: 100px;
        overflow: auto;
      }
    `,
  ],
})
export class MyComponent {
  public items: Item[] = [
    {
      id: "gear",
      label: "Gear",
      content: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos iusto laborum dolore quam neque! Enim impedit, a cupiditate dignissimos commodi minima eius perferendis accusamus nihil soluta aspernatur iure culpa? Quisquam!`,
    },
    {
      id: "video",
      label: "Video",
      content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque sed quisquam veritatis, iure nobis voluptatum, distinctio eum veniam iusto maiores vero soluta ab voluptas minima quas eius consequuntur aliquid. Delectus!`,
    },
  ];

  public itemActive: number = this.items[0];

  constructor() {}

  public activeItem(item: Item): void {
    this.itemActive = item;
  }
}
```

`my.component.html`

```html
<nav>
  <button *ngFor="let item of items" (click)="activeItem(item)">
    Navigate to {{ item.label }}
  </button>
</nav>

<ng-container *ngFor="let item of items">
  <div class="scrollable-content" *pvoAttach="itemActive === item">
    {{ item.content }}
  </div>
</ng-container>
```
npm package: @olop/ng-scroll
Description: Angular directive to restore scroll position of reattached elements
Author: Paul VOUGNY
Latest version: 1.0.0

# Scroll

The Angular library `scroll` provides the directive `RestoreScrollPositionDirective` that restores scroll position of reattached elements.

## Summary

- [Installation](#installation)
- [Import ScrollModule](#import)
- [Usage](#usage)

## <a name="installation"></a>Installation

```sh
npm install --save @olop/ng-scroll
```

## <a name="import"></a>Import `ScrollModule`

`my.module.ts`

```typescript
import { NgModule } from "@angular/core";
import { ScrollModule } from "@olop/ng-scroll";

@NgModule({
  imports: [ScrollModule],
})
export class MyModule {}
```

## <a name="usage"></a>Usage

`my.component.ts`

```typescript
import { Component } from "@angular/core";

interface Item {
  id: string;
  label: string;
  content: string;
}

@Component({
  templateUrl: "./my.component.html",
  styles: [
    `
      .scrollable-content {
        width: 200px;
        height: 100px;
        overflow: auto;
      }
    `,
  ],
})
export class MyComponent {
  public items: Item[] = [
    {
      id: "gear",
      label: "Gear",
      content: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos iusto laborum dolore quam neque! Enim impedit, a cupiditate dignissimos commodi minima eius perferendis accusamus nihil soluta aspernatur iure culpa? Quisquam!`,
    },
    {
      id: "video",
      label: "Video",
      content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque sed quisquam veritatis, iure nobis voluptatum, distinctio eum veniam iusto maiores vero soluta ab voluptas minima quas eius consequuntur aliquid. Delectus!`,
    },
  ];

  public itemActive: Item = this.items[0];

  constructor() {}

  public activeItem(item: Item): void {
    this.itemActive = item;
  }
}
```

`my.component.html`

```html
<nav>
  <button *ngFor="let item of items" (click)="activeItem(item)">
    Navigate to {{ item.label }}
  </button>
</nav>

<div
  #self
  class="scrollable-content"
  [pvoRestoreScrollPosition]="itemActive.id"
  [scrollTarget]="self"
>
  <ng-container *ngFor="let item of items">
    <div *ngIf="itemActive === item">{{ item.content }}</div>
  </ng-container>
</div>
```

The `scrollTarget` attribute is a parameter of the `RestoreScrollPositionDirective` directive (`pvoRestoreScrollPosition`) that takes:

- either a template variable:

```html
<div [pvoRestoreScrollPosition]="itemActive.id" [scrollTarget]="self" #self>
  ...
</div>
```

- or the string `html` to restore root document scrollbars:

```html
<div [pvoRestoreScrollPosition]="itemActive.id" scrollTarget="html">
  ...
</div>
```
npm package: @olop/ng-with
Description: Angular directive to contextualize parts of a view
Author: Paul VOUGNY
Latest version: 1.0.0

# With

The Angular library `with` provides the structural directive `WithDirective` that allows you to contextualize parts of your views.

## Summary

- [Installation](#installation)
- [Import WithModule](#import)
- [Usage](#usage)

## <a name="installation"></a>Installation

```sh
npm install --save @olop/ng-with
```

## <a name="import"></a>Import `WithModule`

`my.module.ts`

```typescript
import { NgModule } from "@angular/core";
import { WithModule } from "@olop/ng-with";

@NgModule({
  imports: [WithModule],
})
export class MyModule {}
```

## <a name="usage"></a>Usage

`my.component.ts`

```typescript
import { Component } from "@angular/core";
import { Observable, of } from "rxjs";

interface Gear {
  brand: string;
  model: string;
  nbVoice: number;
  nbKeys: number;
}

@Component({
  templateUrl: "./my.component.html",
})
export class MyComponent {
  public record: Gear[] = [
    {
      brand: "Roland",
      model: "G-800",
      nbVoice: 128,
      nbKeys: 76,
    },
    {
      brand: "Korg",
      model: "Triton",
      nbVoice: 62,
      nbKeys: 61,
    },
  ];

  public o$: Observable<Gear>;

  constructor() {
    this.o$ = of(this.record[1]);
  }
}
```

`my.component.html`

```html
<ng-container *pvoWith="record[0] as o">
  <p>{{ o.brand }} {{ o.model }}, {{o.nbVoice}} voices polyphony.</p>
</ng-container>

<ng-container *pvoWith="o$ | async as o">
  <p>{{ o.brand }} {{ o.model }}, {{o.nbKeys}} notes keyboard.</p>
</ng-container>
```