open-index/open-npm huggingface dataset:
npm package: @fim3/hfc
Description: 前端组件库
Author: yangpf32597
Latest version: 1.0.3-feature.3

### 技术栈
----------


> **TS + jsx + h_ui**
> 
> 基于研发中心h_ui 组件库，进行二次开发


### 组件开发流程
----------


- 所有的组件必须写案例使用文档
- 开发新组件在src/HUI/packages目录下新建文件夹，文件夹命名规则：**首字母大小写 + 驼峰命名**

```
project
│   README.md   
│
└───src
│   │   index.js
│   │   style.ts
│   └───CreateBtn
│   │   │   index.ts
│   │   └───src
│   │      │   main.tsx
│   │      │   ...
│   │  ...
│   │
└───examples
    └───docs
    └───.vuepress
```

```
**/main.tsx

import {
  Component,
  ClComponent,
  Prop,
  Vue
} from 'src/vue-component'

interface PageProps {
  test: string
}

Component({
  name: 'Page',
  inheritAttrs: false,
  components: {}
})
export default class extends ClComponent<PageProps> {
  @Prop() test!: string
  
  render() {
    return (
      <div>
        <h-page {...{ props: this.$attrs, on: this.$listeners }}></h-page>
      </div>
    ) 
  }
}
```


### Develop
----------


```bash
yarn run start
yarn run docs:dev
```


### Usage
----------


### 引入 @fim3/hfc

#### 完整引入

在 `main.js` 中写入以下内容：

```javascript
import Vue from 'vue';
import HfcUI from '@fim3/hfc';
import '@fim3/hfc/lib/hfc-ui.css';
import App from './App.vue';

Vue.use(HfcUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

#### npm 依赖

项目中使用 `@fim3/hfc` 组件库需要安装以下依赖包：

```json
"peerDependencies": {
  "element_ui": "^1.28.0",
  "vue-property-decorator": "^9.1.2"
}
```
npm package: @fim3/hui
Description: 前端组件库
Author: yangpf32597
Latest version: 1.3.0-feature.1

### 技术栈
----------


> **TS + jsx + h_ui**
> 
> 基于研发中心h_ui 组件库，进行二次开发


### 组件开发流程
----------


- 所有的组件必须写案例使用文档
- 开发新组件在src/HUI/packages目录下新建文件夹，文件夹命名规则：**首字母大小写 + 驼峰命名**

```
project
│   README.md   
│
└───src
│   │   index.js
│   │   style.ts
│   └───CreateBtn
│   │   │   index.ts
│   │   └───src
│   │      │   main.tsx
│   │      │   ...
│   │  ...
│   │
└───examples
    └───docs
    └───.vuepress
```

```
**/main.tsx

import {
  Component,
  ClComponent,
  Prop,
  Vue
} from 'src/vue-component'

interface PageProps {
  test: string
}

Component({
  name: 'Page',
  inheritAttrs: false,
  components: {}
})
export default class extends ClComponent<PageProps> {
  @Prop() test!: string
  
  render() {
    return (
      <div>
        <h-page {...{ props: this.$attrs, on: this.$listeners }}></h-page>
      </div>
    ) 
  }
}
```


### Develop
----------


```bash
yarn run start
yarn run docs:dev
```


### Usage
----------


### 引入 @fim3/hfc

#### 完整引入

在 `main.js` 中写入以下内容：

```javascript
import Vue from 'vue';
import HfcUI from '@fim3/hfc';
import '@fim3/hfc/lib/hfc-ui.css';
import App from './App.vue';

