open-index/open-npm huggingface dataset:
npm package: @subbi/react
Description: React components to assist in handling subscribers backed by subbi smart contracts
Author: subbi
Latest version: 1.1.0

# Subbi - Decentralised Subscriptions

## Getting starts

If you haven't already, head over to [Subbi](https://subbi.fi) to create your subscription contract and start accepting subscribers today!

## Installation

`yarn add @subbi/react`

or

`npm install @subbi/react`

## Features

- Handles adding and switching networks if a user's browser wallet does not have the configuration for the network your Subbi contract is deployed to (e.g Polygon).
- Easy to use and configurable React components for a complete drop in experience.
- React hooks if you want more control over the checkout flow of your site.

## Documentation

[Check out the docs](https://docs.subbi.fi)
npm package: @subbly/api-client
Description: Subbly API client for JS
Author: Vitalii Cherniuk
Latest version: 0.6.21

# Storefront API Client

A JavaScript client for the Subbly Storefront API.

## Installation

From the package manager of your choice:

```bash
npm install @subbly/api-client
# or
yarn add @subbly/api-client
```

## Usage

```javascript
import { SubblyApiClient } from '@subbly/api-client';

const api = SubblyApiClient.init({
  apiKey: 'API_KEY',
});
```

> **Note**: You can find your API key on the [Storefront API keys](https://subbly.co/admin/settings/api-keys) page in Subbly Admin.

## License

[MIT](https://github.com/subbly/subbly-web/blob/main/packages/api-client/LICENCE)
npm package: @subbly/react
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Author: Vitalii Cherniuk
Latest version: 0.0.26

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @subbly/sdk
Description: Subbly web SDK
Author: Vitalii Cherniuk
Latest version: 0.6.21

# Subbly JS SDK

A JavaScript SDK for Subbly. 

Use Subbly SDK to interact with Subbly API and build custom applications.

## Installation

From the package manager of your choice:
```bash
npm install @subbly/sdk
# or
yarn add @subbly/sdk
```

## Usage

```javascript
import Subbly from '@subbly/sdk';

Subbly.init({
  apiKey: 'API_KEY'
}).then((subbly) => {
  // access Subbly SDK methods
});
```

> **Note**: You can find your API key on the [Storefront API keys](https://subbly.co/admin/settings/api-keys) page in Subbly Admin.

## Documentation

Full documentation is available at [subbly.dev](https://docs.subbly.dev/reference/subbly-sdk/).


## License

[MIT](https://github.com/subbly/subbly-web/blob/main/packages/sdk/LICENCE)
npm package: @subbly/swc-plugin-add-element-source
Description: An SWC plugin to add source code location to JSX elements.
Author: vitalii
Latest version: 0.2.0

# @subbly/swc-plugin-add-element-source

Automatically add JSX element source information.

```html
<!-- Before -->
<div></div>

<!-- After -->
<div 
  data-sbly-id="src/components/Component.tsx:16:5" 
  data-sbly-component-path="src/components/Component.tsx"
  data-sbly-component-line="16"
></div>
```

## Installation

Install as devDependency with your preferred package manager.

```bash
npm i -D @subbly/swc-plugin-add-element-source
```

Add plugin to SWC config.
Here is an example how to use the plugin with Next.js

```ts
// next.config.ts
const nextConfig: NextConfig = {
    experimental: {
        swcPlugins: [
            // Pass an empty object to satisfy SWC's API schema.
            ['@subbly/swc-plugin-add-element-source', {}]
        ]
    }
};
```

## Configuration

No configuration options.

## License

MIT
npm package: @subbu963/esm-polyfills
Description: Polyfills for ESM like __dirname, __filename, etc
Author: Aditya Subramanyam
Latest version: 1.0.1

[![Build](https://github.com/subbu963/esm-polyfills/actions/workflows/main.yml/badge.svg)](https://github.com/subbu963/esm-polyfills/actions/workflows/main.yml)

# esm-polyfills

[ES module format](https://nodejs.org/api/esm.html#modules-ecmascript-modules) is becoming a norm these days with some of the popular modules published as only ES modules(example [got](https://github.com/sindresorhus/got), [ky](https://github.com/sindresorhus/ky)). It also comes with a lot of useful features like Top-level await, etc.

But, there are a few features that CommonJS supports but ESM doesnt like [these](https://nodejs.org/api/esm.html#differences-between-es-modules-and-commonjs).
It becomes a pain to migrate each of these features to a ESM compatible feature and its a lot of manual work. This polyfill tries to support those commonly used and feasible features in ES modules.

Also, i have a detailed it in my blog [here](https://lordofthethings.xyz/how-to-fix-referenceerror-__dirname/__filename/require-is-not-defined-in-es-module-scope/).

## Available polyfills

-   [x] \_\_filename
-   [x] \_\_dirname
-   [x] require
-   [x] require.resolve

## Installation

### Using npm:

```bash
$ npm install --save @subbu963/esm-polyfills
```

### Using yarn:

```bash
$ yarn add @subbu963/esm-polyfills
```

## Usage

```bash
$ node -r @subbu963/esm-polyfills <your-script>.mjs
```

Then in your `<your-script>.mjs` file, globals like `__filename`, `__dirname`, `require` and `require.resolve` will be automatically available:

```javascript
console.log('__filename', __filename);
console.log('__dirname', __dirname);
console.log(require('lodash'), require.resolve('lodash'), require('../package.json'));
```

If you dont want to auto polyfill, then you can programmatically import them and use it in your code like this:

```bash
$ ESM_POLYFILLS_GLOBAL=false node <your-script>.mjs
```

Then in your `<your-script>.mjs` file, do:

```javascript
import { getFileName, getDirName, getRequire as _require_ } from '@subbu963/esm-polyfills';

const __filename = getFileName();
const __dirname = getDirName();

console.log('__filename', __filename);
console.log('__dirname', __dirname);
console.log(_require_('lodash'), _require_.resolve('lodash'));
```

## Comparision with other libraries

There are other libraries which serve the same purpose like:

-   [@uscreen.de/common-esm](https://www.npmjs.com/package/@uscreen.de/common-esm)
-   [esm-utils](https://www.npmjs.com/package/esm-utils)
-   [desm](https://www.npmjs.com/package/desm)

But these packages arent actually polyfills. They require you to manually import those libraries and use `__dirname`, `__filename`, etc from them.
My polyfill aims to get away with this manual process and use those commonjs functionality directly in a ES module like you are in a commonjs module.
npm package: @subbu963/import-map-utils
Description: ⚡ Utilities to super-charge your ES Modules!
Author: Aditya Subramanyam
Latest version: 0.1.4

# ⚡ Utilities to super-charge your ES Modules!

## Utils
1) [CSS loader](#css-loader)
2) More upcoming



## CSS loader
You can use the `CSS loader` to load css in your ES Modules.

### Usage
In your html file add the following script(where `assetsRoot` is the path from which you css is served from) and import map:
```html
<html>
    <head>
        ...
        <script>
            window.__importMapUtils = {
                css: {
                    assetsRoot: '/assets/'
                }
            };
        </script>
        <script type="importmap">
            {
                "imports": {
                    "import-map-utils/": "https://cdn.jsdelivr.net/npm/@subbu963/import-map-utils@0.1.4/lib/"
                }
            }
        </script>
        ...
    </head>
    ...
</html>
```
Then in your ES Module import your css files like this:
```javascript
import styles from 'import-map-utils/css/loader.js?src=./main.css';
// Now styles are auto injected into the DOM
// Some code
// You can also unmount your styles if you want to do a cleanup like this
styles.unmount();

// You can remount it using
styles.mount();
```

### Options
You can pass options like this:
```html
<script>
    window.__importMapUtils = {
        css: {
            useLocation: true, // to use window.location to construct the base
            base: 'https://some-site.com/', // or pass the base manually
            assetsRoot: '/assets/' // root assets folder from which your css is served from
        }
    };
</script>
```