open-index/open-npm huggingface dataset:
npm package: @ramselgonzalez/bundler
Description: A small bundler to service personal projects as an alternative to industry bundlers such as Webpack, Rollup, etc.
Author: Ramsel Gonzalez
Latest version: 1.0.0

# bundler
A small bundler to service personal projects as an alternative to industry bundlers such as Webpack, Rollup, etc.

# purpose
This was an experiment to better understand what the frontend ecosystem is built on top of. This doesn't feature anything remotely close to what a production-ready bundler has but it was able to parsed my source code into a single file. This was built using `espree` for AST generation, `estraverse` for AST traversal and editing, and a fork of `escodegen` for rebuilding the AST into javascript.
npm package: @ramses-superapp/host-services-contract
Description: A Lightweight NPM package to ease host-services injection into MiniApps from SuperApp for Ramses Built MiniApps
Author: Dyaa El-Deen
Latest version: 0.1.6

# @ramses-superapp/host-services-contract

A Lightweight NPM pacakge to ease host services injection into MiniApps from SuperApp for Ramses Built MiniApps

## Installation

```sh
npm install @ramses-superapp/host-services-contract

#or

yarn add @ramses-superapp/host-services-contract

```

## Usage

```js
import { useHostServices } from '@ramses-superapp/host-services-contract';

// ...

const { auth, eventBus } = useHostServices();

const handleLogin = async () => {
  // ...
  await auth.storeTokens(
    'OnBoarding',
    'access-token-from-api',
    'refresh-token-from-api'
  );
  await auth.storeUserId('OnBoarding', '123');
  eventBus.emitFromRemote('OnBoarding', 'auth:login_success', {
    userId: '123',
  });
};
```

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @ramstack/alpinegear-destroy
Description: @ramstack/alpinegear-destroy provides 'x-destroy' Alpine.js directive, which is the opposite of 'x-init' and allows you to execute code when an element is removed from the DOM.
Author: Rameel Burhan
Latest version: 1.4.5

