open-index/open-npm huggingface dataset:
npm package: @polymer-labs/crystal-cache
Description: Global package caching system with Crystal Cache architecture
Author: Polymer Labs
Latest version: 1.0.0

# @polymer-labs/crystal-cache

Global package caching system with Crystal Cache architecture for Gel package manager.

## Installation

```bash
npm install @polymer-labs/crystal-cache
```

## Usage

```javascript
const CrystalCache = require('@polymer-labs/crystal-cache');

// Initialize cache
const cache = new CrystalCache();

// Store a package
await cache.store('react', '18.2.0', '/path/to/react-18.2.0.tar.gz');

// Check if package exists
const exists = cache.has('react', '18.2.0');

// Get package path
const pkgPath = cache.get('react', '18.2.0');

// Link package to project
await cache.link('react', '18.2.0', '/project/node_modules/react');

// Get cache statistics
const stats = cache.getStats();
console.log(`Packages: ${stats.totalPackages}`);
console.log(`Size: ${stats.totalSize}`);
console.log(`Saved: ${stats.spaceSaved}`);
```

## Features

- 🔮 **Global Deduplication** - Store packages once, use everywhere
- 🔗 **Symlink Management** - Efficient package linking
- 💾 **Space Efficient** - Reduces disk usage significantly
- ⚡ **Fast Access** - Quick package retrieval
- 🔒 **Integrity Checks** - Hash-based verification
- 📊 **Usage Statistics** - Track cache efficiency

## Architecture

The Crystal Cache uses a centralized storage model:

```
~/.gel/crystal-cache/
├── packages/
│   ├── react@18.2.0/
│   ├── lodash@4.17.21/
│   └── express@4.18.2/
└── metadata.json
```

### How It Works

1. **Storage**: Packages are extracted once to global cache
2. **Linking**: Projects receive symlinks to cached packages
3. **Deduplication**: Same package version shared across projects
4. **Integrity**: SHA-256 hashing ensures package authenticity

## API

### Constructor

```javascript
const cache = new CrystalCache(options);
```

**Options:**

- `cacheDir` (string) - Custom cache directory (default: `~/.gel/crystal-cache`)

### Methods

#### `store(name, version, tarballPath)`

Store a package tarball in cache.

#### `has(name, version)`

Check if package exists in cache.

#### `get(name, version)`

Get path to cached package.

#### `link(name, version, targetPath)`

Create symlink from cache to project.

#### `remove(name, version)`

Remove package from cache.

#### `clear()`

Clear entire cache.

#### `getStats()`

Get cache statistics.

#### `list()`

List all cached packages.

## Performance

Typical performance improvements:

- **Installation Speed**: 3-5x faster on repeated installs
- **Disk Space**: 60-80% reduction across multiple projects
- **Network Usage**: Eliminates redundant package downloads

## Cache Location

Default: `~/.gel/crystal-cache`

Override with environment variable:

```bash
export GEL_CACHE_DIR=/custom/path
```

## Maintenance

```javascript
// Clean old versions
cache.prune({ keepLatest: 2 });

// Verify integrity
const results = await cache.verify();

// Rebuild metadata
await cache.rebuild();
```

## License

MIT © Polymer Labs
npm package: @polymer-labs/gel
Description: The Setting Agent for Modern JavaScript - Fast, Fluid, and Firm package manager
Author: Polymer Labs
Latest version: 1.0.0

# @polymer-labs/gel

The Setting Agent for Modern JavaScript - Fast, Fluid, and Firm package manager.

## Installation

```bash
npm install -g @polymer-labs/gel
```

## Quick Start

```bash
# Create a new project
gel mold react my-app
cd my-app

# Install dependencies
gel bond

# Run scripts
gel run dev
```

## Features

- 🔮 **Crystal Cache** - Global package deduplication
- 💧 **Fluid Commands** - Intuitive CLI inspired by material science
- 🔒 **Lockfile Management** - Deterministic dependency resolution
- 📦 **Monorepo Support** - Workspace management
- 🔍 **Visual Lock** - 3D dependency visualization
- ⚡ **Fast & Efficient** - Optimized package installation

## Commands

### Core Commands

- `gel bond` - Install dependencies (like npm install)
- `gel dissolve <package>` - Remove a package
- `gel mold <template> <name>` - Create new project from template
- `gel run <script>` - Run package.json scripts

### Advanced Commands

- `gel instant <package>` - Quick install without saving
- `gel solidify` - Lock all dependency versions
- `gel heal` - Fix dependency issues
- `gel verify` - Verify package integrity
- `gel view` - Launch 3D dependency visualizer

### Monorepo Commands

- `gel snapshot` - Save workspace state
- `gel rewind` - Restore workspace snapshot
- `gel bridge <workspace>` - Link local packages
- `gel isolate <workspace>` - Test package in isolation

### Security Commands

- `gel quarantine <package>` - Isolate suspicious package
- `gel verify` - Check package integrity

## Dependencies

This package uses:

- `@polymer-labs/crystal-cache` - Global caching system
- `@polymer-labs/visual-lock` (optional) - 3D visualization

## License

