hash-trigger/README.md

The URL Hash Trigger library

# hash-trigger
![npm](https://img.shields.io/npm/v/hash-trigger)
![node](https://img.shields.io/node/v/hash-trigger)
![types](https://img.shields.io/npm/types/hash-trigger)
![downloads](https://img.shields.io/npm/dw/hash-trigger)
![license](https://img.shields.io/npm/l/hash-trigger)

The URL Hash Trigger library

> This project has been created by [Vessel CLI](https://www.npmjs.com/package/@mornya/vessel).
  For a simple and quick reference about it, click [here](https://mornya.github.io/documents/guide/vessel.md).

## About
window.location.hash 처리를 위한 심플 패키지.

## Installation
해당 라이브러리를 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.
```bash
$ npm install --save hash-trigger
or
$ yarn add hash-trigger
```

## Modules in the package
본 패키지에는 아래와 같은 모듈들을 포함한다.<br>
제공되는 모듈과 메소드 사용법 등은 코드 스니핏을 참고한다.

### HashTrigger module
HashTrigger 모듈은 다음과 같은 메소드들을 제공한다.

#### `HashTrigger.hashTrigger`
초기화 실행 메소드.
```
HashTrigger.hashTrigger(option: HashUrlOption);
```
옵션은 아래와 같다.
```typescript
type HashUrlOption = {
  test?: RegExp; // hash URL 내에서 필요한 값만 추출받을때 사용
  once? (matched: Matched): void; // hashTrigger 메소드 실행 즉시 콜백
  onLoaded? (matched: Matched): void; // window.onload 시 콜백
  onChanged (matched: Matched, event: HashChangeEvent): void; // hash URL 변경시마다 콜백
};
```
아래와 같은 방법으로 사용한다.
```typescript
import { hashTrigger, Matched } from 'hash-trigger';

// ...
window.location.href = '/sample#test1234';

hashTrigger({
  test: /test(\d+)/,
  once: (matched: Matched) => {
    console.log('Results for immediate:', matched[0]); // 1234
  },
  onLoaded: (matched: Matched) => {
    console.log('Results for window.onload:', matched[0]); // 1234
  },
  onChanged: (matched: Matched) => {
    console.log('Changed window.location.hash:', matched[0]); // 5678
  },
});

// ...
window.location.href = '/sample#test5678';
```

## Installation for development
해당 라이브러리의 개발환경과 빌드/배포 진행 등을 위한 설정으로 아래와 같이 전역 CLI 모듈을 설치한다.
```bash
$ npm install -g @mornya/vessel @lintest/cli sonarqube-scanner
or
$ yarn global add @mornya/vessel @lintest/cli sonarqube-scanner
```

## Available scripts
`package.json`에 정의된 script 항목에 대한 내용은 아래와 같다.

### `clean`
> 빌드 디렉토리 삭제.
```bash
$ npm run clean
```

### `build`
> 컴파일러를 통해 소스코드를 빌드 후 난독화 하여 `dist` 디렉토리에 출력한다.
```bash
$ npm run build
$ npm run build --esm # ESM 빌드 포함
```

### `watch`
> 컴파일러의 watch 모드로 소스코드 변경을 감시하여 컴파일 한다.
```bash
$ npm run watch
```

### `check`
> 타입스크립트 코드 검증을 위해 컴파일러를 실행한다. `lint-stage` 등에서 필요시 사용한다.
```bash
$ npm run check
```

### `lint`
> Lintest CLI를 실행하여 코드 린트 실행.
```bash
$ npm run lint
```

### `lint:fix`
> Lintest CLI를 실행하여 코드 린트 실행 및 자동 교정한다.
```bash
$ npm run lint:fix
```

### `test`
> Lintest CLI를 실행하여 테스트를 수행한다.
```bash
$ npm run test
```

### `test:watch`
> Lintest CLI를 실행하여 watch mode로 테스트를 수행한다.
```bash
$ npm run test:watch
```

### `test:coverage`
> Lintest CLI를 실행하여 테스트 커버리지 데이터를 수집하여 `/coverage` 디렉토리에 출력한다.
```bash
$ npm run test:coverage
```

### `login`
> NPM 레지스트리로의 퍼블리시를 위한 로그인 처리.<br>
 `npm login`에 scope를 선언하여 처리하는 방식과 같다.<br>
 레지스트리 경로는 `package.json`의 publishConfig 항목 값이 참조 된다.
```bash
$ npm run login (not "npm login")
```

### `publish`
> 퍼블리시 수행 전 로그인 / 빌드 / 버전체크 등을 먼저 실행 후 정상완료시 퍼블리시가 수행 된다.
```bash
$ npm publish
```

### `sonar`
소나큐브를 이용한 정적 분석이 필요하면 `sonarqube-scanner`를 글로벌 설치 후 아래 명령을 실행하면 된다. 지표 확인은 `sonar-project.properties` 파일 내 정의 된 URL 및 projectKey를 참조한다.
```bash
$ npm run sonar
```

## Change Log
프로젝트 변경사항은 [CHANGELOG.md](CHANGELOG.md) 파일 참조.

## License
프로젝트 라이센스는 [LICENSE](LICENSE) 파일 참조.