open-index/open-npm huggingface dataset:
npm package: @jsir_z/fast-utils
Description: #### Description {**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
Latest version: 1.0.9

# fast-utils

#### Description
{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}

#### Software Architecture
Software architecture description

#### Installation

1.  xxxx
2.  xxxx
3.  xxxx

#### Instructions

1.  xxxx
2.  xxxx
3.  xxxx

#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
npm package: @jsitar/local-client
Description: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Latest version: 2.1.0

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).
npm package: @jsjn/inject-api-type
Description: 注入接口类型，使得api调用时获取智能提示, 适用于webpack。
Latest version: 1.1.2

### 该插件用于辅助api调用时无法识别类型的问题,当然这个插件只是针对金农的微前端项目

#### 安装

```bash
pnpm add @jsjn/inject-api-type

// 这个是必须的,插件内使用了ts-morph来解析ts文件
pnpm add ts-morph
```

#### 使用

在要使用的项目目录下的vue.config.js中添加如下配置

```js
const InjectApiType = require('@jsjn/inject-api-type')
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new InjectApiType()
    ]
  }
})
```

> 注意: vue.config.js同级的tsconfig.json中不能有注释内容,否则会导致项目运行时报错

![image](https://s1.imagehub.cc/images/2025/01/20/5d612b03a067af801c4e495eba01dedb.png)

#### 效果

模块名
![image](https://s1.imagehub.cc/images/2025/01/20/8652347f88e2a0d2092230061263ef3d.png)

模块下所有的接口
![image](https://s1.imagehub.cc/images/2025/01/20/58a712f2f9698e7fdd92c44132180a11.png)
npm package: @jsjn/monitor-sdk
Description: 金农前端平台监控系统
Latest version: 0.0.1

# MonitorSDK

## 介绍

该插件使用[神策数据](https://manual.sensorsdata.cn/sa/docs/tech_sdk_client_web_use/v0300)提供的sa-javascript-sdk提供底层支持

监听主要是在基座应用中来进行注册, 微应用如需注册只需要进行自定义上报

## 开始

### 基座应用初始化

#### 1.**index.html中引入打包后的sdk文件**

```**html**
<script src="<%= BASE_URL %>lib/jn-monitor/index.global.js"></script>
```

#### 2.`main.ts`**中进行注册**

```ts
import monitorSDK from '@jsjn/monitor-sdk'

// 注册
app.use(monitorSdk(window.__MONITOR_SDK_CONFIG__, window.__MONITOR_SDK_GLOBAL_PROPERTIES__) as any)
```

> &#x2139;&#xfe0f; **注意**
> **注册时机在router, store之后**

#### 3.vue.config.js排除监控sdk

`externals`中添加配置 **'jn-ve-global': 'VeGlobal'**

到此基座的monitor-sdk工作就结束了

### 子应用的使用

子应用如何使用自定义埋点则进行下面的操作,否则不需要进行任何操作

#### 1.安装sdk

``` base
pnpm add @jsjn/monitor-sdk
```

#### 2.vue.config.js排除监控sdk

`externals`中添加配置 **'jn-ve-global': 'VeGlobal'**

> &#x2139;&#xfe0f; **提示**
> 这一步一定不要省略, 虽然也可以使用, 但是会导致monitorsdk的实例不一致, 上报的数据丢失一些默认绑定的数据

## 提供的方法

`@jsjn/monitor-sdk`导出了一些函数方法, 可供开发人员进行手工追加自定义上报信息,上报类型

> &#x2139;&#xfe0f; **提示**
> 后续如果新增方法可能不在此文档更新, 以具体导出的方法为准.

示例:

``` ts
import { addBuriedPoint, addRegisterProperty, createBuriedPoint, getMonitorInstance } from '@jsjn/monitor-sdk'
// 该函数会像上报的信息中追加一个全局信息, 后面的上报消息中都会携带该数据
addRegisterProperty({
  custom_prop1: 'xxx',
  custom_prop2: 'xxx',
})

// 该函数可以自定义上报的类型及上报的信息(参数只存在这一次上报中)
addBuriedPoint('$useclick', {
  userName: 'admin',
  useId: 123456
})

// 获取monitor实例
const monitorInstance = getMonitorInstance()

// 自定义链式操作的上报
const buriedPoint = createBuriedPoint('$user')

buriedPoint.addProperties({
  processId: '12313'
}).addProperties({
  type: 'edit'
}).report()

buriedPoint.addProperties({
  type: 'save'
}).report()
```

## 4.自定义上报元素

开发者给需要上报的元素添加`data-sensors-click`属性.这时候点击该元素时则会进行一次埋点的上报
如: `<p data-sensors-click>点击我可以发送上报</p>`