# @ramstack/alpinegear-destroy
[![NPM](https://img.shields.io/npm/v/@ramstack/alpinegear-destroy)](https://www.npmjs.com/package/@ramstack/alpinegear-destroy)
[![MIT](https://img.shields.io/github/license/rameel/ramstack.alpinegear.js)](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)

`@ramstack/alpinegear-destroy` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-destroy` directive.

This directive is the opposite of `x-init` and allows you to hook into the cleanup phase of any element in Alpine,
running a callback when the element is removed from the DOM.

## Installation

### Using CDN
To include the CDN version of this plugin, add the following `<script>` tag before the core `alpine.js` file:

```html
<!-- alpine.js plugin -->
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-destroy@1/alpinegear-destroy.min.js" defer></script>

<!-- alpine.js -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
```

### Using NPM
Alternatively, you can install the plugin via `npm`:

```bash
npm install --save @ramstack/alpinegear-destroy
```

Then initialize it in your bundle:

```js
import Alpine from "alpinejs";
import destroy from "@ramstack/alpinegear-destroy";

Alpine.plugin(destroy);
Alpine.start();
```

## Usage
In this example, when the `<div>` is removed, the message `Element destroyed` will appear.

```html
<div x-data="{ show: true, destroyed: false }">
  <button @click="show = false">Remove element</button>
  <button @click="show = true, destroyed = false">Reset</button>

  <p x-show="destroyed">
    Element destroyed
  </p>

  <template x-if="show">
    <p x-destroy="destroyed = true">
      Hello, World!
    </p>
  </template>
</div>
```
🚀 [Live demo | Alpine.js x-destroy: Handle DOM element removal](https://jsfiddle.net/rameel/qcnwm2b0/)

## Source code
You can find the source code for this plugin on GitHub:

https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy


## Related packages
This package is part of **[AlpineGear](https://github.com/rameel/ramstack.alpinegear.js)** —
a collection of utilities and directives for [Alpine.js](https://alpinejs.dev).

You can find the full list of related packages and their documentation here:
https://github.com/rameel/ramstack.alpinegear.js


## Contributions
Bug reports and contributions are welcome.

## License
This package is released as open source under the **MIT License**.
See the [LICENSE](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE) file for more details.
npm package: @ramstack/alpinegear-typegrab
Description: @ramstack/alpinegear-typegrab provides the x-typegrab Alpine.js directive, which automatically focuses an element when the user starts typing and no editable element is active.
Author: Rameel Burhan
Latest version: 1.4.5

# @ramstack/alpinegear-typegrab

[![NPM](https://img.shields.io/npm/v/@ramstack/alpinegear-typegrab)](https://www.npmjs.com/package/@ramstack/alpinegear-typegrab)
[![MIT](https://img.shields.io/github/license/rameel/ramstack.alpinegear.js)](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)

`@ramstack/alpinegear-typegrab` is a lightweight plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-typegrab` directive.

The directive automatically focuses an element when the user starts typing **any printable, non-whitespace character**,
as long as no editable element is currently focused. This is useful for search inputs, command palettes,
and similar UX patterns where typing should immediately direct input to a specific field.

## How it works

* Listens globally to the `keydown` event.
* Triggers only for **printable, non-whitespace characters**.
* Ignores events with `Ctrl`, `Alt`, or `Meta` modifiers.
* Does nothing if the active element is `input`, `textarea`, or an element with `contenteditable`.
* Focuses the element marked with `x-typegrab`.

## Installation

### Using CDN

```html
<!-- alpine.js plugin -->
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-typegrab@1/alpinegear-typegrab.min.js" defer></script>

<!-- alpine.js -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
```

### Using NPM

```bash
npm install --save @ramstack/alpinegear-typegrab
```

```js
import Alpine from "alpinejs";
import typegrab from "@ramstack/alpinegear-typegrab";

Alpine.plugin(typegrab);
Alpine.start();
```

## Usage

```html
<input
  type="search"
  placeholder="Type to search..."
  x-typegrab
/>
```

When the user presses any printable character key (excluding whitespace) while no other editable element is focused,
this input will automatically receive focus.

## Notes

* The directive does not cancel or modify the original keyboard event.
* The target element must be focusable.
* Focus will not be stolen from active editable elements.

## Source code

You can find the source code for this plugin on GitHub:
https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/typegrab

## Contributions

Bug reports and contributions are welcome.

## License

This package is released as open source under the **MIT License**.
See the [LICENSE](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE) file for more details.
npm package: @ramstack/pagelock
Description: A simple utility for managing page scroll locking. No external dependencies.
Author: rameel
Latest version: 1.1.0

# @ramstack/pagelock
[![NPM](https://img.shields.io/npm/v/@ramstack/pagelock)](https://www.npmjs.com/package/@ramstack/pagelock)
[![MIT](https://img.shields.io/github/license/rameel/pagelock)](https://github.com/rameel/pagelock/blob/main/LICENSE)

`@ramstack/pagelock` is a simple utility for managing page scroll locking.
The library is around 750 bytes in size and has no external dependencies.

## Installation

### Using NPM
```sh
npm install --save @ramstack/pagelock
```

### Using CDN
```html
<script src="https://cdn.jsdelivr.net/npm/@ramstack/pagelock@1/dist/pagelock.min.js"></script>
```

## Usage examples

#### Vanilla JS

```vue
<button onclick="show()">Show Modal</button>

<script>
    let release;

    async function show() {
        // Lock the page scroll before showing the modal dialog
        release = pagelock();

        await showModal();

        // Unlock the page scroll
        release();
    }
</script>
```

#### Vue

```vue
<script setup>

import { ref, watch } from "vue";
import { pagelock } from "@ramstack/pagelock";

let show = ref(false);
let release;

watch(show, value => {
  if (value) {
    // Lock page scroll
    release = pagelock();
  }
  else {
    // Unlock page scroll
    release?.();
  }
});

</script>

<template>
  <label>
    <input v-model="show" type="checkbox" />
    Lock page
  </label>
  <div style="height: 1000px; width: 100%">
  </div>
</template>
```

## Functions

```js
/**
 * Locks the page scroll. Subsequent calls to the function add to the queue of lock holders.
 * The page scroll remains locked until the queue is empty. To forcibly release the page scroll,
 * bypassing the queue, call the {@link pageunlock} function with `force = true`.
 *
 * @returns {() => void} - A function to unlock the page scroll.
 * Subsequent calls to this release function are safe: it only releases its own lock
 * without affecting the others in the queue.
 */
function pagelock(): () => void;
```

```js
/**
 * Unlocks the page scroll. Unlike the release function returned by {@link pagelock},
 * this function removes locks from the end of the queue (one by one).
 *
 * @param {boolean} [force] - If `true`, forcibly unlocks the page scroll, clearing the entire queue.
 * Otherwise, only the most recent lock is released. Defaults to `false`.
 */
function pageunlock(force?: boolean): void;
```

## License
This package is released under the **MIT License**.
npm package: @ramstack/vue-pagelock
Description: A lightweight utility for managing page scroll locking in `Vue` applications
Author: rameel
Latest version: 1.1.0

# @ramstack/vue-pagelock
[![NPM](https://img.shields.io/npm/v/@ramstack/vue-pagelock)](https://www.npmjs.com/package/@ramstack/vue-pagelock)
[![MIT](https://img.shields.io/github/license/rameel/vue-pagelock)](https://github.com/rameel/vue-pagelock/blob/main/LICENSE)

`@ramstack/vue-pagelock` is a lightweight utility for managing page scroll locking in `Vue` applications.
The library is approximately `1 KiB` in size.

Uses [@ramstack/pagelock](https://github.com/rameel/pagelock) under the hood.

## Installation

### Using NPM
```sh
npm install --save @ramstack/vue-pagelock
```

### Using CDN
```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ramstack/vue-pagelock@1/dist/vue-pagelock.min.js"></script>

<script>
    const app = Vue.createApp({
        setup() {
        }
    });

    // Register the pagelock plugin
    app.use(PagelockPlugin);

    app.mount("#app");
</script>
```

### Using the ES module build
```html
<script type="module">
    import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    import { PagelockPlugin } from "https://cdn.jsdelivr.net/npm/@ramstack/vue-pagelock@1/dist/vue-pagelock.esm.min.js";

    const app = createApp({
        setup() {
        }
    });

    // Register the pagelock plugin
    app.use(PagelockPlugin);

    app.mount("#app");
</script>
```

## Usage examples

After installation, register the plugin at the application level.

```js
import App from "./App";
import { createApp } from "vue";
import { PagelockPlugin } from "@ramstack/vue-pagelock";

const app = createApp(App);
app.use(PagelockPlugin);
app.mount("#app");
```

Alternatively, you can import the directive directly into the components where it is needed.
```vue
<template>
  <button @click="show">Show modal</button>

  <div v-if="isOpen" class="modal">
    <button @click="close">X</button>

    <div v-pagelock="isOpen" class="modal__content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Praesent ac commodo justo, sit amet pellentesque nunc.
        Vivamus sit amet porttitor quam, nec dictum magna.
        Vestibulum mollis magna vel justo consectetur, vel viverra nisl maximus.
        Sed luctus, massa sit amet fermentum aliquet, erat tortor luctus diam,
        et commodo sem ante ut ante. Aenean rhoncus tellus vel est feugiat,
        at sagittis nisl finibus. Praesent elementum, risus ut congue ultricies,
        nisi tortor pretium magna, in cursus metus nisl sed dolor.
        Phasellus sit amet velit ante. Nulla odio arcu, pretium sed ante nec,
        tempor fringilla nisl.
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from "vue";
  import { vPagelock } from "@ramstack/vue-pagelock";

  const isOpen = ref(false);

  function show(): void {
    isOpen.value = true;
  };

  function hide(): void {
    isOpen.value = false;
  };
</script>
```

## License
This package is released under the **MIT License**.