open-index/open-npm huggingface dataset:
npm package: @m-usman/ng-bundle-analyzer
Description: 🔍 Angular bundle performance and size analysis CLI tool for optimizing app performance
Author: M Usman
Latest version: 1.0.0

# ng-bundle-analyzer

A powerful TypeScript CLI tool for analyzing Angular bundle performance, detecting optimization opportunities, and monitoring bundle sizes.

## 🚀 Features

- **Bundle Size Analysis**: Identify bundles exceeding size thresholds
- **Module Analysis**: Find the largest modules in your application
- **Duplicate Detection**: Locate duplicated modules across chunks
- **Performance Warnings**: Get alerts for optimization opportunities
- **Multiple Output Formats**: CLI table view and JSON export
- **Actionable Recommendations**: Receive specific optimization suggestions
- **TypeScript Support**: Fully typed with strict mode enabled

## 📦 Installation

### Global Installation
```bash
npm install -g ng-bundle-analyzer
npm package: @m.moheb/babel-preset-react-app
Description: Cequens.com custom Babel preset used by Create React App
Latest version: 9.0.2-1.1

# babel-preset-react-app

This package includes the Babel preset used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.

## Usage in Create React App Projects

The easiest way to use this configuration is with [Create React App](https://github.com/facebook/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**

## Usage Outside of Create React App

If you want to use this Babel preset in a project not built with Create React App, you can install it with the following steps.

First, [install Babel](https://babeljs.io/docs/setup/).

Then install babel-preset-react-app.

```sh
npm install babel-preset-react-app --save-dev
```

Then create a file named `.babelrc` with following contents in the root folder of your project:

```json
{
  "presets": ["react-app"]
}
```

This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled.

## Usage with Flow

Make sure you have a `.flowconfig` file at the root directory. You can also use the `flow` option on `.babelrc`:

```json
{
  "presets": [["react-app", { "flow": true, "typescript": false }]]
}
```

## Usage with TypeScript

Make sure you have a `tsconfig.json` file at the root directory. You can also use the `typescript` option on `.babelrc`:

```json
{
  "presets": [["react-app", { "flow": false, "typescript": true }]]
}
```
npm package: @m.moheb/react-scripts
Description: Cequens.com Custom Configuration and scripts for Create React App.
Latest version: 3.2.0-1.3

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @m.npm/mw-sproviders
Description: Package that contains all the providers of movie-web
Author: movie-web
Latest version: 2.3.0

# @movie-web/providers

package that holds all providers of movie-web.
Feel free to use for your own projects.

features:
- scrape popular streaming websites
- works in both browser and server-side

Visit documentation here: https://movie-web.github.io/providers/

## How to run locally or test my changes

These topics are also covered in the documentation, [read about it here](https://movie-web.github.io/providers/extra-topics/development).
npm package: @m.wang/admin-layout
Description: admin layout, easy to use pro scaffolding. 
Author: M.Wang
Latest version: 0.5.0

# admin-layout

## Project setup

```
yarn install
```

### Compiles and hot-reloads for development

```
yarn serve
```

### Compiles and minifies for production

```
yarn build
```

### Lints and fixes files

```
yarn lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @m.wang/fetch
Description: Promise based HTTP client for the quick app
Author: M.Wang
Latest version: 0.1.7

<h1 align="center">Welcome to  @m.wang/fetch 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/npm/v/fetch.svg">
  Promise based HTTP client for the quick app
</p>

## 安装
- 安装  @m.wang/fetch
```sh
npm install @m.wang/fetch
```

- 添加接口权限
```sh
"features": [
  { "name": "system.fetch"},
  {"name": "system.prompt"},
]
```

## 案例

```sh
import fetch from "@m.wang/fetch"
fetch("http://domain?paramA=example")
  .then( function(response){
    console.log("success")
  },
  function(){
    console.log("fail")
  })
```
## 配置
```sh
fetch.defaults.baseUrl="http://domain/"
fetch.defaults.responseType='text'
fetch.defaults.timeOut = 30*1000

// 其它参数请参考 :https://doc.quickapp.cn/features/system/fetch.html

```

## API

fetch.get(url, params, config)

fetch.post(url, data, config)


## 拦截器

fetch.requestUse(fulfilled, rejected)

fetch.responseUse(fulfilled, rejected)

## Author

👤 **M.Wang <wangmin2@meizu.com>**


## Show your support

