hash-trigger

The URL Hash Trigger library

This project has been created by Vessel CLI. For a simple and quick reference about it, click here.

About

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

Installation

해당 라이브러리를 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.

$ npm install --save hash-trigger
or
$ yarn add hash-trigger

Modules in the package

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

HashTrigger module

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

HashTrigger.hashTrigger

초기화 실행 메소드.

HashTrigger.hashTrigger(option: HashUrlOption);

옵션은 아래와 같다.

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 변경시마다 콜백
};

아래와 같은 방법으로 사용한다.

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 모듈을 설치한다.

$ 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

빌드 디렉토리 삭제.

$ npm run clean

build

컴파일러를 통해 소스코드를 빌드 후 난독화 하여 dist 디렉토리에 출력한다.

$ npm run build
$ npm run build --esm # ESM 빌드 포함

watch

컴파일러의 watch 모드로 소스코드 변경을 감시하여 컴파일 한다.

$ npm run watch

check

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

$ npm run check

lint

Lintest CLI를 실행하여 코드 린트 실행.

$ npm run lint

lint:fix

Lintest CLI를 실행하여 코드 린트 실행 및 자동 교정한다.

$ npm run lint:fix

test

Lintest CLI를 실행하여 테스트를 수행한다.

$ npm run test

test:watch

Lintest CLI를 실행하여 watch mode로 테스트를 수행한다.

$ npm run test:watch

test:coverage

Lintest CLI를 실행하여 테스트 커버리지 데이터를 수집하여 /coverage 디렉토리에 출력한다.

$ npm run test:coverage

login

NPM 레지스트리로의 퍼블리시를 위한 로그인 처리. npm login에 scope를 선언하여 처리하는 방식과 같다. 레지스트리 경로는 package.json의 publishConfig 항목 값이 참조 된다.

$ npm run login (not "npm login")

publish

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

$ npm publish

sonar

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

$ npm run sonar

Change Log

프로젝트 변경사항은 CHANGELOG.md 파일 참조.

License

프로젝트 라이센스는 LICENSE 파일 참조.