Merge pull request #84 from alienzhou/fix/tsconfig-path

feat: use uniform path alias

Author: alienzhou

config/base.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
-const {srcPath, basePath} = require('./paths');
+const {basePath} = require('./paths');
+const {TsconfigPathsPlugin} = require('tsconfig-paths-webpack-plugin');
 
 module.exports = {
     entry: [
@@ -18,9 +19,7 @@ module.exports = {
         libraryExport: 'default'
     },
     resolve: {
-        extensions: ['.ts', '.tsx', '.js'],
-        alias: {
-            '@src': srcPath
-        }
+        plugins: [new TsconfigPathsPlugin()],
+        extensions: ['.ts', '.tsx', '.js']
     }
 };

package.json

@@ -14,11 +14,11 @@
     "watch": "webpack --config ./config/webpack.config.prod.js --watch",
     "build-example": "export target=example && node script/build.js",
     "static": "run-p watch serve",
-    "typings": "tsc -d --declarationDir typings",
     "start": "node script/dev.js",
-    "types": "tsc --emitDeclarationOnly && tscpaths -p tsconfig.json -s ./src -o ./dist",
-    "build": "export target=dist && node script/build.js",
-    "prepublishOnly": "npm run build && npm run types"
+    "build:types": "tscpaths -p tsconfig.json -s ./src -o ./dist",
+    "build:code": "target=dist node script/build.js",
+    "build": "run-s build:code build:types",
+    "prepublishOnly": "run-s lint build test"
   },
   "husky": {
     "hooks": {
@@ -84,6 +84,7 @@
     "ts-loader": "^5.3.0",
     "ts-node": "^8.10.1",
     "tsconfig-paths": "^3.9.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "tscpaths": "0.0.9",
     "typescript": "^4.1.3",
     "webpack": "^4.25.1",

src/data/cache.ts

@@ -1,6 +1,6 @@
 import EventEmitter from '@src/util/event.emitter';
-import type HighlightSource from '../model/source';
-import { ERROR } from '../types';
+import type HighlightSource from '@src/model/source';
+import { ERROR } from '@src/types';
 
 class Cache extends EventEmitter {
     private _data: Map<string, HighlightSource> = new Map();

src/index.ts

@@ -1,3 +1,4 @@
+import type { DomNode, DomMeta, HookMap, HighlighterOptions } from '@src/types';
 import EventEmitter from '@src/util/event.emitter';
 import HighlightRange from '@src/model/range';
 import HighlightSource from '@src/model/source';
@@ -7,8 +8,7 @@ import getInteraction from '@src/util/interaction';
 import Cache from '@src/data/cache';
 import Painter from '@src/painter';
 import { eventEmitter, getDefaultOptions, INTERNAL_ERROR_EVENT } from '@src/util/const';
-import type { DomNode, DomMeta, HookMap, HighlighterOptions } from './types';
-import { ERROR, EventType, CreateFrom } from './types';
+import { ERROR, EventType, CreateFrom } from '@src/types';
 import {
     addClass,
     removeClass,

src/model/range/dom.ts

@@ -2,8 +2,8 @@
  * some dom operations about HighlightRange
  */
 
-import { CAMEL_DATASET_IDENTIFIER, ROOT_IDX, UNKNOWN_IDX } from '@src/util/const';
 import type { DomMeta, DomNode } from '@src/types';
+import { CAMEL_DATASET_IDENTIFIER, ROOT_IDX, UNKNOWN_IDX } from '@src/util/const';
 
 const countGlobalNodeIndex = ($node: Node, $root: Document | HTMLElement): number => {
     const tagName = ($node as HTMLElement).tagName;

src/model/range/index.ts

@@ -4,13 +4,13 @@
  * represents for a piece of chosen dom
  */
 
-import HighlightSource from '../source/index';
 import type { DomNode, HookMap } from '@src/types';
-import { ERROR } from '@src/types';
-import { getDomRange, removeSelection } from './selection';
 import type Hook from '@src/util/hook';
+import HighlightSource from '@src/model/source/index';
+import { ERROR } from '@src/types';
+import { getDomRange, removeSelection } from '@src/model/range/selection';
 import uuid from '@src/util/uuid';
-import { getDomMeta, formatDomNode } from './dom';
+import { getDomMeta, formatDomNode } from '@src/model/range/dom';
 import { eventEmitter, INTERNAL_ERROR_EVENT } from '@src/util/const';
 
 class HighlightRange {

src/model/source/dom.ts

@@ -1,5 +1,5 @@
 import type { DomNode } from '@src//types';
-import type HighlightSource from './index';
+import type HighlightSource from '@src/model/source/index';
 import { ROOT_IDX } from '@src/util/const';
 
 /**

src/model/source/index.ts

@@ -4,9 +4,9 @@
  * Also it has the ability for persistence.
  */
 
-import type { DomMeta, HookMap, DomNode } from '../../types';
-import HighlightRange from '../range/index';
-import { queryElementNode, getTextChildByOffset } from './dom';
+import type { DomMeta, HookMap, DomNode } from '@src/types';
+import HighlightRange from '@src/model/range/index';
+import { queryElementNode, getTextChildByOffset } from '@src/model/source/dom';
 
 class HighlightSource {
     startMeta: DomMeta;

src/painter/dom.ts

@@ -1,7 +1,7 @@
-import type HighlightRange from '../model/range';
-import type { SelectedNode, DomNode } from '../types';
-import { SplitType, SelectedNodeType } from '../types';
-import { hasClass, addClass as addElementClass, isHighlightWrapNode, removeAllClass } from '../util/dom';
+import type HighlightRange from '@src/model/range';
+import type { SelectedNode, DomNode } from '@src/types';
+import { SplitType, SelectedNodeType } from '@src/types';
+import { hasClass, addClass as addElementClass, isHighlightWrapNode, removeAllClass } from '@src/util/dom';
 import {
     ID_DIVISION,
     getDefaultOptions,

src/painter/index.ts

@@ -4,21 +4,21 @@
  * No need to instantiate repeatly. A Highlighter instance will bind a Painter instance.
  */
 
-import HighlightSource from '@src/model/source';
 import type HighlightRange from '@src/model/range';
-import { wrapHighlight, getSelectedNodes, normalizeSiblingText } from './dom';
-import { getHighlightsByRoot, forEach, addClass, removeAllClass } from '@src/util/dom';
 import type { PainterOptions, HookMap } from '@src/types';
+import HighlightSource from '@src/model/source';
+import { wrapHighlight, getSelectedNodes, normalizeSiblingText } from '@src/painter/dom';
+import { getHighlightsByRoot, forEach, addClass, removeAllClass } from '@src/util/dom';
 import { ERROR } from '@src/types';
-import { initDefaultStylesheet } from './style';
+import { initDefaultStylesheet } from '@src/painter/style';
 import {
     ID_DIVISION,
     eventEmitter,
     DATASET_IDENTIFIER,
     INTERNAL_ERROR_EVENT,
     CAMEL_DATASET_IDENTIFIER,
     CAMEL_DATASET_IDENTIFIER_EXTRA,
-} from '../util/const';
+} from '@src/util/const';
 
 export default class Painter {
     options: PainterOptions;

src/util/const.ts

@@ -5,8 +5,9 @@
 
 import type HighlightSource from '@src/model/source';
 import type { ERROR } from '@src/types';
-import camel from './camel';
-import EventEmitter from './event.emitter';
+import camel from '@src/util/camel';
+import EventEmitter from '@src/util/event.emitter';
+
 export const ID_DIVISION = ';';
 export const LOCAL_STORE_KEY = 'highlight-mengshou';
 export const STYLESHEET_ID = 'highlight-mengshou-style';

src/util/dom.ts

@@ -1,5 +1,10 @@
-import type { RootElement } from '../types';
-import { ID_DIVISION, DATASET_IDENTIFIER, CAMEL_DATASET_IDENTIFIER, CAMEL_DATASET_IDENTIFIER_EXTRA } from './const';
+import type { RootElement } from '@src/types';
+import {
+    ID_DIVISION,
+    DATASET_IDENTIFIER,
+    CAMEL_DATASET_IDENTIFIER,
+    CAMEL_DATASET_IDENTIFIER_EXTRA,
+} from '@src/util/const';
 
 /**
  * whether a wrapper node

src/util/interaction.ts

@@ -2,9 +2,9 @@
  * adapter for mobile and desktop events
  */
 
-import type { IInteraction } from '../types';
-import { UserInputEvent } from '../types';
-import detectMobile from './is.mobile';
+import type { IInteraction } from '@src/types';
+import { UserInputEvent } from '@src/types';
+import detectMobile from '@src/util/is.mobile';
 
 export default (): IInteraction => {
     const isMobile = detectMobile(window.navigator.userAgent);