Give a ⭐️ if this project helped you!
npm package: @m.wang/npm-package-template
Description: npm 模块工程
Author: M.Wang
Latest version: 0.1.0

<h1 align="center">Welcome to @m.wang/npm-package-template 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000" />
  <a href="https://github.com/m-templates/npm#readme">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" />
  </a>
  <a href="https://github.com/m-templates/npm/graphs/commit-activity">
    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" target="_blank" />
  </a>
  <a href="https://github.com/m-templates/npm/blob/master/LICENSE">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" target="_blank" />
  </a>
</p>

> npm 模块工程

### 🏠 [Homepage](https://github.com/m-templates/npm#readme)

## Install

```sh
npm install @m.wang/npm-package-template
```

## Run tests

```sh
npm run test
```

## Author

👤 **M.Wang <cn_wang@139.com>**

- Github: [@m-templates](https://github.com/m-templates)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/m-templates/npm/issues).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2019 [M.Wang <cn_wang@139.com>](https://github.com/m-templates).<br />
This project is [MIT](https://github.com/m-templates/npm/blob/master/LICENSE) licensed.

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
npm package: @m.wang/quick-app
Description: Created by mz-cli
Author: M.Wang
Latest version: 0.0.1

<h1 align="center">Welcome to @m.wang/quick-app 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000" />
  <a href="https://github.com/m-templates/quick-app#readme">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" />
  </a>
  <a href="https://github.com/m-templates/quick-app/graphs/commit-activity">
    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" target="_blank" />
  </a>
  <a href="https://github.com/m-templates/quick-app/blob/master/LICENSE">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" target="_blank" />
  </a>
</p>

> 项目模板的模板

### 🏠 [Homepage](https://github.com/m-templates/quick-app#readme)

## Install

```sh
npm install @m.wang/quick-app
```

## Run tests

```sh
npm run test
```

## Author

👤 **M.Wang <wangmin2@meizu.com>**

- Github:

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/m-templates/quick-app/issues).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2019 [M.Wang <wangmin2@meizu.com>](https://github.com/m-templates).<br />
This project is [MIT](https://github.com/m-templates/quick-app/blob/master/LICENSE) licensed.

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
npm package: @m.wang/storage
Description: 快应用 数据存储 storage, 添加promise支持。
Author: M.Wang
Latest version: 0.2.0

<h1 align="center">Welcome to @m.wang/storage 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/npm/v/@m.wang/storage.svg">

  快应用 数据存储 storage, 添加promise支持。
</p>

## 安装

```sh
npm install -S @m.wang/storage
```


- 添加接口权限
```sh
"features": [
  { "name": "system.storage"},
]
```

## API

storage.get(KEY)

storage.set(KEY, VALUE)

storage.delete(KEY)

storage.clear()

storage.length()

## Author

👤 **M.Wang <cn_wang@139.com>**


## Show your support

Give a ⭐️ if this project helped you!

***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
npm package: @m.wang/template
Description: 项目模板的模板
Author: M.Wang
Latest version: 0.5.1

<h1 align="center">Welcome to @m.wang/template 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000" />
  <a href="https://github.com/m-templates/template#readme">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" />
  </a>
  <a href="https://github.com/m-templates/template/graphs/commit-activity">
    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" target="_blank" />
  </a>
  <a href="https://github.com/m-templates/template/blob/master/LICENSE">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" target="_blank" />
  </a>
</p>

> 项目模板的模板

### 🏠 [Homepage](https://github.com/m-templates/template#readme)

## Install

```sh
npm install @m.wang/template
```

## Run tests

```sh
npm run test
```

## Author

👤 **M.Wang <cn_wang@139.com>**

* Github: [@m-templates](https://github.com/m-templates)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/m-templates/template/issues).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2019 [M.Wang <cn_wang@139.com>](https://github.com/m-templates).<br />
This project is [MIT](https://github.com/m-templates/template/blob/master/LICENSE) licensed.

***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
npm package: @m0-0a/next-intl
Description: Light weight package that brings translations for Next.js project.
Author: Mohammad Ahmad
Latest version: 1.1.4

## @m0-0a/next-intl

### > Installation:

```sh
npm i @m0-0a/next-intl
```

### > Implementation:

You have to create i18n folder in root folder of the project and an index.js file inside it.
Locales "translations" files should be exported as will as default locale property as following:

```javascript
/** i18/index.js **/

//Load locales files
const en = require('./en/common.json');
const sv = require('./sv/common.json');

const i18n = {
	locales: {
		en,
		sv,
	},
	defaultLocale: 'en',
};

module.exports = i18n;
```

**Example of locale files:**

**- i18/en.json**

```json
{
	"helloWorldKey": "Hello World!"
}
```

**- i18/sv.json**

```json
{
	"helloWorldKey": "Hej världen!"
}
```

### > Usage:

**# Hooks**

**1- useTranslation:**

This hook can be used to get translation in react components:

**Example:**

```javascript
/* pages/index.tsx*/
import { useTranslation } from '@m0-0a/next-intl';

export default () => {
	const { t } = useTranslation();
	return (
		<div>
			<h3>{t('helloWorldKey')}</h3>
			<h6>Welcome to @m0-0a/next-intl</h6>
		</div>
	);
};
```

**2- useLocale:**

This hook can be used to get current active locale and switch it to another one.

**Example:**

```javascript
import { useLocale } from '@m0-0a/next-intl';

export default () => {
	const { locale, setLocale } = useLocale();
	return (
		<div>
			<h3>{locale}</h3>
			<button onClick={() => setLocale('en')}>en</button>
			<button onClick={() => setLocale('sv')}>sv</button>
		</div>
	);
};
```

**# Components**

**1- Trans:**

This component can be used to get translation:

**Example:**

```javascript
/* pages/index.tsx*/
import { Trans } from '@m0-0a/next-intl';

export default () => {
	return (
		<div>
			<h3>
				<Trans i18nKey='helloWorldKey' />
			</h3>
			<h6>Welcome to @m0-0a/next-intl</h6>
		</div>
	);
};
```
npm package: @m0-0a/react-native-theme
Description: <h1 style="text-align:center">react-native-theme</h1>
Author: Mohammad Ahmad
Latest version: 0.9.0

<h1 style="text-align:center">react-native-theme</h1>

## Installation:

```sh
npm i @m0-0a/react-native-theme
```

## Implementation:

You have to wrap your app with Theme provider and supply themes to it.

**Example:**

```javascript
//app.tsx file
import React from 'react';
import ThemeProvider from '@m0-0a/react-native-theme';
import themes from 'path/to/themes/file';

const App = () => {
	return (
        <ThemeProvider themes={themes}>
        /*   
        .
        .
        .
        .
        . 
        */
        </ThemeProvider>
    );
};

export default App;
```
To make things easier, this package let you to define custom theme type.
Below you can find an example to themes file:

```javascript
//theme.ts file
import { ThemeType } from "@m0-0a/react-native-theme";

const commonProperties: CommonPropertiesType = {
  commonProperty1: {
    /*
    .
    .
    .
    .
    */
  },
};

const light: ThemeType = {
  colors: { primary: "#fCffff" },
  ...commonProperties,
};

const dark: ThemeType = {
  colors: { primary: "#110f1d" },
  ...commonProperties,
};

export default { light, dark };

type CommonPropertiesType = {
  commonProperty1: {};
};

declare module "@m0-0a/react-native-theme" {
  interface ThemeType extends CommonPropertiesType {
    colors: {
      primary: string;
      /*
      .
      other colors
      .
      */
    };
  }
}

```
## Usage:
 Below can you see how to use theme provider functions 'makeStyles' and 'useTheme'.

```javascript
// Component.tsx file
import React from "react";
import { Button, Text, View } from "react-native";
import { makeStyles, useTheme } from "@m0-0a/react-native-theme";

const Component = () => {
  // styles object.
  const styles = useStyles({paddingTopValue:10 /*passing some props*/});
  // theme hook
  const { changeThemeMode, theme } = useTheme();

  const handleChangeColor = () => {
    changeThemeMode(theme.themeMode === "dark" ? "light" : "dark");
  };
  return (
    <View 
        style={styles.container} // Applying style on view component.
        >
      <Text style={styles.text}>ThemeMode is {theme.themeMode}</Text>
      <Button title="change" onPress={handleChangeColor} />
    </View>
  );
};

export default Component;

const useStyles = makeStyles(({ colors: { primary }, themeMode },{ paddingTopValue/*passed props note: There are no intellisense support on passed props */}) => ({
  container: {
    paddingTop:paddingTopValue, // using passed props.
    flex: 1,
    backgroundColor: primary, // using theme variables
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: themeMode === "dark" ? "#fff" : "#000", // using theme variables
    marginBottom: 10,
  },
}));
```