MIT © Polymer Labs
npm package: @polymer-labs/visual-lock
Description: 3D interactive dependency visualization component for Gel lockfiles
Author: Polymer Labs
Latest version: 1.0.0

# @polymer-labs/visual-lock

3D interactive dependency visualization component for Gel lockfiles.

## Installation

```bash
npm install @polymer-labs/visual-lock
```

## Usage

### Vanilla JavaScript

```javascript
const { generateVisualizationHTML, buildDependencyGraph } = require('@polymer-labs/visual-lock');
const fs = require('fs');

// Load your gel.lock file
const lockData = JSON.parse(fs.readFileSync('gel.lock', 'utf8'));

// Build dependency graph
const graph = buildDependencyGraph(lockData.dependencies);

// Generate standalone HTML visualization
const html = generateVisualizationHTML(graph, process.cwd());

// Save to file
fs.writeFileSync('visualization.html', html);
```

### React Component

```jsx
import { VisualLock } from '@polymer-labs/visual-lock/react';

function App() {
  const lockData = {
    /* your gel.lock data */
  };

  const handleDissolve = packageName => {
    console.log('Dissolving:', packageName);
    // Execute gel dissolve command
  };

  return <VisualLock lockfileData={lockData} onDissolve={handleDissolve} />;
}
```

## Features

- 🎨 **3D Visualization** - Interactive Three.js rendering
- 🔵 **Glowing Connections** - Highlights dependency relationships
- 🎯 **Click Interactions** - Select nodes for details
- 🎮 **Mouse Controls** - Drag to rotate, scroll to zoom
- 🌈 **Color Coding** - Visual weight indicators
  - 🟢 Green = Light (0-2 dependencies)
  - 🟠 Orange = Medium (3-5 dependencies)
  - 🔴 Red = Heavy (6+ dependencies)
- 💎 **Glassmorphism UI** - Modern, clean interface
- ⚡ **Smooth Animations** - Pulsing and floating effects

## API

### `buildDependencyGraph(dependencies)`

Converts gel.lock dependencies into a graph structure.

**Parameters:**

- `dependencies` (Object) - Dependencies from gel.lock

**Returns:** `{ nodes, edges }`

### `generateVisualizationHTML(graph, projectRoot)`

Generates a standalone HTML file with 3D visualization.

**Parameters:**

- `graph` (Object) - Graph from buildDependencyGraph
- `projectRoot` (string) - Absolute project path

**Returns:** HTML string

### React Component: `<VisualLock>`

**Props:**

- `lockfileData` (Object) - Gel lockfile data
- `onDissolve` (Function) - Callback when dissolve clicked

## Browser Support

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

Requires WebGL support for 3D rendering.

## License

MIT © Polymer Labs
npm package: @polymer-vis/decorator-transformer
Description: A typescript transformer to replace "@property" and "@custom-element" decorators with vanilla javascript for Polymer and LitElement webcomponents.
Author: eterna2
Latest version: 3.0.1

# `@polymer-vis/decorator-transformer`

Replace `PolymerElement` or `LitElement` decorators (`@customElement`, `@property`) in your typescript codes.

**Before**

```ts
@customElement("x-foo")
class XFoo extends HTMLElement {
  static get properties() {
    return {};
  }

  /** some comment */
  @property
  public a: string;
}
```

**After**

```js
class XFoo {
  static get properties() {
    return {
      /*Some comment*/
      prop1: String
    };
  }
}
customElements.define("x-foo", XFoo);
```

> TODO:
>
> - Fix error when `declaration` is `true` if `properties` is not declared.
> - Fix output formatting.

## Usage

```bash
npm i -D @polymer-vis/decorator-transformer
```

### Important Note

If `declaration` for your `tsconfig.json` is set to `true`, you MUST include the `properties` getAccessor in your class:

```js
class SomeElement {
  @property
  prop1: string;

  // this must be include if u are emitting
  // type declaration.
  static get properties() {
    return {};
  }
}
```

### With [ttypescript](https://github.com/cevek/ttypescript)

Update your `tsconfig.json` with `@polymer-vis/decorator-transformer` plugin.
Then run `ttsc` to compile your typescript sources.

```json
{
  "compilerOptions": {
    "plugins": [
      { "transform": "@polymer-vis/decorator-transformer", "type": "config" }
    ]
  }
}
```

### With [typescript compiler API](https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API)

```js
import * as ts from "typescript";
import decoratorTransformer from "@polymer-vis/decorator-transformer";

let source = `
@customElement('x-foo')
class XFoo extends HTMLElement {
  static get properties() { return {}; }

  @property
  public a: string;

  @property
  public b: number;

  @property
  public c: boolean;

  @property
  public d: string[];

  @property
  public e: Array<Date>;

  @property
  public f: object;

  public g: string;
}
`;
let result = ts.transpileModule(source, {
  compilerOptions: { module: ts.ModuleKind.CommonJS },
  transformers: { before: [decoratorTransformer()] }
});

console.log(result.outputText);
```

## Credits

The source codes are originally by [43081j](https://github.com/43081j) at [lit-element PR#145](https://github.com/Polymer/lit-element/pull/145). I made some minor improvements to replace `@property` with the corresponding comment and property declarations (if present).