open-index/open-npm huggingface dataset:
npm package: @owfdr/cook
Description: Kickstart your project effortlessly with cook.
Author: owfdr
Latest version: 0.1.4

<img src="https://github.com/owfdr/cook/blob/main/asset/logo.png?raw=true" alt="logo" width="96">

# Cook

Kickstart your project effortlessly.

> 🧱 Caution: Active development—expect breaking changes.

## Install

NPM

```bash
npm install --global @owfdr/cook
```

Yarn

```bash
yarn global add @owfdr/cook
```

## Usage

```bash
cook  # Will launch the interactive CLI
```

## 🧑‍💻 Other Apps

Check out:

- [Our World](https://ourworld.center/apps) (Official Website)
npm package: @owfdr/gcu
Description: Git Change User - change git user elegantly
Author: owfdr
Latest version: 0.1.0

<img src="./logo.png" alt="logo" width="128">

# GCU - Git Change User

Change git user easily and elegantly.

![demo gif](demo.gif)

## Install

Install Globally

```bash
npm install --global @owfdr/gcu
```

## Usage

Run GCU in your git repository.

```bash
gcu
```

## Features

- Easily switch between git users
- Add new git users
- Support global user and local user

## 🧑‍💻 Other Apps

Check out:

- [Our World](https://ourworld.center/apps) (Official Website)
npm package: @owfdr/generate-electron-icons
Description: Generate all required Electron icons from a PNG image
Author: owfdr
Latest version: 0.1.0

<img src="./assets/generate-electron-icons.png" alt="logo" width="128">

# Generate Electron Icons

Generate all required Electron icons from a PNG image.

✅ icon.icns (windows)<br>
✅ icon.ico (mac)<br>
✅ [16x ~ 1024x].png<br>

## Usage

Install Globally

```bash
npm install -g @owfdr/generate-electron-icons
```

Run Command

```bash
gene-icons --input <path-to-png-image>
```

## Arguments

| Argument | Description | Default |
| --- | --- | --- |
| `--input` | Which PNG file to use. Should be 1024x1024 | `icon.png` |
| `--output` | Where to put generated icons | `gene-icons/` |
| `--flatten` | Put all icons in the same folder| `false` |
npm package: @owickstrom/the-monospace-web
Description:  A minimalist design exploration
Author: Oskar Wickström
Latest version: 0.1.5

# The Monospace Web

Monospace fonts are dear to many of us. Some find them more readable, consistent, and beautiful, than their proportional alternatives. Maybe we’re just brainwashed from spending years in terminals? Or are we hopelessly nostalgic? I’m not sure. But I like them, and that’s why I started experimenting with all-monospace Web.

https://owickstrom.github.io/the-monospace-web/

## Build

```
nix develop # or `direnv allow .`
make
```

## License

[MIT](LICENSE.md)
npm package: @owja/babel-css-inline-plugin
Description: Babel plugin to inline CSS into JavaScript
Author: Hauke Broer
Latest version: 1.0.0-alpha.3

# Babel CSS Inline Plugin

[![codecov](https://codecov.io/gh/owja/babel-css-inline-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/owja/babel-css-inline-plugin)
[![Build Status](https://travis-ci.org/owja/babel-css-inline-plugin.svg?branch=master)](https://travis-ci.org/owja/babel-css-inline-plugin)
[![npm version](https://badge.fury.io/js/%40owja%2Fbabel-css-inline-plugin.svg)](https://badge.fury.io/js/%40owja%2Fbabel-css-inline-plugin)

This plugin parses css with PostCSS and inline it into JavaScript. 

## Example

##### CSS File
```css
div {
    color: #333;
    display: flex;
}
```

##### JS File
```js
import styles from "./styles.css";
```

##### JavaScript Output
```js
const styles = "div{color:#333;display:flex;display:-webkit-flex}";
```

## Why?

This plugin is created to inline CSS into WebComponents with a ShadowRoot. 

```typescript
import styles from "./my-component.css";

class MyComponent extends HTMLElement {
    protected readonly _root: ShadowRoot;

    constructor() {
        super();
        this._root = this.attachShadow({mode: "closed"});
    }

    connectedCallback() {
        const style = document.createElement("style");
        style.textContent = styles;
        this._root.appendChild(style);
    }
} 
```

Currently `autoprefixer` and `cssnano` are enabled. To configure the browsers to support simply add
a `browserlist` property to the `package.  

## Usage

Install the plugin:

```shell script
npm install --save-dev @owja/babel-css-inline-plugin
```

Add the plugin to the Babel configuration:

*babel.config.js*
```javascript
module.exports = {
    plugins: ['module:@owja/babel-css-inline-plugin'],
};
```

With TypeScript you have to add a definition file:

*src/types/css.d.ts*
```typescript
declare module "*.css" {
    const content: string;
    export default content;
}
```

Now you can import CSS files:

```typescript
import styles from "./my-styles.css";
```

which compiles to

```javascript
const styles = "<css styles>";
```

## Notice

The plugin uses PostCSS CLI which is slow. The reason is that Babel does not support
async plugins yet. This might change in the future. A other workaround could be to
implement a server/client to sync PostCSS.

This plugin is marked as alpha but it should stay backwards compatible.

It is possible that we will add some features in the future:

* CSS Modules
* Configurable file extension, to make it possible to only inline specific files

## Development

Clone this repository and run `npm install`.

#### Tests
```bash 
npm test
```

#### Build
```bash 
npm run build
```

## License

**MIT**

Copyright © 2020 Hauke Broer
npm package: @owl-js/react
Description: ## 使用 要使用此SDK，请在安装React组件之前调用 `client('init',options)`。
Author: codeteenager
Latest version: 0.0.1

# React插件

## 使用
要使用此SDK，请在安装React组件之前调用 `client('init',options)`。

```javascript
import React from 'react';
import ReactDOM from "react-dom";
// 在项目最开始的地方引入下面的代码
import browserClient from '@owl-js/web'// 配置参数
import { MonitorProvider } from '@owl-js/react'

browserClient('init', {
  aid: 0, // 应用唯一标识，必填参数
  token: 'xxx-xxx', // 应用 token,必填参数
})

// 开启上报
browserClient('start')

// ...

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  // <React.StrictMode>
  <Provider store={store}>
      <MonitorProvider MonitorClient={browserClient}>
        <ConfigProvider locale={locale}>
          <App />
        </ConfigProvider>
      </MonitorProvider>
  </Provider>
  // </React.StrictMode >
);

// Can also use with React Concurrent Mode
// ReactDOM.createRoot(rootNode).render(<App />);
```

## ErrorBoundary

`@owl-js/react导出ErrorBoundary组件，该组件将自动从内部发送Javascript错误组件树设置为Sentry，并设置回退UI。需要React版本>=16。


> app.js
```javascript
import React from 'react';
import {ErrorBoundary} from '@owl-js/react';

//当错误边界捕获错误时要呈现的 React 元素
function FallbackComponent() {
  return (
    <div>An error has occured</div>
  )
}

class App extends React.Component {
  render() {
    return (
      <ErrorBoundary fallback={FallbackComponent}>
        <OtherComponents />
      </ErrorBoundary>
    )
  }
}

export default App;
```
npm package: @owl-js/upload-sourcemaps
Description: upload sourcemaps tool for owl-js
Latest version: 1.0.1

# upload-sourcemaps

upload sourcemaps tool for owl-js

## Install

### Install with npm:

```bash
    npm install @owl-js/upload-sourcemaps
```

### Install with yarn:

```bash
    yarn add @owl-js/upload-sourcemaps
```

## Usage

upload sourcemaps in one dir

```bash
    npx upload-sourcemap --app_id xxxxxx --paths ./dir1
```

upload sourcemaps in two dirs

```bash
    npx upload-sourcemap --app_id xxxxxx --paths ./dir1 --paths ./dir2
```

## 依赖库
* [clipanion](https://mael.dev/clipanion/)
npm package: @owl-js/upload-sourcemaps-webpack-plugin
Description: upload sourcemaps webpack plugin for owl-js
Latest version: 1.0.1

# upload-sourcemaps

upload sourcemaps webpack plugin for owl-js

## Install

### Install with npm:

```bash
    npm install @owl-js/upload-sourcemaps-webpack-plugin
```

### Install with yarn:

```bash
    yarn add @owl-js/upload-sourcemaps-webpack-plugin
```

## Usage

```javascript
const UploadSourcemapsPlugin = require('@owl-js/upload-sourcemaps-webpack-plugin').default

const config = {
  plugins: [
    new UploadSourcemapsPlugin({
      app_id: 'xxxxxx',
      paths: ['./dir1', './dir2'],
      release: "1.0.1", // 你的 sourcemap 版本，和 sdk 的版本需要保持一致，可不填，默认为空
      appKey: "你的 API_KEY", // 从 sourcemap 管理 页面获取到的 Api Key，用于鉴权
      appSecret: "你的 API_TOKEN", // 从 sourcemap 管理 页面获取到的 Api token，用于鉴权
    }),
  ],
}
```
npm package: @owl-js/vue
Description: ## Vue 2
Author: codeteenager
Latest version: 0.0.1

# Vue插件

## Vue 2

```js
import Vue from 'vue'
import App from './App'
import router from './router'

// 在项目最开始的地方引入下面的代码
import browserClient from '@owl-js/web'// 配置参数
import { vuePlugin } from '@owl-js/vue'

browserClient('init', {
  aid: 0, // 应用唯一标识，必填参数
  token: 'xxx-xxx', // 应用 token,必填参数
  integrations: [vuePlugin({ Vue })]
})

// 开启上报
browserClient('start')

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
```

## vue 3

```js

// 在项目最开始的地方引入下面的代码
import browserClient from '@owl-js/web'// 配置参数
import { vuePlugin } from '@owl-js/vue'// 配置参数

const app = createApp({
  // ...
});

browserClient('init', {
  aid: 0, // 应用唯一标识，必填参数
  token: 'xxx-xxx', // 应用 token,必填参数
  integrations: [vuePlugin({ app })]
})

// 开启上报
browserClient('start')
```
npm package: @owl-js/web
Description: ## 支持插件 * PV插件 * JS错误插件 * 面包屑插件 * 静态资源性能插件 * 静态资源错误插件 * XHR监控插件 * Fetch监控插件 * 性能监控相关插件 * 白屏插件
Author: codeteenager
Latest version: 0.0.4

# Web监控SDK

## 支持插件
* PV插件
* JS错误插件
* 面包屑插件
* 静态资源性能插件
* 静态资源错误插件
* XHR监控插件
* Fetch监控插件
* 性能监控相关插件
* 白屏插件

## Web SDK接入

### 步骤一：接入SDK

接入SDK有两种方式：NPM包接入和CDN接入。

两种接入方式主要有以下区别：

* 升级：升级SDK版本时，NPM接入需要手动更新版本并重新上线，CDN接入不用手动更新，永远能拉取到最新版本的SDK。
* 监控时机：NPM包最终会被打包到业务代码里，CDN接入是直接在html中插入一段脚本，脚本会预先开始收集异常。所以相对来说，CDN接入方式监控异常的时机较早。

因此，两种接入方式中，推荐使用CDN接入。

#### NPM

##### 前提条件
已安装NPM。NPM的安装和使用，请参见[官方文档](https://docs.npmjs.com/getting-started)。

##### 操作步骤
1. 执行以下命令，安装SDK。

```ts
npm install @owl-js/web
```

2. 修改代码，接入SDK。

```ts
// 在项目最开始的地方引入下面的代码
import browserClient  from '@owl-js/web'// 配置参数

browserClient('init', {
 aid: 'xxxxx', // 应用唯一标识，必填参数
 token:'xxx-xxx' // 应用 token,必填参数
})

// 开启上报
browserClient('start')
```

#### CDN（推荐）
在html的head标签顶部添加以下代码即可。

```html
<script>
        !function(e,t,r,n,a){var o=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];e.push(Date.now(),location.href),("precollect"==e[0]?o.p.a:o.q).push(e)};o.q=[],o.p={a:[]},e[a]=o;var s=document.createElement("script");s.src=r+"?aid="+n+"&globalName="+a,s.crossOrigin="anonymous",t.getElementsByTagName("head")[0].appendChild(s),"addEventListener"in e&&(o.pcErr=function(t){var r=t||e.event,n=r.target||r.srcElement;n instanceof Element||n instanceof HTMLElement?e[a]("precollect","st",{tagName:n.tagName,url:n.getAttribute("href")||n.getAttribute("src")}):e[a]("precollect","err",r.error||r.message)},o.pcRej=function(t){var r=t||e.event;e[a]("precollect","err",r.reason||r.detail&&r.detail.reason)},e.addEventListener("error",o.pcErr,!0),e.addEventListener("unhandledrejection",o.pcRej,!0)),"PerformanceLongTaskTiming"in e&&(o.pp={entries:[]},o.pp.observer=new PerformanceObserver((function(e){o.pp.entries=o.pp.entries.concat(e.getEntries())})),o.pp.observer.observe({entryTypes:["longtask","largest-contentful-paint","layout-shift"]}))}(window,document,"https://www.unpkg.com/@owl-js/web@latest/cdn/browser.js","aid","browserClient");
</script>
<script>
  window.browserClient("init", {
      aid: aidInput.value,
      token: 'xxx-xxx',
      domain: 'http://localhost:3000'
  });
  window.browserClient("start");
</script>
```

参考下列步骤，传入相应的配置，初始化 SDK 。

```js
window.browserClient("init",{
  aid:0,
  token: 'xxx-xxx'
});
window.browserClient("start");