open-index/open-npm huggingface dataset:
npm package: @pieced/babel-plugin-auto-css-modules
Description: Automatically configuration babel css-modules
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/babel-plugin-auto-css-modules 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/babel-plugin-auto-css-modules" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/babel-plugin-auto-css-modules.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/babel-plugin-auto-css-modules" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/babel-plugin-auto-css-modules.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/babel-plugin-auto-css-modules" target="_blank">
  <img alt="Babel" src="https://img.shields.io/badge/babel->=7.0.0-blue">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/babel-plugin-auto-css-modules" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/babel-plugin-auto-css-modules">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/babel-plugin-auto-css-modules" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/babel-plugin-auto-css-modules" />
  </a>
</p>

> Automatically identify CSS Modules

## Install

```sh
npm i @pieced/babel-plugin-auto-css-modules
```

## Usage

```js
import styles from 'a.scss'; //===>import styles from 'a.scss?modules'
```

`Without options:`

```json
{
  "plugins": [
    "@pieced/babel-plugin-auto-css-modules"
  ]
}
```

`With options:`

```json
{
  "plugins": [
    [
      "@pieced/babel-plugin-auto-css-modules",
      {
        "generate": "function"
      }
    ]
  ]
}
```

## Options

`generate type function`

```js
(value, suffix) => {
  const CSS_EXT_NAMES = ['.css', '.less', '.sass', '.scss', '.stylus', '.styl'];
  if (CSS_EXT_NAMES.includes(suffix)) return `${value}?modules`;
}
// return import styles from 'a.scss?modules'
```
npm package: @pieced/eslint-config
Description: eslint configuration
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/eslint-config 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/eslint-config" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/eslint-config.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/eslint-config" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/eslint-config.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/eslint-config" target="_blank">
  <img alt="Babel" src="https://img.shields.io/badge/babel->=7.0.0-blue">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/eslint-config" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/babel-plugin-auto-css-modules">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/eslint-config" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/eslint-config" />
  </a>
</p>

> eslint configuration

## Install

```sh
npm i @pieced/eslint-config -D
```

## Usage

```js
module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 'latest',
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    '@pieced/eslint-config',
  ],
  rules: {},
};
```
npm package: @pieced/font-config-webpack-plugin
Description: Automatically configuration webpack5 font loader
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/font-config-webpack-plugin 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/font-config-webpack-plugin" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/font-config-webpack-plugin.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/font-config-webpack-plugin" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/font-config-webpack-plugin.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/font-config-webpack-plugin" target="_blank">
  <img alt="Webpack" src="https://img.shields.io/badge/webpack->=5.0.0-blue">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/font-config-webpack-plugin" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/font-config-webpack-plugin">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/font-config-webpack-plugin" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/font-config-webpack-plugin" />
  </a>
</p>

> Automatically configuration webpack5 font loader

## Install

```sh
npm i --save-dev @pieced/font-config-webpack-plugin
```

## Webpack Config

```js
const FontConfigWebpackPlugin = require('@pieced/font-config-webpack-plugin');
module.exports = {
  plugins: [new FontConfigWebpackPlugin()],
};
```

## Options

**suffix**

- `type array`
- `default ['woff', 'woff2', 'eot', 'ttf', 'otf']`

**generator**