Vue.use(HfcUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

#### npm 依赖

项目中使用 `@fim3/hfc` 组件库需要安装以下依赖包：

```json
"peerDependencies": {
  "element_ui": "^1.28.0",
  "vue-property-decorator": "^9.1.2"
}
```
npm package: @fim3/request
Description: super request for vue
Author: zhengdan
Latest version: 1.0.1

### 安装

```shell
npm install @fc/request -S
```



### 基本使用

```javascript

import Vue from 'Vue'

import {
  request,
  Cache
} from '@fc/request'

// 无参数初始化
Vue.protoType.$http = SuperRequest
// OR
// 携带参数初始化
Vue.protoType.$http = SuperRequest.create({
  baseUrl: '/g/fim3/xxx',
  debug: true,
  ...
})

```

### API

| 参数        | 类型    | 默认值 | 说明             |
| ----------- | ------- | ------ | ---------------- |
| cache       | boolean | false  | 是否开启缓存     |
| forceUpdate | boolean | false  | 是否强制更新缓存 |
| cancelTolen | Promise | /      | 取消请求         |
| dictionary  | string  | dictionary | 是否启动字典缓存 |
| camelCase  | boolean  | true | 是否启动驼峰处理 |
| encodeParams     | boolean  | false | 是否开启请求参数转义 | 
| targetEncode     | Array  | / | 是否指定特定的值进行转义 |




### 缓存

```javascript

// 主动使用缓存
$http.get('/users', { cache: true }); 
// 自定义缓存
import { Cache } from 'super-request';
const cache1 = new Cache()
$http.get('/users', { cache: cache1 });
// 强制更新缓存
$http.get('/users', { cache: cache1, forceUpdate: true });


// post字典也可以进行缓存
$http.post('/name',{
  template_id: 1,
  dictionary: 9902
},{
  cache: true
})
.then(res=> {
  console.log('res',res);
})
// 是否启用驼峰处理
$http.post('/name',{
  template_id: 1,
  dictionary: 9902
},{
  camelCase: false
})
.then(res=> {
  // 返回的数据会保留a_b的格式
  console.log('res',res);
})

// 开启转义
$http.post('/name',{
  template_id: 1,
  dictionary: 9902
},{
  encodeParams: true
})
.then(res=> {
  // script和sql注入会被转义
  console.log('res',res);
})
// 开启转义后会有sql注入和script注入自动转义
// sql注入正则
private regSql = /select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|=|;|>|</i
// 非法<script></script>标签
private regScript = /<script[^>]*>[\s\S]*?<\/[^>]*script>/gi

//e.g以下输入开启 encodeParams: true后会被自动转义
<script><script>
select * from
insert
// 关键词命中后会自动encode

// 开启特定值转义
$http.post('/name',{
  dictionary: "!@#$%^&*",
  val: {
    a: '<script>',
    b: 'query'
  }
},{
  encodeParams: true,
  targetEncode: ['dictionary', 'a']
})
.then(res=> {
  // dictionary和 a 会被转义
  console.log('res',res);
})
```
npm package: @fim3/super-drag
Description: 前端组件库
Author: yangpf32597
Latest version: 1.2.5-feature.8-rc.8

### 技术栈
----------


> **TS + jsx + h_ui**
> 
> 基于研发中心h_ui 组件库，进行二次开发


### 组件开发流程
----------


- 所有的组件必须写案例使用文档
- 开发新组件在src/packages目录下新建文件夹，文件夹命名规则：**首字母大小写 + 驼峰命名**

```
project
│   README.md   
│
└───src
│   │   index.js
│   │   style.ts
│   └───CreateBtn
│   │   │   index.ts
│   │   └───src
│   │      │   main.tsx
│   │      │   ...
│   │  ...
│   │
└───examples
    └───docs
    └───.vuepress
```

```
**/main.tsx

import {
  Component,
  ClComponent,
  Prop,
  Vue
} from 'src/vue-component'

interface PageProps {
  test: string
}

Component({
  name: 'Page',
  inheritAttrs: false,
  components: {}
})
export default class extends ClComponent<PageProps> {
  @Prop() test!: string
  
  render() {
    return (
      <div>
        <h-page {...{ props: this.$attrs, on: this.$listeners }}></h-page>
      </div>
    ) 
  }
}
```


### Develop
----------


```bash
yarn run dev
yarn run docs:dev
```


### Usage
----------


#### 完整引入

在 main.js 中写入以下内容：

```javascript
import Vue from 'vue';
import FimHUI from '@fim3/hui';
import '@fim3/hui/dist/fim-hui.css';
import App from './App.vue';

Vue.use(FimHUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

#### npm依赖

项目中使用fim-hui组件库需要安装以下依赖包：
```json
"peerDependencies": {
  "@fim3/super-request": "^1.0.10",
  "@hui/table": "^1.0.0",
  "h_ui": "^1.28.0",
  "vue-property-decorator": "^9.1.2"
}
项目中无需再import hui from "h_ui/dist/h_ui.min.js", 并可直接使用h_ui的组件
```
npm package: @fimagine/iframe_tunnel
Description: iframe tunnel
Author: Gim
Latest version: 1.0.0

# IFrame Tunnel

## Installation

To get started, clone the repository and install the dependencies:

```bash
npm install splittings-dom
```

## Build

To build the project, run the following command:

```bash
npm run build
```

This will bundle the application using Rollup.

## Usage

TODO

## Contributing

If you would like to contribute to this project, please fork the repository and submit a pull request.

## License

This project is licensed under the MIT License. See the LICENSE file for more details.
npm package: @fimagine/logger
Description: logger implemented by typescript decorater
Author: gim
Latest version: 1.3.0

# @fimagine/logger

[中文README](./README.CN.MD)

You can try this module, if your code is written in typescript with class-style, and you need make some log output when a function is called.

## Notices

- ~~Base on experimental stage 2 decorators implementation, currently not available with stage 3 decorator (since Typescript 5.0)~~
- 
- Will bring performance loss, please decide for yourself how to handle this.

## Quick Start

- step 1: enable experimentalDecorators in your project（stage 2 only）

  choose one of the ways;

  - in "tsconfig.json"

    ```json
    {
      "compilerOptions": {
        "experimentalDecorators": true, // this line
      }
    }
    ```
  - or "tsc"
    ``tsc --target ES5 --experimentalDecorators``
- step 2: use this module in your code

  ```typescript
  import { Info } from "@fimagine/logger"

  Info.showArgs = true; // show function params;
  Info.showRet = true; // show function return;

  // set current time string, or it will be unix timestamp in milliseconds.
  Info.currentTime = () => new Date().toISOString() 

  @Info
  class Hello {
    constructor(what: string) {}

    @Info
    sayIt(what: string) { return what + ' world' }

    @Info
    async resolved(what: string) { return what + ' resolved' }

    @Info
    async rejected(what: string) { throw what + ' rejected' }
  }
  const hello = new Hello('hi.')
  hello.sayIt('hello')
  hello.resolved('hello')
  hello.rejected('hello').catch(() => {})
  ```

  you would see this in your console:

  ```text
  [I][2024-01-29T04:13:19.288Z][call_id:23][Class Hello][NEW]
  params: hi.
  [I][2024-01-29T04:13:19.288Z][call_id:23][Class Hello][END]
  result: _logger_wrapped {}
  [I][2024-01-29T04:13:19.288Z][call_id:24][Hello.sayIt][ENTER]
  params: hello
  [I][2024-01-29T04:13:19.289Z][call_id:24][Hello.sayIt][LEAVE]
  result: hello world
  [I][2024-01-29T04:13:19.289Z][call_id:25][Hello.resolved][ENTER]
  params: hello
  [I][2024-01-29T04:13:19.289Z][call_id:26][Hello.rejected][ENTER]
  params: hello
  [I][2024-01-29T04:13:19.290Z][call_id:25][Hello.resolved][LEAVE]
  result: hello resolved
  [I][2024-01-29T04:13:19.290Z][call_id:26][Hello.rejected][REJECT]
  reason: hello rejected
  ```

## For More

- TODO