open-index/open-npm huggingface dataset:
npm package: @martinstark/storage-ts
Description: Type safe client side storage.
Author: Martin
Latest version: 1.1.0

# Storage TS

Typesafe local, session, or in-memory storage.

If local or session storage are unavailable it will fall back to in-memory storage.

## Usage

```shell
npm i @martinstark/storage-ts

pnpm i @martinstark/storage-ts

yarn add @martinstark/storage-ts
```

```typescript
import { createStorage, StorageType } from "@martinstark/storage-ts";

// Create a schema of valid key value pairs
type Schema = {
  keyA: { complex: "object" };
  keyB: number;
};

// Create a store of the desired type. If it is not available,
// in-memory storage will be used as a fallback.
const store = createStorage<Schema>({
  // "local" persists across browser sessions
  // "session" persists until tab is closed
  // "in-memory" persists until tab is closed
  type: StorageType.LOCAL,

  // set unique prefixes if more than one store is used
  // optional - default: undefined
  prefix: "id",

  // squelch errors
  // false requires try/catch statements around calls to
  // `read` and `write`
  // optional - default: true
  silent: true,
});

// ❌ Argument of type number is not assignable to parameter
// of type { complex: "object" };
store.write("keyA", 1);

// ✅
store.write("keyA", { complex: "object" });

// { complex: "object" } | null
const v1 = s.read("keyA");

// ✅
store.write("keyB", 5);

// number | null
const v2 = s.read("keyB");
```

## Edge Cases

If `window`, `localStorage` or `sessionStorage` are unavailable, in-memory storage will be created as a fallback, regardless of which `StorageType` is provided when creating the store.

In silent (default) mode, `write` will fail silently and `read` will return `null` instead of throwing an error.

If `silent` is set to `false` read and write can throw, necessitating `try/catch` statements around each call.
npm package: @martinstark/throttle-ts
Description: Correctly typed generic throttle function
Latest version: 1.3.0

# throttle-ts

