open-index/open-npm huggingface dataset:
npm package: @medlinker/tracker
Description: 医联埋点工具
Author: qizhang.yang
Latest version: 0.2.0

# `@medlinker/tracker`

多端埋点工具 [文档](https://wiki.medlinker.com/pages/viewpage.action?pageId=17610632)

## 安装

**NPM 安装（推荐）**

```bash
npm i @medlinker/tracker
```

```javascript
import MedTracker from '@medlinker/tracker/browser';

MedTracker.init(...);
```

**全局安装**

下载文件，并通过 script 标签引用。

```html
<script src="/js/med-tracker/browser.js"></script>
```

```typescript
/// <reference types="@medlinker/tracker/browser" />

MedTracker.init(...);
```

## 使用

### 初始化

模块需要通过调用 `init` 方法完成初始化。只有在初始化后，才能正常上报埋点信息，初始化前的埋点会被忽略。

```javascript
MedTracker.init(config);
```

#### config.hash

类型：`boolean`，默认为 false。

当前项目使用使用了 hash 路由

#### config.enable

类型：`boolean`，默认为 true。

是否启用，开发模式下一般设置成 false。

#### config.env

类型：`dev | qa | prod`，默认为 `dev`

项目当前运行的环境，决定了上传的接口。

### 埋点方式

#### 手动上报

通过调用方法来进行上报。

方法：`MedTracker.collect(data:UserDataEntity)`

```typescript
interface UserDataEntity {
  /**
   * log_type
   */
  lt?: number;
  /**
   * event_id
   */
  ei?: number;
  /**
   * event_param
   */
  ep?: string;
  /**
   * business
   */
  b?: string;
}
```

```jsx
function Login() {
  return (
    <button
      onClick={() => {
        MedTracker.report({
          b: 'someActivity',
          ei: '0',
        });
        // 业务代码逻辑
      }}
    >
      提交
    </button>
  );
}
```

#### 隐式上报

点击事件埋点更建议使用隐式上报。这种方式对业务代码的侵入性会小一些。

```javascript
function Login() {
  return (
    <button
      data-medtrack="b:patient;ei:0;s:web"
      onClick={() => {
          // 业务代码逻辑
        };
      }
    >
      提交
    </button>
  );
}
```

这样每次点击 button 都会将`data-medtrack`携带的信息进行上报。

## API

### `MedTracker.init(config)`

初始化配置

### `MedTracker.ready()`

调用此方法前的埋点会加入队列直到已经准备完成。一般在获取用户 id 后再调用此方法。

### `MedTracker.setUserId(id:string)`

设置当前登录的用户 id

### `MedTracker.collect(data: UserDataEntity)`

埋点方法

```typescript
export interface UserDataEntity {
  /**
   * log_type，默认为1
   */
  lt?: number;
  /**
   * event_id 默认为 -1
   */
  ei?: number;
  /**
   * event_param 默认为 ''
   */
  ep?: string;
  /**
   * business 默认为 ''
   */
  b?: string;
}
```

### `MedTracker.reset()`

重置 tracker。

## SPA 应用

1. 在路由变化时调用一次 `MedTracker.collect()`
2. 用户退出登录后，如果没有刷新页面，可以调用`MedTracker.reset()` 重置模块。
npm package: @medly-components/icons
Description: This library contains icons like clear, delete add, delete, clearfile, clipboard etc exposed as react components. Check docs [here](https://medly.github.io/medly-components).
Latest version: 1.15.4

# React Icon Components

This library contains icons like clear, delete add, delete, clearfile, clipboard etc exposed as react components. Check docs [here](https://medly.github.io/medly-components).
npm package: @medly-components/layout
Description: This library contains components that help in creating a page layout using side panels and nav items, which are exposed as React components. Check docs [here](https://medly.github.io/medly-components).
Latest version: 3.2.133

# React Layout Components

This library contains components that help in creating a page layout using side panels and nav items, which are exposed as React components. Check docs [here](https://medly.github.io/medly-components).
npm package: @medly-components/utils
Description: This library consists of the most commonly used functionalities and components for the rest of the library. Eg String Helper has functions to convert a string to camelCase, case insensitive string comparison etc. Check docs [here](https://medly.github.io/
Latest version: 3.4.1

# Utils

This library consists of the most commonly used functionalities and components for the rest of the library. Eg String Helper has functions to convert a string to camelCase, case insensitive string comparison etc. Check docs [here](https://medly.github.io/medly-components).
npm package: @medly/babel-config
Description: Basic babel config for simple ts library
Author: Mukul Bansal
Latest version: 0.1.4

# Babel Config <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/babel/logo/master/babel.png">

## What is Babel ?

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

> Shared [Babel config](https://babeljs.io/docs/en/configuration)

## Install

```shell
yarn add -D @medly/babel-config
```

## Usage

Add below code in your `package.json`

```json
{
 "babel": {
  "extends": "@medly/babel-config"
 }
}
```
npm package: @medly/babel-config-react
Description: Basic babel config for simple react app
Author: Mukul Bansal
Latest version: 0.7.0

# Babel Config for React Apps <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/babel/logo/master/babel.png"> <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png">

Recommended Babel configurations for react based web applications.

> Shared [Babel config](https://babeljs.io/docs/en/configuration)

## Install

```shell
yarn add -D @medly/babel-config-react
```

## Usage

Add below code in your `package.json`

```json
{
 "babel": {
  "extends": "@medly/babel-config-react"
 }
}
```

## Default config

To view the default config click [here](index.js)
npm package: @medly/eslint-config
Description: Basic eslint config
Latest version: 0.5.1

# Eslint Config <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/eslint/eslint.png">

## What is ESLint?

It is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

> Shared [eslint config](https://eslint.org/docs/user-guide/getting-started)

## Install

```shell
yarn add -D @medly/eslint-config
```

## Usage

Add below line in your `package.json`

```json
{
 "eslintConfig": {
  "extends": "@medly"
 }
}
```

## Default options

You can view the default config [here](index.json)
npm package: @medly/eslint-config-react
Description: Basic eslint config for react app
Latest version: 1.1.0

# ESLint Config for React Apps <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/eslint/eslint.png"> <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png">

Recommended ESLint configurations to provide more linting power to your react based web applications.

> Shared [ESLint config](https://eslint.org/docs/user-guide/getting-started)

## Install

```shell
yarn add -D @medly/eslint-config-react
```

## Usage

Add below line in your `package.json`

```json
{
 "eslintConfig": {
  "parser": "@typescript-eslint/parser",
  "extends": "@medly/react"
 }
}
```

## Default options

To view the default config click [here](index.json)
npm package: @medly/jest-config-react
Description: Basic jest config for react apps
Author: Mukul Bansal
Latest version: 1.0.2

# Jest Config for React Apps <img style="vertical-align: middle" height="25" src="https://cdn.freebiesupply.com/logos/large/2x/jest-logo-png-transparent.png"> <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png">

## What is Jest?

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more.

## About

Recommended Jest rules to provide more configuration power to your react based web applications.

> Shared [Jest config](https://jestjs.io/docs/configuration)

## Install

```shell
yarn add -D @medly/jest-config-react
```

## Usage

### 1. Use default config

Add below code in your `package.json`

```json
{
 "script": {
  "dist": "jest --config=node_modules/@medly/jest-config-react/jest.config.js"
 }
}
```

### 2. Overwrite default settings

Add below code in your `jest.config.js`

```js
const baseConfig = require('@medly/jest-config-react');

module.exports = {
 ...baseConfig,
 rootDir: './'
};
```

## Default config

To view the default config click [here](index.js)
npm package: @medly/prettier-config
Description: Basic prettier config
Author: Mukul Bansal
Latest version: 0.1.1

# Medly prettier config

> Shared [prettier config](https://prettier.io/docs/en/configuration.html)

## Install

```shell
yarn add -D @medly/prettier-config
```

## Usage

Add below line in your `package.json`

```json
{
 "prettier": "@medly/prettier-config"
}
```
npm package: @medly/rollup-config
Description: Basic rollup config
Author: Mukul Bansal
Latest version: 0.8.2

# Rollup Config <img style="vertical-align: middle" height="30" src="https://rollupjs.org/logo.svg" />

## What is rollup.js?

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

## About

Recommended Rollup configurations to give next-generation bundling powers to your react web applications.

> Shared [Rollup config](https://rollupjs.org/guide/en/#configuration-files)

## Install

```shell
yarn add -D @medly/rollup-config
```

## Usage

### 1. Use default settings

Add below code in your `package.json`

```json
{
 "script": {
  "dist": "rollup --config node_modules/@medly/rollup-config/index.js"
 }
}
```

### 2. Overwrite default settings

Add `rollup.config.js` file at root level with below code

```js
const { configure } = require('@medly/rollup-config');

module.exports = configure({
 input = ["./src/index.ts"]
});
```

Add below code in your `package.json`

```json
{
 "script": {
  "dist": "rollup --config rollup.config.js"
 }
}
```

> **Note**: Add `tsconfig.json` file at the root level to emit type declaration files.


## Default config

To view the default config click [here](index.js)
npm package: @medly/semantic-release-config
Description: Basic semantic release config
Author: Mukul Bansal
Latest version: 0.1.5

# Semantic Release Config <img style="vertical-align: middle" height="30" src="https://gblobscdn.gitbook.com/spaces%2F-LGsE7zdvzHI5cG-XV6p%2Favatar.png?alt=media">

## What is semantic-release?

**semantic-release** is a fully automated version management and package publishing library that automates the whole package release workflow including: determining the next version number, generating the release notes and publishing the package.

## About

**semantic-release** configuration recommended by Medly to automate your react application's release workflow.

> Shared [semantic release config](https://semantic-release.gitbook.io/semantic-release/usage/configuration)

## Install

```shell
yarn add -D @medly/semantic-release-config
```

## Usage

Add below line in your `package.json`

```json
{
 "release": {
  "extends": "@medly/semantic-release-config"
 }
}
```
npm package: @medly/stylelint-config
Description: Basic stylelint config
Author: Mukul Bansal
Latest version: 0.3.1

# Stylelint Config <img style="vertical-align: middle" height="30" src="https://cdn.freebiesupply.com/logos/large/2x/stylelint-logo-png-transparent.png">

## What is Stylelint?

 Stylelint is a mighty, modern linter that helps you avoid errors and enforce conventions in your stylesheets.

## About

Recommended Stylelint rules to provide more linting (style) powers to your react based web applications.

> Shared [Stylelint config](https://stylelint.io/user-guide/configure/)

## Install

```shell
yarn add -D @medly/stylelint-config
```

## Usage

Add below line in your `package.json`

```json
{
 "stylelint": { "extends": "@medly/stylelint-config" }
}
```

## Default config

To view the default config click [here](index.json)
npm package: @medly/typescript-config
Description: Basic typescript config
Author: Mukul Bansal
Latest version: 1.1.1

# Typescript Config <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png">

# What is tsconfig.json ?

The tsconfig.json file specifies the root files and the compiler options required to compile the project.

## About

Medly recommended rules to better compile your TypeScript project.

> Shared [typeScript config](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

> [Schema](http://json.schemastore.org/tsconfig)

## Install

```shell
yarn add -D @medly/typescript-config
```

## Usage

Add below code in `tsconfig.json` file.

```json
{
 "extends": "@medly/typescript-config",
 "include": ["src", "types"],
 "exclude": ["node_modules", "dist", "coverage"]
}
```
npm package: @medly/typescript-config-react
Description: Basic typescript config for react app
Author: Mukul Bansal
Latest version: 1.4.0

# Typescript Config for React Apps <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png"> <img style="vertical-align: middle" height="30" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png">

Medly recommended rules to better compile your TypeScript based react project.

> Shared [typeScript config](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

## Install

```shell
yarn add -D @medly/typescript-config-react
```

## Usage

Add below code in `tsconfig.json` file.

```json
{
 "extends": "@medly/typescript-config-react",
 "include": ["src", "types"],
 "exclude": ["node_modules", "dist", "coverage"]
}
```
npm package: @medly/webpack-config
Description: Basic webpack config
Author: Mukul Bansal
Latest version: 0.6.0

# Webpack Config <img style="vertical-align: middle" height="35" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/webpack/webpack.png">

## What is webpack?

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

## About

Recommended webpack configuration to bundle the assets in your projects.

> Shared [webpack config](https://webpack.js.org/configuration/)

## Install

```shell
yarn add -D @medly/webpack-config
```

## Usage

### 1. Use default settings

Add below code in your `package.json`

```json
{
 "script": {
  "watch": "webpack serve --open --mode development --config node_modules/@medly/webpack-config",
  "dist": "webpack --mode production --config node_modules/@medly/webpack-config",
  "dist:analyze": "npm run dist -- --analyze"
 }
}
```

### 2. Overwrite default settings

Add `webpack.dev.js` file at root level with below code

```js
const { configure } = require('@medly/webpack-config');

module.exports = configure({
 devServer: {
  port: 8090
 }
});
```

Add below code in your `package.json`

```json
{
 "script": {
  "watch": "webpack serve --mode development --config webpack.dev.js"
 }
}
```

## Default config

To view the default config click [here](index.js)