open-index/open-npm huggingface dataset:
npm package: @lofty87/code-convention
Description: Lofty87 Project Code Convention
Author: lofty87
Latest version: 3.0.3

# @lofty87/code-convention

<br />

TypeScript 기반 React, Next, Expo 프로젝트에서 사용할 수 있는 Code Convention ([ESLint](https://eslint.org/), [Prettier](https://prettier.io/)) 입니다. Code Convention 을 잡고 프로젝트를 진행하게 되면, 나 또는 팀원들이 모두 일관성 있는 코드를 작성하게 되어 코드 관리가 쉽고 유지 보수에 용이하다는 장점이 있습니다. 또 코드가 통일성 있고 깔끔하게 되어 코드의 품질을 올릴 수 있습니다.

아래와 같이 프로젝트를 설정할 경우, 파일 저장만으로 자동 **ESLint Formatting** 과 **Prettier Formatting** 이 가능해집니다.

<br />

## 1. Prerequisite (required)

- typescript@>=4.6.3
  - tsconfig.json
- VSCode Extensions
  - ESLint
  - Prettier - Code formatter

<br />

## 2. Dependencies

- [@lofty87/eslint-config@^4.0.3](https://github.com/lofty87/code-convention/tree/master/eslint-config)
  - @typescript-eslint/eslint-plugin@^5.50.0
  - @typescript-eslint/parser@^5.50.0
  - eslint-plugin-import@^2.27.5
  - eslint-plugin-jsx-a11y@^6.7.1
  - eslint-plugin-react@^7.32.2
  - eslint-plugin-react-hooks@^4.6.0
- [@lofty87/prettier-config@^1.0.8](https://github.com/lofty87/code-convention/tree/master/prettier-config)
- eslint-config-prettier@^9.0.0 (충돌방지)

<br />

## 3. Installation

```bash
# npm
npm install @lofty87/code-convention eslint --save-dev

# yarn
yarn add @lofty87/code-convention eslint --dev
```

<br />

## 4. Configuration

**1. ESLint Formatting**

프로젝트 폴더(root)에 `.eslintrc.json` 파일을 생성하고 아래 내용을 추가합니다.

```json
{
  "extends": [
    "@lofty87/eslint-config",
    "prettier"
  ],
  "rules": {}
}
```

VSCode Preferences 의 Settings 안에 아래 내용을 추가합니다.

```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}
```

자, 이제 파일을 저장하면 자동으로 **ESLint Formatting** 이 가능합니다.

<br />

**2. Prettier Formatting**

프로젝트 폴더(root)에 `.prettierrc.json` 파일을 생성하고 아래 내용을 추가합니다.

```json
"@lofty87/prettier-config"
```

VSCode Preferences 의 Settings 안에 아래 내용을 추가합니다.

```json
{
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

자, 이제 파일을 저장하면 자동으로 **Prettier Formatting** 이 가능합니다.
npm package: @lofty87/eslint-config
Description: Lofty87 Project Code Convention (ESLint)
Author: lofty87
Latest version: 4.0.3

# @lofty87/eslint-config

<br />

TypeScript 기반 React, Next, Expo 프로젝트에서 사용할 수 있는 Code Convention ([ESLint](https://eslint.org/)) 입니다. Code Convention 을 잡고 프로젝트를 진행하게 되면, 나 또는 팀원들이 모두 일관성 있는 코드를 작성하게 되어 코드 관리가 쉽고 유지 보수에 용이하다는 장점이 있습니다. 또 코드가 통일성 있고 깔끔하게 되어 코드의 품질을 올릴 수 있습니다.

아래와 같이 프로젝트를 설정할 경우, 파일 저장만으로 자동 **ESLint Formatting** 이 가능해집니다.

<br />

## 1. Prerequisite (required)

- typescript@>=4.6.3
  - tsconfig.json
- VSCode Extensions
  - ESLint

<br />

## 2. Dependencies

- @typescript-eslint/eslint-plugin@^5.50.0
- @typescript-eslint/parser@^5.50.0
- eslint-plugin-import@^2.27.5
- eslint-plugin-jsx-a11y@^6.7.1
- eslint-plugin-react@^7.32.2
- eslint-plugin-react-hooks@^4.6.0

<br />

## 3. Installation

```bash
# npm
npm install @lofty87/eslint-config eslint --save-dev

# yarn
yarn add @lofty87/eslint-config eslint --dev
```

<br />

## 4. Configuration

프로젝트 폴더(root)에 `.eslintrc.json` 파일을 생성하고 아래 내용을 추가합니다.

```json
{
  "extends": "@lofty87/eslint-config",
  "rules": {}
}
```

VSCode Preferences 의 Settings 안에 아래 내용을 추가합니다.

```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}
```

자, 이제 파일을 저장하면 자동으로 **ESLint Formatting** 이 가능합니다.
npm package: @lofty87/prettier-config
Description: Lofty87 Project Code Convention (Prettier)
Author: lofty87
Latest version: 1.0.8

# @lofty87/prettier-config

<br />

TypeScript 기반 React, Next, Expo 프로젝트에서 사용할 수 있는 Code Convention ([Prettier](https://prettier.io/)) 입니다. Code Convention 을 잡고 프로젝트를 진행하게 되면, 나 또는 팀원들이 모두 일관성 있는 코드를 작성하게 되어 코드 관리가 쉽고 유지 보수에 용이하다는 장점이 있습니다. 또 코드가 통일성 있고 깔끔하게 되어 코드의 품질을 올릴 수 있습니다.

아래와 같이 프로젝트를 설정할 경우, 파일 저장만으로 자동 **Prettier Formatting** 이 가능해집니다.

<br />

## 1. Prerequisite (required)

- VSCode Extensions
  - Prettier - Code formatter

<br />

## 2. Installation

```bash
# npm
npm install @lofty87/prettier-config --save-dev

# yarn
yarn add @lofty87/prettier-config --dev
```

<br />

## 3. Configuration

프로젝트 폴더(root)에 `.prettierrc.json` 파일을 생성하고 아래 내용을 추가합니다.

```json
"@lofty87/prettier-config"
```

VSCode Preferences 의 Settings 안에 아래 내용을 추가합니다.

```json
{
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

자, 이제 파일을 저장하면 자동으로 **Prettier Formatting** 이 가능합니다.
npm package: @loftyai/msgraph-cli
Description: Microsoft Graph API CLI — mail, Teams, calendar, OneDrive, SharePoint, users, Planner, To Do
Author: Simon Yan
Latest version: 0.1.1

# msgraph-cli

CLI for the msgraph API. Made with [api2cli.dev](https://api2cli.dev).

## Install

```bash
npx api2cli install <user>/msgraph-cli
```

This clones the repo, builds the CLI, links it to your PATH, and installs the AgentSkill to your coding agents.

## Install AgentSkill only

```bash
npx skills add <user>/msgraph-cli
```

## Usage

```bash
msgraph-cli auth set "your-token"
msgraph-cli auth test
msgraph-cli --help
```

## Resources

Run `msgraph-cli --help` to see available resources.

## Global Flags

All commands support: `--json`, `--format <text|json|csv|yaml>`, `--verbose`, `--no-color`, `--no-header`
npm package: @loftysoul/soul-editor-kit
Description: A toolkit for building WYSIWYG editors based on Mobiledoc(https://github.com/bustle/mobiledoc-kit)
Author: Secondary Author: Shawn Shang
Latest version: 0.11.11

# Soul Editor Kit
**基于 [MobileDoc-kit](https://github.com/bustle/mobiledoc-kit)**
**Based on [MobileDoc-kit](https://github.com/bustle/mobiledoc-kit)** 

[![Travis CI Build Status](https://travis-ci.org/bustle/mobiledoc-kit.svg?branch=master)](https://travis-ci.org/bustle/mobiledoc-kit)

[![Sauce Test Status](https://saucelabs.com/browser-matrix/mobiledoc-kit.svg)](https://saucelabs.com/u/mobiledoc-kit)

### 中文:
Soul Editor Kit 是基于Mobiledoc Kit进行二次开发的一个Markdown富文本编辑器。
因为著名的Node开源CMS-[Ghost](http://docs.ghost.org)使用了Mobiledoc kit进行文字编辑，但是在使用过程中发现无法很好的支持中文，因此阅读MobileDocs源码，并进行了相关修改和优化。
后续SoulEditorKit将基于MobileKit继续进行一些中文本地化事项，以及功能新增以及优化(新增功能将推送PullRequest给MobileDoc)

SoulEditorKit的使用方式与MobileDoc在当前基本相同，具体使用方式请参看下文:
https://github.com/bustle/mobiledoc-kit/blob/master/README.md

### English:
Soul Editor Kit is a richtext editor based on Mobiledoc kit.
Because the [ghost](http://docs.ghost.org) which is a famous content management system on nodejs is using the mobiledoc as content editor. But When I use the ghost, I found the editor can't support chinese very well, which exists some bugs that made me feel bad. So I read the source belong to MobileDoc, and do some optimization for chinese input
And then, SoulEditorKit will go on doing some localization, and some new functions development. I will send some pull request to MobileDoc for new functions.

The useage of SoulEditorKit is same to MobileDoc, so if you want use it, you can visit follow path:
https://github.com/bustle/mobiledoc-kit/blob/master/README.md
npm package: @log-er/han-span-calculator
Description: 맑은 고딕 폰트 기준 텍스트 너비 계산 라이브러리
Latest version: 1.0.1

# @han-span/calculator

맑은 고딕 폰트 기준 텍스트 너비 계산 라이브러리입니다.

이 패키지는 `@han-span/widths`에 저장된 폰트 너비 테이블을 사용하여 텍스트의 실제 렌더링 너비를 계산합니다.

## 설치

```bash
npm install @han-span/calculator
```

## 사용법

```javascript
const HanSpanCalculator = require('@han-span/calculator');

// 12px 크기의 계산기 생성
const calculator = new HanSpanCalculator(12);

// 텍스트 너비 계산
const width = calculator.calculateTextWidth('한글 텍스트');
console.log(width); // 픽셀 너비 (예: 84.5)

// 다른 폰트 크기로 계산
const calculator14 = new HanSpanCalculator(14);
const width14 = calculator14.calculateTextWidth('한글 텍스트');
console.log(width14); // 14px 기준 너비
```

## API

### `new HanSpanCalculator(fontSize)`

계산기 인스턴스를 생성합니다.

- `fontSize` (number): 폰트 크기 (px). 예: 12, 14
- throws: 해당 폰트 크기의 너비 테이블이 없을 경우 에러 발생

### `calculateTextWidth(text)`

텍스트의 총 너비를 계산합니다.

- `text` (string): 너비를 계산할 텍스트
- returns: 텍스트의 총 너비 (px, number)

**Fallback 처리**: 폰트 테이블에 없는 문자가 발견될 경우, 공백 문자(' ')의 너비를 사용하여 합리적인 대체 처리를 합니다.

### `getFontSize()`

현재 설정된 폰트 크기를 반환합니다.

- returns: 폰트 크기 (px, number)

## 예제

```javascript
const calculator = new HanSpanCalculator(12);

// 한글 텍스트
calculator.calculateTextWidth('가나다라'); // 예: 72.3

// 영문 텍스트
calculator.calculateTextWidth('Hello'); // 예: 45.2

// 혼합 텍스트
calculator.calculateTextWidth('Hello 한글'); // 예: 89.5

// 특수문자 포함
calculator.calculateTextWidth('가나다!@#'); // 예: 78.4
```
npm package: @log-er/han-span-widths
Description: 맑은 고딕 폰트 너비 테이블 데이터 저장소
Latest version: 1.0.1

# @han-span/widths

맑은 고딕 폰트 너비 테이블 데이터 저장소입니다.

이 패키지는 `@han-span/builder`가 측정한 폰트 너비 데이터를 JSON 파일 형태로 저장합니다.

## 파일 구조

- `malgun-gothic-12px.json`: 12px 크기의 문자별 너비 데이터
- `malgun-gothic-14px.json`: 14px 크기의 문자별 너비 데이터
- `index.js`: 데이터 로드 유틸리티 함수

## 사용법

```javascript
const { loadWidthTable } = require('@han-span/widths');

// 12px 크기의 폰트 너비 테이블 로드
const widthTable = loadWidthTable(12);
console.log(widthTable['가']); // '가' 문자의 너비 (px)
```
npm package: @log-reporting/core
Description: 前端日志上报SDK
Author: 王小泽
Latest version: 1.0.8

<div align="center">
<img width="200" src="https://qiniu.wangxiaoze.wang/hexo-blog/wechat_au.jpeg" alt="wxz"/>

<p style="text-align: center;">

  <a href="https://www.npmjs.com/package/dayjs">
    <img src="https://img.shields.io/badge/dayjs-1.11.10-brightgreen.svg" alt="vue">
  </a>
 <a href="https://www.npmjs.com/package/tslib/">
    <img src="https://img.shields.io/badge/tslib-2.6.2-brightgreen.svg" alt="vue">
  </a>
</p>
<h1>@log-reporting/core （日志上报）</h1>
</div>


**文档还在完善中....**


## 🔈 注意事项

> 本系统的开发目的很简单，就是为了在部分情况下搜集前端的异常日志，用于分析异常情况; 
> 如：线上环境的项目我们会吧一些日志删除，如果前端报错那么日志是首选， 这样的情况我们不知道是哪里的报错导致页面崩溃的；
> 那么开发这款工具常规情况下能解决大部分的问题；

该版本为全新版本, 与之前的版本会有很大的区别;


## 🔈 日志搜集范围

1. 资源：资源地址不正确或不存在导致的资源异常
2. 代码：搜集报错信息，页面的崩溃等等；
3. 请求：截请求参数错误，访问地址不存在，异常拦
4. 额外添加功能：支持录制自定义时间的视频，但是最大时间不能超过1分钟;
5. 支持性能监控, 白屏时间, 页面加载时间等等;
6. 支持`pv`页面浏览, 需要手动提交;
7. 支持`曝光`, 需要手动设置对应的元素(仅支持在可是区域内);


## 🔈 如何使用
需要克隆下载该项目, 执行命令`pnpm run build`， 之后会在根目录`dist`文件下看到打包的对应的文件信息; 根据不同平台引入即可;

下面代码示例为浏览器的使用：
``` js
<script src="dist/index.umd.js"></script>

<script>
    logReportingCore.init({
        // 上报地址
      dsn: 'http://localhost:8888/postLog',
      // 是否开启调试
      isDebug: true,
      // 是否捕获错误
      isError: true,
      // 是否捕获console.error
      isConsoleError: true,
      // 是否捕获性能
      isPerformance: true,
      // 是否捕获资源
      isResource: true,
      // 是否捕获请求
      isXhr: true,
      // 屏幕录制
      record: {
        open: true,
        time: 10 * 1000
      },
      // 加密方式
      encryptMethod: 'base64',
      // 上报方式
      method: 'beacon',
      // pv统计
      isPv: true,
      // 曝光统计
      isExposure: true
    })
</script>
```

在`vue`中使用,
`npm install @log-reporting/core` 安装依赖

在`main.js`中引入
```js
import {init} from '@log-reporting/core'
init({})
```


根据自己的业务需要开启对应的配置信息;
npm package: @log-reporting/logger
Description: 前端日志上报SDK
Author: 王小泽
Latest version: 1.0.2

<div align="center">
<img width="200" src="https://qiniu.wangxiaoze.wang/hexo-blog/wechat_au.jpeg" alt="wxz"/>

<p style="text-align: center;">

  <a href="https://www.npmjs.com/package/dayjs">
    <img src="https://img.shields.io/badge/dayjs-1.11.10-brightgreen.svg" alt="vue">
  </a>
 <a href="https://www.npmjs.com/package/tslib/">
    <img src="https://img.shields.io/badge/tslib-2.6.2-brightgreen.svg" alt="vue">
  </a>
</p>
<h1>@log-reporting/logger （日志）</h1>
</div>

## 🔈 注意事项

> 依赖于`@log-reporting/core`而产生发布的; 自定义的`log`信息
npm package: @log-reporting/types
Description: 前端日志上报SDK
Author: 王小泽
Latest version: 1.0.3

<div align="center">
<img width="200" src="https://qiniu.wangxiaoze.wang/hexo-blog/wechat_au.jpeg" alt="wxz"/>

<p style="text-align: center;">

  <a href="https://www.npmjs.com/package/dayjs">
    <img src="https://img.shields.io/badge/dayjs-1.11.10-brightgreen.svg" alt="vue">
  </a>
 <a href="https://www.npmjs.com/package/tslib/">
    <img src="https://img.shields.io/badge/tslib-2.6.2-brightgreen.svg" alt="vue">
  </a>
</p>
<h1>@log-reporting/types </h1>
</div>





## 🔈 注意事项

> 依赖于`@log-reporting/core`而产生发布的
npm package: @log-rush/client
Description: A log-rush client for javascript
Author: Fabian Kachlock
Latest version: 1.1.1

# @log-rush/client

A log-rush client for javascript (browser + nodejs).

## Installation

`yarn add @log-rush/client`
or
`npm i  @log-rush/client`

## Usage

### Using the LogRushClient

```ts
// 1. create a client
const client = new LogRushClient({
  dataSourceUrl: 'http://<my-domain>/', //! Note: a trailing slash is needed
  batchSize: MAX_BUFFER_SIZE
});

// 2. create a stream
const stream = await client.createStream('zwoo-frontend');
// or const stream = await client.resumeStream('zwoo-frontend', 'id', 'key'); for resuming streams

// 3. log!
stream.log('my awesome log')

// 4. clean up
await client.disconnect(true) // passing true as argument will force send all remaining logs
```

### Using the LogRushStream direct

```ts
// 1. instantiate the stream
const stream = createLogStream(
  {
    dataSourceUrl: 'http://<my-domain>/', //! Note: a trailing slash is needed
    batchSize: MAX_BUFFER_SIZE
  },
  'my-log-stream',
  'my-id', // optional
  'my-key', // optional
)
// or const stream = new LogRushStream({...}, 'name', 'id', 'key')

// 2. register the log stream on the data source
await stream.register()

// 3. log!
stream.log('my awesome log')

// 4. clean up
await stream.destroy(true) // passing true as argument will force send all remaining logs
```
npm package: @log4b0at/pegjs
Description: Parser generator for JavaScript
Latest version: 0.11.0

![GitHub Actions](https://github.com/pegjs/pegjs/workflows/Github%20Actions/badge.svg)
[![Codecov](https://codecov.io/gh/pegjs/pegjs/branch/master/graph/badge.svg)](https://codecov.io/gh/pegjs/pegjs)
[![CodeFactor](https://www.codefactor.io/repository/github/pegjs/pegjs/badge)](https://www.codefactor.io/repository/github/pegjs/pegjs)
[![license](https://img.shields.io/badge/license-mit-blue.svg)](https://opensource.org/licenses/MIT)

PEG.js is a simple parser generator for JavaScript that produces fast parsers with excellent error reporting. You can use it to process complex data or computer languages and build transformers, interpreters, compilers and other tools easily.

> PEG.js is still very much work in progress. There are no compatibility guarantees until version 1.0

## features

  * Simple and expressive grammar syntax
  * Integrates both lexical and syntactical analysis
  * Parsers have excellent error reporting out of the box
  * Based on [parsing expression grammar](http://en.wikipedia.org/wiki/Parsing_expression_grammar) formalism - more powerful than traditional LL(*k*) and LR(*k*) parsers
  * Usable [from your browser](https://pegjs.org/online), from the command line, or via JavaScript API

## documentation

- [Getting Started](https://github.com/pegjs/pegjs/blob/master/docs/guides/getting-started.md)
- [Installation](https://github.com/pegjs/pegjs/blob/master/docs/guides/installation.md)
- [Generating a Parser](https://github.com/pegjs/pegjs/blob/master/docs/guides/generating-a-parser.md)
- [Using the Parser](https://github.com/pegjs/pegjs/blob/master/docs/guides/using-the-parser.md)
- [Grammar Syntax and Semantics](https://github.com/pegjs/pegjs/tree/master/docs/grammar)
- [JavaScript API](https://github.com/pegjs/pegjs/blob/master/docs/guides/javascript-api.md)
- [Plugins](https://github.com/pegjs/pegjs/blob/master/docs/guides/plugins.md)
- [Compatibility](https://github.com/pegjs/pegjs/blob/master/docs/compatibility.md)
- [Development](https://github.com/pegjs/pegjs/blob/master/docs/development.md)

## license

Released under the [MIT License](https://opensource.org/licenses/MIT).

Copyright (c) 2010-2016 [David Majda](https://majda.cz/)<br>
Copyright (c) 2017+ [Futago-za Ryuu](https://github.com/futagoza)