feat: typescript rewrite #30

- babel removed
- custom prop no longer required

.eslintrc.js

@@ -1,15 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
 module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: ['plugin:vue/essential', '@vue/prettier'],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    quotes: ['error', 'single'],
-  },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
+  "root": true,
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier"
+  ],
+  "env": {
+    "vue/setup-compiler-macros": true
+  }
 }

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist-demo
 /dist
+/temp
 
 # local env files
 .env.local

README.md

@@ -76,7 +76,6 @@ And the `Highlighter` will mark all occurrences of search terms within the text:
 | sanitize             | Function            |           | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string`                                                                                                                                                                                                                                            |
 | searchWords          | Array<String>       |     ✓     | Array of search words. The search terms are treated as RegExps unless `autoEscape` is set.                                                                                                                                                                                                                                                                         |
 | textToHighlight      | String              |     ✓     | Text to highlight matches in                                                                                                                                                                                                                                                                                                                                       |
-| custom | Boolean              |           | Whether `<Highlighter>` should not wrap its content in an `<span>` element. Useful when using v-slot to create a custom Highlighter.|
 
 ## Custom render with v-slot
 
@@ -118,7 +117,6 @@ type Chunk = {
         :autoEscape="true"
 -       :textToHighlight="text"/>
 +       :textToHighlight="text"
-+       custom
 +       v-slot="items">
 +       <div>
 +         <span v-for="{chunk, text, attrs} in items" :key="attrs.key"
@@ -163,19 +161,19 @@ pnpm install
 ### Compiles and hot-reloads for development
 
 ```
-pnpm run serve
+pnpm dev
 ```
 
 ### Compiles and minifies for production
 
 ```
-pnpm run build
+pnpm build
 ```
 
 ### Lints and fixes files
 
 ```
-pnpm run lint
+pnpm lint
 ```
 
 ## License

api-extractor.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  "mainEntryPointFilePath": "./dist/src/index.d.ts",
+
+  "apiReport": {
+    "enabled": true,
+    "reportFolder": "<projectFolder>/temp/"
+  },
+
+  "docModel": {
+    "enabled": true
+  },
+
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "./dist/<unscopedPackageName>.d.ts"
+  },
+
+  "tsdocMetadata": {
+    "enabled": false
+  },
+
+  "messages": {
+    "compilerMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      }
+    },
+
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning",
+        "addToApiReportFile": true
+      },
+
+      "ae-missing-release-tag": {
+        "logLevel": "none"
+      }
+    },
+
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      }
+    }
+  }
+}

demo/App.vue

@@ -61,9 +61,9 @@
   </div>
 </template>
 
-<script>
-import HighlightWords from 'vue-highlight-words'
-import StrongProps from './components/StrongProps'
+<script lang="ts">
+import HighlightWords from '../src'
+import StrongProps from './components/StrongProps.vue'
 
 export default {
   name: 'app',

public/index.html → demo/index.html

@@ -1,17 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>vue-highlight-words</title>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but vue-highlight-words doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="./main.ts"></script>
   </body>
 </html>

demo/shim.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { Component } from 'vue'
+  var component: Component
+  export default component
+}

demo/tsconfig.config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

demo/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}

demo/vite.config.ts

@@ -0,0 +1,22 @@
+import { fileURLToPath, URL } from 'url'
+import { resolve } from 'path'
+import analyze from 'rollup-plugin-analyzer'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: resolve(process.cwd(), 'demo'),
+  build: {
+    outDir: '../dist-demo',
+    rollupOptions: {
+      plugins: [analyze()],
+    },
+  },
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})

package.json

@@ -7,17 +7,20 @@
   "main": "dist/vue-highlight-words.cjs",
   "module": "dist/vue-highlight-words.esm.js",
   "jsdelivr": "dist/vue-highlight-words.global.js",
+  "types": "dist/vue-highlight-words.d.ts",
   "unpkg": "dist/vue-highlight-words.global.js",
   "files": [
-    "src",
-    "dist"
+    "dist/*.js",
+    "dist/vue-highlight-words.d.ts",
+    "README.md"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite --config demo/vite.config.ts",
     "prebuild": "pnpm run lint",
-    "build": "pnpm run build:demo && pnpm run build:dist",
-    "build:demo": "vue-cli-service build --dest dist-demo",
-    "build:dist": "cross-env BUILD_LIB=1 node ./scripts/build",
+    "build": "pnpm run build:demo && pnpm run build:dist && pnpm run build:dts",
+    "build:demo": "vue-tsc --noEmit && vite build --config demo/vite.config.ts",
+    "build:dist": "node ./scripts/build",
+    "build:dts": "api-extractor run --local --verbose",
     "lint": "vue-cli-service lint",
     "deploy": "gh-pages -d dist-demo",
     "postpublish": "pnpm run deploy",
@@ -38,34 +41,34 @@
     "highlight-words-core": "^1.2.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@microsoft/api-extractor": "^7.25.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "3.1.5",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@types/highlight-words-core": "^1.2.1",
+    "@types/node": "^16.11.36",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/tsconfig": "^0.1.3",
     "bumpp": "^7.1.1",
     "chalk": "^2.4.2",
     "clone-deep": "^4.0.1",
-    "core-js": "^3.17.3",
-    "cross-env": "^5.2.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint": "^8.5.0",
+    "eslint-plugin-vue": "^8.2.0",
     "gh-pages": "^2.0.0",
     "merge": "^2.1.1",
     "prettier": "2.3.2",
     "rimraf": "^2.6.3",
     "rollup": "^2.52.7",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "vue": "3.1.5"
+    "rollup-plugin-typescript2": "^0.32.1",
+    "typescript": "^4.7.3",
+    "vite": "^2.9.9",
+    "vue": "3.2.26",
+    "vue-tsc": "^0.35.2"
   },
   "peerDependencies": {
     "vue": "^3.0.0"