Correctly typed, generic, tiny ([431B](https://bundlephobia.com/result?p=@martinstark/throttle-ts@1.2.2)), typescript throttle function.

![throttle typescript](https://i.imgur.com/jPvfFJm.png)

Yields the return value of the throttled function, or undefined when throttled/cancelled.

The throttled function keeps the type signature of the original function, plus `void`.

Returns a cancel function which enables cleanup of the timeout, and blocks future calls to the throttled function. Useful when unmounting react/view components.

### Usage

```javascript
import { throttle } from "@martinstark/throttle-ts";
```

```javascript
const fn = () => "executed";

const [throttledFn] = throttle(fn, 200);

throttledFn(); // "executed"
throttledFn(); // undefined
throttledFn(); // undefined
setTimeout(throttledFn, 500); // "executed"
```

### Using Cancel

```javascript
const fn = () => "executed";

const [throttledFn, cancel] = throttle(fn, 200);

throttledFn(); // "executed"
setTimeout(throttledFn, 500); // undefined
cancel();
```
npm package: @martinstark/use-once
Description: Roughly a react hook equivalent of componentWillMount
Latest version: 1.0.4

# useOnce

Tiny typescript hook for running a segment of code once, immediately before the render is committed to the screen.

It is the rough equivalent of `componentWillMount` using React hooks.

See [explanation](https://dev.to/video/the-equivalent-of-componentwillmount-using-react-hooks-11em).

_Note: this is not necessarily a recommended pattern, but it is a question that comes up every so often._

# Usage

```javascript
// Without return value

const runBeforeFirstRender = () => {};

const Component = () => {
  useOnce(runBeforeFirstRender);

  return <></>;
};

// With return value

const runBeforeFirstRender = () => "result";

const Component = () => {
  const r = useOnce(runBeforeFirstRender);

  return <>{r}</>;
};
```
npm package: @martinsura/ui
Description: Minimal React UI component library built on Tailwind CSS v4
Latest version: 0.1.14

# @martinsura/ui

React UI component library built on Tailwind CSS v4.

## Development

Start the local preview app:

```bash
npm start
```

Build the library for publishing:

```bash
npm run build
```

## Publishing Workflow

Source code lives in a private GitHub repository:

- GitHub: [https://github.com/martinsura/ui](https://github.com/martinsura/ui)
- npm package: `@martinsura/ui`

Publishing to npm is handled by GitHub Actions in [publish.yml](/Users/martinsura/Develop/Projects/martinsura-ui/.github/workflows/publish.yml).

### Push changes to GitHub only

If you want to save work to GitHub without creating an npm release, push only the branch:

```bash
git add .
git commit -m "Update components"
git push origin main
```

This does not publish anything to npm.

### Publish a new npm version

1. Update the version in `package.json`.
2. Commit and push the branch.
3. Create a Git tag with the same version prefixed by `v`.
4. Push the tag.

Example for version `0.1.1`:

```bash
git add .
git commit -m "Release 0.1.1"
git push origin main

git tag v0.1.1
git push origin v0.1.1
```

Important:

- `package.json` version should match the tag version
- example: `package.json` = `0.1.1`, Git tag = `v0.1.1`
- the npm publish runs only when the tag is pushed

### Emergency local publish

If you ever need an emergency hotfix without waiting for GitHub Actions, you can publish directly from your machine:

```bash
npm run build
npm publish --access public
```

Important:

- always bump the version in `package.json` first
- npm does not allow publishing the same version twice
- this should be used only as a fallback, not as the default release workflow

## GitHub Actions Setup

Before the first npm release, add this repository secret in GitHub:

- `NPM_TOKEN`

That token is used by the publish workflow to run:

```bash
npm publish
```
npm package: @martinszeltins/decrypt
Description: Decrypt text and files encrypted with AES-256-GCM and Argon2id
Author: Martins Zeltins
Latest version: 2.0.0

Encrypt text and files using AES-256 encryption.

# Decryption

### Decrypt text

```bash
npx @martinszeltins/decrypt "Your plain text here"
```

### Decrypt a file

```bash
npx @martinszeltins/decrypt myfile.txt
```

# Encryption

### Encrypt text

```bash
npx @martinszeltins/encrypt "Your plain text here"
```

### Encrypt a file

```bash
npx @martinszeltins/encrypt myfile.txt
```
npm package: @martinszeltins/encrypt
Description: Encrypt text and files using AES-256-GCM with Argon2id key derivation
Author: Martins Zeltins
Latest version: 2.0.0

Encrypt text and files using AES-256 encryption.

# Encryption

### Encrypt text

```bash
npx @martinszeltins/encrypt "Your plain text here"
```

### Encrypt a file

```bash
npx @martinszeltins/encrypt myfile.txt
```

# Decryption

### Decrypt text

```bash
npx @martinszeltins/decrypt "Your plain text here"
```

### Decrypt a file

```bash
npx @martinszeltins/decrypt myfile.txt
```
npm package: @martinszeltins/open-in-editor
Description: Open files in your editor from the browser
Author: Martins Zeltins
Latest version: 1.0.3

# @martinszeltins/open-in-editor

Open files in your editor directly from the browser.

## Usage

```bash
npx @martinszeltins/open-in-editor@latest
```

This starts a server on port `44044`. Send requests to open files:

```
$ curl "http://localhost:44044/__open-in-editor?file=/home/martins/Programming/open-in-editor/main.js:3"
```

## License

MIT
npm package: @martinszeltins/vue-component-graph
Description: Visualize Vue component dependencies (ASCII & HTML)
Author: Martins Zeltins
Latest version: 1.0.0

# Nuxt Component Graph

Visualize your Vue component dependency graph as an ASCII tree or interactive HTML view.

## Installation

```bash
# Install locally in your project
npm install @martinszeltins/vue-component-graph

# Or install globally for direct CLI use
npm install -g @martinszeltins/vue-component-graph
```

## Usage

1. As a library (in code)

```javascript
import { generateAsciiTree, generateHtmlTree } from '@martinszeltins/vue-component-graph'

async function run() {
    const ascii = await generateAsciiTree({
        root: '/path/to/your-vue-project',
        entry: 'src/App.vue',
        output: 'ascii'
    })

    console.log(ascii)

    const html = await generateHtmlTree({
        root: '/path/to/your-vue-project',
        entry: 'src/App.vue',
        output: 'html'
    })

    // e.g. write html to file:
    // await fs.promises.writeFile('graph.html', html)
}
```

2. From the CLI

```bash
# If installed locally:
npx @martinszeltins/vue-component-graph --root /home/projects/nuxt-project /home/projects/nuxt-project/components/MyComponent.vue --output=ascii

# If installed globally:
vue-component-graph --root /home/projects/nuxt-project /home/projects/nuxt-project/components/MyComponent.vue --output=ascii
```


## Options

````
Usage: vue-component-graph [options] <entry>

Generate ASCII or HTML tree of Vue component dependencies.

Arguments:
  entry                   Entry .vue file or directory

Options:
  -r, --root <dir>        Root directory to scan for .vue files  [default: process.cwd()]
  -o, --output <type>     Output format: 'ascii' or 'html'      [default: "ascii"]
  -h, --help              display help for command
````

## Configuration

All you need is:
- A valid Vue project tree under `<root>`, with .vue files.
- An entry component (src/App.vue or any .vue file or directory).

Your graph will include both:
- Imported components (import { MyComp } from './MyComp.vue')
- Static `<MyComp>` tags in template content

## Contributing & Support
- Repo: https://github.com/martinszeltins/vue-component-graph
- Issues: https://github.com/martinszeltins/vue-component-graph/issues
- License: MIT

### ASCII Output
To generate an ASCII representation of the component dependencies, you can run the following command:

```bash
$ npx @martinszeltins/vue-component-graph --root /home/projects/nuxt-project /home/projects/nuxt-project/components/MyComponent.vue --output=ascii

MyComponent.vue
├── app-layout.vue
│   ├── order-load-error.vue
│   │   └── support-button.vue
│   ├── support-button.vue
│   ├── page-info-block.vue
│   ├── app-alert.vue
│   ├── customer-support-modal.vue
│   │   └── customer-support-contacts.vue
```

### HTML Output
To generate an HTML representation of the component dependencies, you can run the following command:

```bash
$ npx @martinszeltins/vue-component-graph --root /home/projects/nuxt-project /home/projects/nuxt-project/components/MyComponent.vue --output=html
```