- `type object`
- [webpack.rule.generator](https://webpack.js.org/configuration/module/#rulegenerator)
- default

```js
const defaultGenerator = {
  filename: webpack.mode === 'development' ? '[path][name][ext]' : 'static/font/[contenthash:10][ext]',
}
```
npm package: @pieced/image-config-webpack-plugin
Description: Automatically configuration webpack5 image loader
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/image-config-webpack-plugin 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/image-config-webpack-plugin" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/image-config-webpack-plugin.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/image-config-webpack-plugin" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/image-config-webpack-plugin.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/image-config-webpack-plugin" target="_blank">
  <img alt="Webpack" src="https://img.shields.io/badge/webpack->=5.0.0-blue">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/image-config-webpack-plugin" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/image-config-webpack-plugin">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/image-config-webpack-plugin" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/image-config-webpack-plugin" />
  </a>
</p>

> Automatically configuration webpack5 image loader

## Install

```sh
npm i --save-dev @pieced/image-config-webpack-plugin
```

## Webpack Config

```js
const ImageConfigWebpackPlugin = require('@pieced/image-config-webpack-plugin');
module.exports = {
  plugins: [new ImageConfigWebpackPlugin()],
};
```

## Options

**suffix**

- `type array`
- `default ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'avif']`


**parser**

- `type object`
- [webpack.rule.parser](https://webpack.js.org/configuration/module/#ruleparser)
- default

```js
const defaultParser = {
  dataUrlCondition: {
    maxSize: webpack.mode === 'development' ? undefined : 1000,
  },
}
```

**generator**

- `type object`
- [webpack.rule.generator](https://webpack.js.org/configuration/module/#rulegenerator)
- default

```js
const defaultGenerator = {
  filename: webpack.mode === 'development' ? '[path][name][ext]' : 'static/images/[contenthash:10][ext]',
}
```
npm package: @pieced/js-config-webpack-plugin
Description: Automatically configuration webpack5 js loader
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/js-config-webpack-plugin 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/js-config-webpack-plugin" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/js-config-webpack-plugin.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/js-config-webpack-plugin" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/js-config-webpack-plugin.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/js-config-webpack-plugin" target="_blank">
  <img alt="Webpack" src="https://img.shields.io/badge/webpack->=5.0.0-blue">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/js-config-webpack-plugin" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/js-config-webpack-plugin">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/js-config-webpack-plugin" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/js-config-webpack-plugin" />
  </a>
</p>

> Automatically configuration webpack5 js loader

## Install

```sh
npm i --save-dev @pieced/js-config-webpack-plugin
```

## Webpack Config

```js
const JsConfigWebpackPlugin = require('@pieced/js-config-webpack-plugin');
module.exports = {
  plugins: [new JsConfigWebpackPlugin()],
};
```

## Options

**suffix**

- `type array`
- `default ['js', 'jsx', 'mjs']`

**filename**

- `type string function (pathData, assetInfo) => string`
- [output.filename](https://webpack.js.org/configuration/output/#outputfilename)
- default

```js
webpack.mode === 'development' ? '[name].js' : 'static/js/[contenthash:10].js'
```

**chunkFilename**

- `type string function (pathData, assetInfo) => string`
- [output.chunkFilename](https://webpack.js.org/configuration/output/#outputchunkfilename)
- default

```js
webpack.mode === 'development' ? '[name].js' : 'static/js/[contenthash:10].js'
```

**terser**

- `type object`
- [terser-webpack-plugin options](https://webpack.js.org/plugins/terser-webpack-plugin/#options)
- default

```js
const defaultTerser = {
  extractComments: false,
  terserOptions: {
    output: {
      comments: false,
    },
    compress: {
      drop_debugger: true,
      drop_console: true,
    },
  },
}
```
npm package: @pieced/media-config-webpack-plugin
Description: Automatically configuration webpack5 media loader
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/media-config-webpack-plugin 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/media-config-webpack-plugin" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/media-config-webpack-plugin.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/media-config-webpack-plugin" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/media-config-webpack-plugin.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/media-config-webpack-plugin" target="_blank">
  <img alt="Webpack" src="https://img.shields.io/badge/webpack->=5.0.0-blue">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/media-config-webpack-plugin" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/media-config-webpack-plugin">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/media-config-webpack-plugin" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/media-config-webpack-plugin" />
  </a>
</p>

> Automatically configuration webpack5 media loader

## Install

```sh
npm i --save-dev @pieced/media-config-webpack-plugin
```

## Webpack Config

```js
const MediaConfigWebpackPlugin = require('@pieced/media-config-webpack-plugin');
module.exports = {
  plugins: [new MediaConfigWebpackPlugin()],
};
```

## Options

**suffix**

- `type array`
- `default ['webm', 'mp4', 'ogv', 'mp3', 'aac', 'ogg', 'wav']`


**parser**

- `type object`
- [webpack.rule.parser](https://webpack.js.org/configuration/module/#ruleparser)
- default

```js
const defaultParser = {
  dataUrlCondition: {
    maxSize: webpack.mode === 'development' ? undefined : 1000,
  },
}
```

**generator**

- `type object`
- [webpack.rule.generator](https://webpack.js.org/configuration/module/#rulegenerator)
- default

```js
const defaultGenerator = {
  filename: webpack.mode === 'development' ? '[path][name][ext]' : 'static/media/[contenthash:10][ext]',
}
```
npm package: @pieced/style-config-webpack-plugin
Description: Automatically configuration webpack5 style loader
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/style-config-webpack-plugin 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/style-config-webpack-plugin.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/style-config-webpack-plugin.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
  <img alt="Webpack" src="https://img.shields.io/badge/webpack->=5.0.0-blue">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/style-config-webpack-plugin">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/style-config-webpack-plugin" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/style-config-webpack-plugin" />
  </a>
</p>

> Automatically configuration webpack5 style loader

## Install

```sh
npm i --save-dev @pieced/style-config-webpack-plugin
```

## Webpack Config

```js
const StyleConfigWebpackPlugin = require('@pieced/style-config-webpack-plugin');
module.exports = {
  plugins: [new StyleConfigWebpackPlugin()],
};
```

## Options
**useCssModules**

- `type boolean`
- `default true`

**cssModulesQuery**

- `type string`
- `default modules`

**usePostCSS**

- `type boolean`
- `default true`

**extract**

- `type boolean or object`
- default

```js
const defaultExtract = webpack.mode === 'production' && {
  filename: 'static/css/[contenthash:10].css',
  chunkFilename: 'static/css/[contenthash:10].css',
}
```

**sourceMap**

- `type boolean`
- `default webpack.mode === 'development'`

**cssModulesName**

- `type string`
- `default webpack.mode === 'development' ? '[name]__[local]--[hash:base64:5]' : '_[hash:base64:10]'`

**generator**

- `type function`
- `default (suffix, loaders) => (webpack.mode === 'development' ? ['style-loader'].concat(loaders) : loaders)`

**minimizer**

- `type object`
- [css-minimizer-webpack-plugin options](https://webpack.js.org/plugins/css-minimizer-webpack-plugin)
- default

```js
const defaultMinimizer = {
  minimizerOptions: {
    preset: ['default', {
      discardComments: {
        removeAll: true,
      },
    }],
  },
}
```
npm package: @pieced/stylelint-config
Description: stylelint configuration
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/stylelint-config 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/stylelint-config" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/stylelint-config.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/stylelint-config" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/stylelint-config.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/stylelint-config" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/babel-plugin-auto-css-modules">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/stylelint-config" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/stylelint-config" />
  </a>
</p>

> stylelint configuration

## Install

```sh
npm i @pieced/stylelint-config -D
```

## Usage

```js
module.exports = {
  extends: ['@pieced/stylelint-config'],
  rules: {},
};
```
npm package: @pieced/webpack-config
Description: webpack configuration
Author: mingdev
Latest version: 1.1.18

<h1 align="center">@pieced/webpack-config 👋</h1>
<p align="center">
  <a href="https://www.npmjs.com/package/@pieced/webpack-config" target="_blank">
    <img alt="Version" src="https://img.shields.io/npm/v/@pieced/webpack-config.svg">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/webpack-config" target="_blank">
    <img alt="Download" src="https://img.shields.io/npm/dm/@pieced/webpack-config.svg?color=blue" />
  </a>
  <a href="https://www.npmjs.com/package/@pieced/webpack-config" target="_blank">
  <img alt="Last Commit" src="https://img.shields.io/github/last-commit/pieced-team/babel-plugin-auto-css-modules">
  </a>
  <a href="https://www.npmjs.com/package/@pieced/webpack-config" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/npm/l/@pieced/webpack-config" />
  </a>
</p>

> webpack configuration

## Install

```sh
npm i @pieced/webpack-config -D
```

## Usage

```js
const {getWebConfig} = require('@pieced/webpack-config');

module.exports = getWebConfig();
```

## Usage Dev

```js
const {getWebConfig} = require('@pieced/webpack-config');

module.exports = getWebConfig({
  devServer: {
    // xxx
  },
});
```
npm package: @piecemakr/sero-nextjs
Description: Next.js integration for Sero route transitions
Author: Troy Hancock
Latest version: 0.1.3

# Sero Next.js

Next.js integration for Sero route transitions with View Transitions API support.

## Installation

```bash
npm install @sero/nextjs @sero/core
# or
pnpm add @sero/nextjs @sero/core
# or  
yarn add @sero/nextjs @sero/core
```

## Quick Start

### 1. Wrap your app with the provider

```tsx
// app/layout.tsx
import { SeroNextProvider } from '@sero/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <SeroNextProvider
          options={{
            delayMs: 200,
            viewTransitions: true,
            respectReducedMotion: true,
          }}
        >
          {children}
        </SeroNextProvider>
      </body>
    </html>
  );
}
```

### 2. Use the transition link

```tsx
// app/page.tsx
import { SeroNextLink } from '@sero/nextjs';

export default function HomePage() {
  return (
    <div>
      <h1>Home</h1>
      <SeroNextLink href="/about">
        Go to About
      </SeroNextLink>
    </div>
  );
}
```

### 3. Add transition hooks to your pages

```tsx
// app/about/page.tsx
import { useTransition } from '@sero/nextjs';

export default function AboutPage() {
  useTransition({
    onEntering: () => {
      console.log('Entering about page');
    },
    onExiting: () => {
      console.log('Exiting about page');
    },
  });

  return <h1>About Page</h1>;
}
```

## API Reference

### Components

#### `SeroNextLink`

A Next.js Link component with transition support.

```tsx
<SeroNextLink
  href="/about"
  replace={false}
  scroll={true}
  shallow={false}
  prefetch={true}
  options={{
    delayMs: 300,
    viewTransition: true,
  }}
>
  Go to About
</SeroNextLink>
```

#### `SeroNextProvider`

Context provider for the transition system.

```tsx
<SeroNextProvider
  options={{
    delayMs: 200,
    viewTransitions: true,
    respectReducedMotion: true,
    timeoutMs: 1500,
  }}
>
  {children}
</SeroNextProvider>
```

### Hooks

#### `useTransition`

Subscribe to transition phases.

```tsx
useTransition({
  onEntering: (context) => {
    // Page is entering
  },
  onExiting: (context) => {
    // Page is exiting
  },
  onNavigating: (context) => {
    // Navigation is happening
  },
});
```

#### `useNavigate`

Programmatic navigation with transitions.

```tsx
const { navigate } = useNavigate();

// Navigate with transition
await navigate('/about', {
  replace: false,
  scroll: true,
  delayMs: 300,
});
```

#### `useTransitionState`

Get current transition state.

```tsx
const { phase, prevPath, nextPath } = useTransitionState();
```

## Features

- ✅ Next.js App Router integration
- ✅ View Transitions API support
- ✅ SSR-safe implementation
- ✅ TypeScript support
- ✅ Reduced motion respect
- ✅ Customizable delays and timeouts
- ✅ Programmatic navigation
- ✅ Prefetching support

## Browser Support

- Modern browsers with View Transitions API support
- Graceful fallback for unsupported browsers
- SSR compatible
npm package: @pieceowater-dev/lotof.lib.broadcaster
Description: Broadcasting library
Author: pieceowater-dev
Latest version: 1.0.34

# lotof.lib.broadcaster
`@pieceowater-dev/lotof.lib.broadcaster` is a broadcasting library designed to facilitate communication within applications. 📢📡

## Installation

You can install the library via npm: 📥

```sh
npm install @pieceowater-dev/lotof.lib.broadcaster
```

## Usage example

NestJS Microservice bootstrap

```typescript
// src/main.ts
import { AppModule } from './app.module';
import { Transport } from '@nestjs/microservices';
import { bootstrap } from '@pieceowater-dev/lotof.lib.broadcaster';

bootstrap(AppModule, {
  portEnvVar: 'PORT',
  microservices: [
    {
      transport: Transport.RMQ,
      urlEnvVars: ['RABBITMQ_URL'],
      queue: 'template_queue',
    },
  ],
}).then((r) => console.log('Booted successfully 🚀'));
```

Make sure to include the library in your project dependencies to start using its broadcasting capabilities. 🚀

## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Author
![PCWT Dev Logo](https://avatars.githubusercontent.com/u/168465239?s=40)
### [PCWT Dev](https://github.com/pieceowater-dev)
npm package: @piecesnbits/eos
Description: eosjs wrapper
Author: piecesnbits
Latest version: 1.0.4

# eos
eosjs wrapper that bundles eosjs eosjs-ecc

## Install the dependencies
```bash
yarn add @piecesnbits/eos
```
or

```bash
npm install @piecesnbits/eos
```

```bash
const {Eos} = require("@piecesnbits/eos");
const eos = new Eos([/*rpc nodes*/], [/*optional private keys*/] );
...
eos.api.transact({actions: actions}, {blocksBehind: 3, expireSeconds: 300, broadcast: true});
...
```
npm package: @pied-piper-inc/fib-tools
Description: Functions for working with the Fibonacci sequence
Author: Jeremy Epling
Latest version: 1.0.1632228778

# @pied-piper-inc/fib-tools

![](https://github.com/pied-piper-inc/fib-tools/workflows/CI/badge.svg)

This module provides helper functions for the Fibonacci sequence.

## Get the nth Number

```javascript
const {getNumber} = require('@bbq-beets/fib-tools')
assert.strictEqual(getNumber(8), 21)
```

## Get a List of Numbers

```javascript
const {getList} = require('@bbq-beets/fib-tools')
assert.strictDeepEqual(getList(8), [0, 1, 1, 2, 3, 5, 8, 13, 21])
```

## Get a Sequence of Numbers

```javascript
const {getSequence} = require('@bbq-beets/fib-tools')

const seq = getSequence()

for (const n of seq) {
  console.log(n) // The next Fibonacci number in the sequence
}
```
test
npm package: @pieda/core
Description: ```bash npm install @pieda/core ```
Author: piedasing
Latest version: 0.9.0

# @pieda/core

## 安裝

```bash
npm install @pieda/core
```

## 文件傳送門

[https://piedasing.github.io/-pieda-core/](https://piedasing.github.io/-pieda-core/)
npm package: @pieda/prerender
Description: ```bash npm install @pieda/prerender ```
Author: piedasing
Latest version: 0.2.2

# @pieda/prerender

```bash
npm install @pieda/prerender
```

vite.config.js

```js
import { usePrerender } from '@pieda/prerender';

export default (({mode}) => {
    const env = loadEnv(mode, process.cwd());
    const publicPath = env.VITE_PUBLIC_PATH || '/';

    return {
        env,
        base: publicPath,
        ...<其他設定>,
        plugins: [
            usePrerender({
                staticDir: path.join(__dirname, 'dist', mode),
                outputDir: path.join(__dirname, 'dist', mode, publicPath),
                indexPath: path.join(__dirname, 'dist', mode, publicPath, 'index.html'), // prettier-ignore
                port: 8080,
                routes: ['/'],
            }),
        ]
    };
})
```
npm package: @pieda/video-dl
Description: ```bash npm install @pieda/video-dl ```
Author: piedasing
Latest version: 1.11.0

# @pieda/video-dl

## 安裝

```bash
npm install @pieda/video-dl
```

## 使用

```js
import { useDownloader } from '@pieda/video-dl';

const ytdl = useDownloader({ type: 'youtube' });
await ytdl({
    videoType: 'youtube',
    videoId: '<videoId>',
    dest: '<path to download>',
    debug: false,
});
```

```js
import { useYoutube } from '@pieda/video-dl';

await useYoutube({
    videoId: '<videoId>',
    dest: '<path to download>',
    debug: false,
});
```
npm package: @piedpiper-argo/whalesay
Description: whalesay package
Author: Bertram Gilfoyle
Latest version: 1.0.1

# Getting started with argopm - Atlan's Package Manager

This package was bootstrapped using argopm

-   Package Name: whalesay

## Package Structure

```
.
├── README.md
├── index.js
├── package.json
├── configmaps
│   ├── README.md
│   ├── default-semaphore.yaml
│   └── default.yaml
├── cronworkflows
│   ├── README.md
│   └── default.yaml
├── pipelines
│   ├── README.md
│   └── default.yaml
├── secrets
│   ├── README.md
│   └── default.yaml
├── static
│   ├── README.md
│   └── data.json
└── templates
    ├── README.md
    └── default.yaml

6 directories, 16 files
```

## Available Commands

-   `argopm install`
-   `argopm list`
-   `argopm run`
-   `argopm info`

For more details on these commands run `argom --help`

## Pre-requisites

-   To run `argopm install` you must have `kubectl` access to the cluter where Argo is installed
-   Files added in the `static` subdirectory are uploaded to the configured S3 artifactory bucket, make sure you have
    the AWS credentials setup in your shell to upload static files.

## Grafana Dashboards

Argopm supports declaring and uploading grafana dashboards as a part of the package. Files available in `dashboards/grafana/` will be uploaded to
a specified Grafana instance.

Declare the following environment variables if you want to upload dashboards to grafana. You can put these in the `.env` file too for
local development.

-   `GRAFANA_URL` - URL of the grafana instance
-   `GRAFANA_API_TOKEN` - Grafana API Token

A post request is sent to `GRAFANA_URL` with the JSON file content in `dashboards/grafana` and `GRAFANA_API_TOKEN` is sent in the `Authorization` 
header as a bearer token. Refer to the [Grafana HTTP API Docs](https://grafana.com/docs/grafana/latest/http_api/) for more information.


## Helpful Documentation

-   https://argoproj.github.io/argo-workflows/
-   https://www.npmjs.com/package/argopm
npm package: @piedpiperfinance/uikit
Description: Set of UI components for pied piper projects
Latest version: 0.30.0

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @piedrucci/ngxtweets
Description: package for oiga
Author: Roberth Mejias
Latest version: 1.0.0

# Ngxtweets

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.1.3.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @piedweb/bootstrap5-extended
Description: Free Bootstrap 5 theme and UI Kit (designed to work without Javascript)
Author: Robin D.
Latest version: 0.0.16

<p align="center"><a href="https://dev.piedweb.com">
<img src="https://raw.githubusercontent.com/PiedWeb/piedweb-devoluix-theme/master/src/img/logo_title.png" width="200" height="200" alt="Open Source Package" />
</a></p>

<p>
    <a href="https://www.npmjs.com/package/@piedweb/bootstrap5-extended"><img src="https://img.shields.io/npm/dt/@piedweb/bootstrap5-extended.svg" alt="Total Downloads"></a>
    <a href="https://github.com/piedweb/bootstrap5-extended/releases"><img src="https://img.shields.io/npm/v/@piedweb/bootstrap5-extended.svg" alt="Latest Release"></a>
    <a href="https://github.com/piedweb/bootstrap5-extended/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@piedweb/bootstrap5-extended.svg" alt="License"></a>
</p>

# Bootstrap 5 Extended

**Demo** [piedvert.com (Mountain Guide Website in Vercors)](https://piedvert.com)

## Theme and UI Kit functionnal without Javascript

- Bootstrap _working without_ [javascript](src/js/app.js) (except a few enhancement like navbar transparent background before scroll)
- Add few utilities
  - `.bg-{color}` (blue, green, yellow, [etc.](https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss#L46))
  - `.icon-{color}`
  - `.text-{color}`
  - `.a` (text looks like a link), `.link-text` (link looks like text), `.ninja` (link invisible)
  - `.fullwidth`
  - `.container-txt` (default max-width 720px)
  - `.border-transparent` (useful for overriding default form)
  - `.mw-{breakpoint}` (max-width)
- Add few component
  - TinySlider Gallery
  - Inline Gallery
  - Unordered masonry (gallery)
  - Pure CSS Navbar Toggler ([bootstrap issue](https://github.com/twbs/bootstrap/issues/17540))
  - Intro-Sidebar (Right or Left)-Content

## Installation

```
npm i @piedweb/bootstrap5-extended
```

Then see [app.scss](src/scss/app.scss) to import what you need.

## Documentation

#### Usage

See [demo/index.html](demo/index.html) [app.js](src/js/app.js) and [app.css](src/scss/app.scss).

### Bootstrap 5 Navbar toggler without javascript

```
@import 'bs5-extended/component/navbar-css-toggler.scss';
```

Integration:

- Via [PiedWeb/ThemeComponent](https://github.com/PiedWeb/ThemeComponentBundle) for [PiedWeb/CMS](<[https://d](https://github.com/PiedWeb/CMS)>)

## Credits

Inspired by [bootstrap ecosystem](https://getbootstrap.com). Initially built by [Pied Web](https://piedweb.com)
npm package: @pieface/avfc-theme
Description: Aston Villa theme for the ARK Desktop Wallet
Author: PieFacE
Latest version: 0.0.3

(**THIS IS A TEMPLATE**)

# Theme name - ARK Desktop Wallet plugin
Description of your theme

## Installation

 1. Clone this repository or [download it](https://github.com/ark-ecosystem-desktop-plugins/theme-template/archive/master.zip) and unzip it into `~/.ark-desktop/plugins/`.
 2. Start the desktop wallet.
 3. Enable the plugin on the plugin section.
 4. Change theme in the Settings menu, on the sidebar.

## Credits

- [Your Name](URL)
- [All Contributors](../../contributors)

## License

[MIT](LICENSE) © [OWNER](URL)
npm package: @pieh/friendly-errors-webpack-plugin
Description: Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience
Author: Geoffroy Warin
Latest version: 1.7.0-chalk-2

This is forked version of [`friendly-errors-webpack-plugin`](https://www.npmjs.com/package/friendly-errors-webpack-plugin) with only change being bumped [`chalk`](https://www.npmjs.com/package/chalk) version from `^1.1.3` to `^2.4.2` and using [`strip-ansi`](https://www.npmjs.com/package/strip-ansi) instead of `chalk.stripColor` because it was removed in `chalk@^2`.
npm package: @pieh/gde
Description: Utils to easier profile Gatsby builds
Latest version: 0.0.0-alpha.3

# pgde

Utils to easier profile Gatsby builds

## Installation

Install globally

```
npm install -g @pieh/gde
```

Or use with `npx`

## Usage

Replace `gatsby` command with `pgde`:

`pgde build` or `pgde develop`

Without additional flags this will not produce anything. See options:

### Profile everything

`pgde build --full` / `pgde develop --full`

Will produce `.cpuprofile` for entire session in `<project_dir>/.cpuprofiles/gatsby.cpuprofile`

### Profile selected activities

`pgde build --activity="run queries"` / `pgde develop --activity="run queries"`

Will limit profiling only to time selected activities are active. You can pick multiple activies (comma separated) and you can just write subset of activity text:

```
pgde build --activity="run queries,source and"
```

### `--clean` flag

This is the same as running `gatsby clean` (just quality of life helper). Works with both `pgde build` and `pgde develop`

### Programmatic usage

You can use it in code (`pgde` adds few functions to global scope that are similar to `console.time` / `console.timeEnd` - not exactly)

```js
if (typeof pgdeStart !== `undefined`) {
  pgdeStart();
}

// code you want to profile [...]
// you can have start and end and completely different files (just it might break if you try end without starting profiling)

if (typeof pgdeEnd !== `undefined`) {
  // paramater will be used as name for .cpuprofile file
  pgdeEnd(`random`);
}
```

### Viewing profiles

You can use Chrome dev tools to load .cpuprofiles files or you can use `pgde` (no args) or `pgde view` (both commands do same thing) to run tiny webserver that will show list of profiles and after selecting one of them will present it in similar dev tools like viewer (using https://github.com/ChromeDevTools/timeline-viewer)
npm package: @pieh/ink-spinner
Description: Spinner component for Ink
Author: Vadim Demedes
Latest version: 3.0.0-peer-deps.2

# ink-spinner [![Build Status](https://travis-ci.org/vadimdemedes/ink-spinner.svg?branch=master)](https://travis-ci.org/vadimdemedes/ink-spinner)

> Spinner component for [Ink](https://github.com/vadimdemedes/ink). Uses [cli-spinners](https://github.com/sindresorhus/cli-spinners) for the collection of spinners.


## Install

```
$ npm install ink-spinner
```


## Usage

```js
import React, {Fragment} from 'react';
import {render, Color} from 'ink';
import Spinner from 'ink-spinner';

render(
	<Fragment>
		<Color green><Spinner type="dots"/></Color>
		{' Loading'}
	</Fragment>
);
```

<img src="media/demo.gif" width="482">


## Props

### type

Type: `string`<br>
Defaults: `dots`

Type of a spinner. See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available spinners.


## License

MIT © [Vadim Demedes](https://github.com/vadimdemedes)