open-index/open-npm huggingface dataset:
npm package: @insaic/neon
Description: A Mobile UI Components built on Vue
Author: insaicFE
Latest version: 0.4.26

# A Mobile UI Components built on Vue

## Links
* [Document](https://insaic.github.io/neon)
* [Example](https://insaic.github.io/neon/examples)
---
国内站点访问
* [文档](https://insaic.gitee.io/neon)
* [示例](https://insaic.gitee.io/neon/examples)

#### 安装

NPM

```bash
npm i @insaic/neon -S
```

CDN

```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/@insaic/neon/lib/style.min.css">

<!-- 引入组件 -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/@insaic/neon/lib/index.min.js"></script>
```

#### 引入组件

#### 1.按需引入（推荐）

使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import#readme)，该插件是一款 babel 插件，它会在编译过程中将
```js
import { Button } from '@insaic/neon'
```
 的写法自动转换为按需引入的方式 
 ```js
const button = require('@insaic/neon/lib/button')
require('@insaic/neon/lib/button/style')
 ```

 ```bash
 # 安装 babel-plugin-import 插件
 npm i babel-plugin-import -D
 ```

 在`.babelrc`里添加插件配置
 ```js
 "plugins": [
  [
    "import",
    {
      "libraryName": "@insaic/neon",
      "style": true
    }
  ]
]
 ```

 安装和配置好插件后，即可使用
 ```js
 import { Style, Button } from '@insaic/neon'
 Vue.use(Style).use(Button)
 ```
 的方式引入需要的组件

> 注意： 按需引入组件 也需引入基础样式 
> ```js
> import { Style } from '@insaic/neon'
> Vue.use(Style)
> ```


#### 2.全局引入

```js
import Neon from '@insaic/neon'
Vue.use(Neon)
```

> 注意
> 全局引入已包含了基础样式

---

### 主题定制

#### 样式变量
`Neon`样式基于`Sass`开发，可通过全局和组件的样式变量对主题样式进行调整

完整的样式变量列表可以查看 [默认样式变量](https://github.com/insaic/neon/blob/dev/src/common/styles/variables.scss)

#### 变量覆盖
可以通过引入组件源码(`components`目录下)，并覆盖样式变量的方式来实现主题定制

- 首先安装如下依赖： `babel-plugin-import`  `sass-loader`  `node-sass`

- 在 `.babelrc` 添加如下配置
```js
// .babelrc
{
  "plugins": [
    ["import", {"libraryName": "@insaic/neon", "libraryDirectory": "src/components"}],
  ]
}
```

- 在 `vue.config.js` 添加如下配置 `（基于vue-cli 3.0情况下）`
```js
// vue.config.js
module.exports = {
  // ...
  // 将neon源码包里的js进行babel-loader转译
  transpileDependencies: [
    '@insaic'
  ],
  // 将neon源码包里的scss变量引入，实现自定义样式主题
  css: {
    loaderOptions: {
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
  // ...
}
```

- 最后在 `src` 下新建 `variables.scss` 添加如下配置
```scss
// src/variables.scss
// 下面两项须确保引入，不可省略
@import '~@insaic/neon/src/common/styles/variables';
@import '~@insaic/neon/src/common/styles/mixins';

// 以下为自定义内容，覆盖样式变量
// $theme-color:red;
// $button-primary-background-color: $theme-color;
```
npm package: @insaida/beacon
Description: Lightweight canary for security research — confirms package import, CWD access, and write capability in JavaScript runtimes.
Author: insaida
Latest version: 1.0.0

# @insaida/beacon

Canary package for security research.

## Purpose

This package confirms whether a JavaScript runtime can successfully import, execute, and interact with third-party packages. It is used in authorized security research.

## What it does

1. Lists the contents of the current working directory
2. Writes a timestamped proof file (`.sandbox_canary_proof.txt`) to CWD
3. Exports results for programmatic verification

## What it does NOT do

- No network requests
- No system command execution
- No file access outside the current working directory
- No persistence mechanisms
- No obfuscation

The entire source is ~40 lines of straightforward JavaScript. Read it.

## Usage

```js
import { canary } from "@insaida/beacon";
console.log(canary.executed);    // true
console.log(canary.writeSuccess); // true if CWD is writable
```

## Responsible Disclosure

This package is part of an authorized security research effort. If you have questions, contact the author.

## License

MIT
npm package: @insanecoding/html-webpack-banner-plugin
Description: Adds a banner to the top of generated html
Author: insanecoding
Latest version: 1.0.0

# Forked from [html-webpack-banner-plugin](https://github.com/Cap32/html-webpack-banner-plugin) to support HtmlWebpackPlugin v.4

# html-webpack-banner-plugin

[![Build Status](https://travis-ci.org/Cap32/html-webpack-banner-plugin.svg?branch=master)](https://travis-ci.org/Cap32/html-webpack-banner-plugin)

This is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

Adds a banner to the top of generated html.


## Installation

Install the plugin with npm:

```bash
$ npm install -d html-webpack-banner-plugin
```

Install the plugin with yarn:

```bash
$ yarn add -D html-webpack-banner-plugin
```


## Basic Usage

Load the plugin

```js
const HtmlWebpackBannerPlugin = require('html-webpack-banner-plugin');
```

and add it to your webpack config as follows:

```js
plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackBannerPlugin({
        banner: '<!-- my banner -->',
    }),
]
```

#### Options

```js
{
    banner: string, // the banner as string, it will be wrapped in a comment
    raw: boolean, // if true, banner will not be wrapped in a comment
}
```

## License

MIT
npm package: @insanecoding/inline-manifest-webpack-plugin
Description: inline your Webpack manifest.js with a script tag to save http request
Author: insanecoding
Latest version: 1.0.0

# Forked from [inline-manifest-webpack-plugin](https://github.com/szrenwei/inline-manifest-webpack-plugin) to support HtmlWebpackPlugin v.4

Inline Manifest Webpack Plugin
===================

This is a [webpack](http://webpack.github.io/) plugin that inline your manifest.js with a script tag to save http request. Cause webpack's runtime always change between every build, it's better to split the runtime code out for long-term caching.


Installation
------------
Install the plugin with npm:
```shell
$ npm i inline-manifest-webpack-plugin -D
```

Basic Usage
-----------

This plugin need to work with [webpack v4](https://github.com/webpack/webpack) (for webpack v3 and below, pls use [version 3](https://github.com/szrenwei/inline-manifest-webpack-plugin/tree/v3.0.1)) and [HtmlWebpackPlugin v3](https://www.npmjs.com/package/html-webpack-plugin) :

__Step1__: split out the runtime code
```javascript
// the default name is "runtime"
optimization: {
    runtimeChunk: 'single'
 }

// or specify another name
optimization: {
    runtimeChunk: {
        name: 'another name'
    }
 }

```
__Step2__: add plugins:
```javascript
// this plugin need to put after HtmlWebpackPlugin
[
    new HtmlWebpackPlugin(),
    new InlineManifestWebpackPlugin()
]

or

[
    new HtmlWebpackPlugin(),
    // if you changed the runtimeChunk's name, you need to sync it here
    new InlineManifestWebpackPlugin('another name')
]

```
__Done!__ This will replace the external script with inline code.

__One more thing__

if you use `inject: false` in your `HtmlWebpackPlugin`, you can access the runtime code like this:
```javascript
<%= htmlWebpackPlugin.files.runtime %>

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
```
npm package: @insaner/cors
Description: This plugin allows you to handle CORS in Insaner.
Author: Dan Kadera
Latest version: 1.5.1

# CORS plugin for the Insaner HTTP server

This plugin allows you to handle CORS in Insaner.

Installation:

```shell
npm install --save @insaner/cors
```

Usage:

```typescript
import { HttpServer } from 'insaner';
import { Cors } from '@insaner/cors';

const server = new HttpServer();
const cors = new Cors({
  route: /^/, // which URLs should be handled; defaults to all URLs
  origin: true,
  headers: true,
  methods: true,
  credentials: true, // allow credentials; defaults to false
  maxAge: 100, // how long should browsers cache preflight results
});

cors.install(server);

// shorthand:
Cors.install(server, { ...options });
```

The `origin`, `headers`, and `methods` options can be specified in a couple of
ways:
 - Not specifying an option (or setting it to `undefined`) means that the
   corresponding `Access-Control-Allow-*` response header will never be sent.
 - `true` will make the handler echo the corresponding request value back to the
   client, e.g. a request with `Origin: https://example.com` will receive a
   response with `Access-Control-Allow-Origin: https://example.com`.
 - A string or an array of strings will make the handler always respond with the
   specified value; an array will be concatenated as appropriate. The `origin`
   option behaves slightly differently: the value is always converted to an array
   and the handler will respond back with the request origin if the origin is
   found in the array.
 - A regular expression will make the handler echo the values specified in the
   corresponding request headers filtered to only contain items matching the
   regular expression. For example, with `methods: /^(get|post)$/`, a pre-flight
   request with `Access-Control-Request-Method: POST` will result in a
   `Access-Control-Allow-Methods: POST` response header.
npm package: @insaner/graphql
Description: This plugin bridges the reference `graphql-http` implementation into Insaner.
Author: Dan Kadera
Latest version: 1.5.0

# GraphQL-HTTP bridge for Insaner

This plugin bridges the reference `graphql-http` implementation into Insaner.

Installation:

```shell
npm install --save @insaner/graphql
```

Usage:

```typescript
import { HttpServer } from 'insaner';
import { GraphQLHandler } from '@insaner/graphql';

const server = new HttpServer();

server.router.post(/^\/?graphql\/?$/, new GraphQLHandler({
  schema: makeExecutableSchema({ ... }),
  context: () => new Context(),
  root: myRootObject,
}));
```
npm package: @insaner/static
Description: This plugin allows you to easily handle static files in Insaner. It supports GET and HEAD requests, and also (partially) supports the `Range: bytes=..-..` HTTP header.
Author: Dan Kadera
Latest version: 1.4.1

# Static file handler for Insaner

This plugin allows you to easily handle static files in Insaner.
It supports GET and HEAD requests, and also (partially) supports
the `Range: bytes=..-..` HTTP header.

Installation:

```shell
npm install --save @insaner/static
```

Usage:

```typescript
import { HttpServer } from 'insaner';
import { StaticHandler, StaticRoute } from '@insaner/static';
import { resolve } from 'path';

const server = new Server();

server.router.add(new StaticRoute('/images'), new StaticHandler(resolve(__dirname, '../static/images')));
```

The optional second argument to the `StaticHandler` constructor is an array of
index files to try when the request URI points to a directory.