Changed implementation to generate *.d.ts with vite-plugin-dts.

Fixed a flaw in the monitoring method of the extensions property.

Author: logue

.eslintrc.yml

@@ -35,6 +35,7 @@ rules:
   no-unused-vars: warn
   require-jsdoc: warn
   valid-jsdoc: off
+  import/default: off
   jsdoc/require-param-type: off
   jsdoc/require-param:
     - off

package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "vue-codemirror6",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "license": "MIT",
   "description": "CodeMirror6 Component for vue2 and vue3.",
   "keywords": [
@@ -36,12 +36,12 @@
   },
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/src/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/src/index.d.ts"
     }
   },
   "files": [
@@ -53,21 +53,20 @@
     "./sfc": "./src/components/CodeMirror.ts"
   },
   "engines": {
-    "node": ">=18.14.1",
-    "yarn": ">=1.22.10"
+    "node": ">=18.15.0",
+    "yarn": ">=1.22.19"
   },
   "packageManager": "yarn@3.4.1",
   "sideEffects": false,
   "scripts": {
     "dev": "vite",
     "clean": "rimraf node_modules/.vite",
     "type-check": "tsc --noEmit --composite false",
-    "build": "run-p type-check build-only build-declaration",
+    "build": "run-p type-check build-only",
     "build:analyze": "vite build --mode=analyze",
     "build:clean": "rimraf dist docs",
     "build:docs": "vite build --mode=docs",
     "build-only": "vite build",
-    "build-declaration": "tsc -p tsconfig.app.json --composite false",
     "lint": "eslint . --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint && prettier . --write",
     "preview": "vite preview --mode=docs",
     "prepare": "husky install",
@@ -93,22 +92,22 @@
     "@codemirror/lang-markdown": "^6.1.0",
     "@codemirror/lang-vue": "^0.1.1",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^18.14.1",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
+    "@types/node": "^18.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/tsconfig": "^0.1.3",
     "@vueuse/core": "^9.13.0",
     "eslint": "^8.35.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.3",
-    "eslint-linter-browserify": "^8.34.0",
+    "eslint-linter-browserify": "^8.35.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^40.0.0",
+    "eslint-plugin-jsdoc": "^40.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-tsdoc": "^0.2.17",
     "eslint-plugin-vue": "^9.9.0",
@@ -118,17 +117,17 @@
     "lint-staged": "^13.1.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
-    "rimraf": "^4.1.2",
+    "rimraf": "^4.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.58.3",
-    "sass-loader": "^13.2.0",
     "typescript": "^4.9.5",
     "vite": "^4.1.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-checker": "^0.5.6",
-    "vue": "3.2.47",
+    "vite-plugin-dts": "^2.1.0",
+    "vue": "^3.2.47",
     "vue-eslint-parser": "^9.1.0",
-    "vue-markdown-wasm": "^0.3.2",
+    "vue-markdown-wasm": "^0.3.6",
     "vue-tsc": "^1.2.0"
   },
   "husky": {

src-docs/components/MarkdownDemo.vue

@@ -20,14 +20,7 @@ defineProps({ dark: Boolean });
 <template>
   <div class="row">
     <div class="col-6">
-      <code-mirror
-        v-model="input"
-        :dark="dark"
-        :lang="markdown()"
-        wrap
-        basic
-        @ready="onReady"
-      />
+      <code-mirror v-model="input" :dark="dark" :lang="markdown()" wrap basic />
     </div>
     <div class="col-6">
       <vue-markdown v-model="input" class="markdown-body" />

src/components/CodeMirror.ts

@@ -67,6 +67,8 @@ export interface CodeMirrorEmitsOptions extends ObjectEmitsOptions {
   (e: 'destroy'): void;
   /** State Changed */
   (e: 'change', value: EditorState): void;
+  /** Diagnostic Count */
+  (e: 'diagnosticCount'): number;
 }
 
 /** CodeMirror Component */
@@ -230,7 +232,16 @@ export default defineComponent({
      */
     linterConfig: {
       type: Object,
-      default: () => {},
+      default: () => undefined,
+    },
+    /**
+     * Forces any linters configured to run when the editor is idle to run right away.
+     *
+     * @see {@link https://codemirror.net/docs/ref/#lint.forceLinting}
+     */
+    forceLinting: {
+      type: Boolean,
+      default: false,
     },
     /**
      * Show Linter Gutter
@@ -251,7 +262,7 @@ export default defineComponent({
      */
     gutterConfig: {
       type: Object,
-      default: () => {},
+      default: () => undefined,
     },
     /**
      * Using tag
@@ -269,6 +280,7 @@ export default defineComponent({
    * @param props  - Props
    * @param context - Context
    */
+  // @ts-ignore
   setup(props, context: SetupContext<CodeMirrorEmitsOptions>) {
     /** Editor DOM */
     const editor: Ref<HTMLElement | undefined> = ref();
@@ -382,6 +394,11 @@ export default defineComponent({
           return;
         }
 
+        // Enable Force Linting
+        if (props.linter && props.forceLinting) {
+          forceLinting(view.value);
+        }
+
         // Update
         view.value.dispatch({
           changes: { from: 0, to: view.value.state.doc.length, insert: value },
@@ -393,11 +410,13 @@ export default defineComponent({
     );
 
     // Extension (mostly props) Changed
-    watch(extensions, exts =>
-      // TODO: Reduce unchanched value
-      view.value.dispatch({
-        effects: StateEffect.reconfigure.of(exts),
-      })
+    watch(
+      () => extensions.value,
+      exts => {
+        view.value.dispatch({
+          effects: StateEffect.reconfigure.of(exts),
+        });
+      }
     );
 
     // focus changed
@@ -433,6 +452,7 @@ export default defineComponent({
           context.emit('change', view.value.state);
         },
       });
+
       await nextTick();
       context.emit('ready', {
         view: view,
@@ -620,16 +640,19 @@ export default defineComponent({
     //   </div>
     // </template>
     return h(
+      // @ts-ignore
       this.$props.tag,
       {
         ref: 'editor',
         class: 'vue-codemirror',
       },
+      // @ts-ignore
       this.$slots.default
         ? // Hide original content
           h(
             'aside',
             { style: 'display: none;', 'aria-hidden': 'true' },
+            // @ts-ignore
             slot(this.$slots.default)
           )
         : undefined

src/helpers/h-demi.ts

@@ -4,14 +4,19 @@
  * @see {@link https://github.com/vueuse/vue-demi/issues/65}
  */
 
-import { h as hDemi, isVue2, type VNode, Vue2 } from 'vue-demi';
+import {
+  h as hDemi,
+  isVue2,
+  type Slots,
+  type VNode,
+  type VNodeProps,
+} from 'vue-demi';
 
-interface Options {
+interface Options extends VNodeProps {
   class?: string;
   domProps?: Record<any, any>;
   on?: Record<any, any>;
   props?: Record<any, any>;
-  ref?: string;
   style?: string;
   'aria-hidden'?: string;
 }
@@ -25,12 +30,15 @@ const adaptOnsV3 = (ons: Object) => {
   }, {});
 };
 
-const h = (
+/**
+ * hDemi function.
+ */
+function h(
   type: string | Record<any, any>,
   options: Options = {},
   chidren?: any
-): VNode => {
-  if (isVue2 && parseInt(Vue2.version) < 2.7) {
+): VNode {
+  if (isVue2) {
     // Makeshift support :(
     // Since Vue2.7 includes the Composition API, the functions in vue-demi are not used.
     return hDemi(type, options, chidren);
@@ -43,9 +51,9 @@ const h = (
     { ...extraOptions, ...props, ...domProps, ...ons },
     chidren
   );
-};
+}
 
-const slot = (defaultSlots: any) =>
+const slot = (defaultSlots: any): Slots =>
   typeof defaultSlots == 'function' ? defaultSlots() : defaultSlots;
 
 export { slot, h as default };

tsconfig.app.json

@@ -7,9 +7,6 @@
     "composite": true,
     "baseUrl": ".",
     "esModuleInterop": true,
-    "declaration": true,
-    "declarationDir": "./dist",
-    "outDir": "./dist",
     "paths": {
       "@/*": ["./src/*"]
     },

vite.config.ts

@@ -2,6 +2,7 @@ import { checker } from 'vite-plugin-checker';
 import { defineConfig, type UserConfig } from 'vite';
 import { visualizer } from 'rollup-plugin-visualizer';
 import banner from 'vite-plugin-banner';
+import dts from 'vite-plugin-dts';
 import Vue from '@vitejs/plugin-vue';
 
 import { fileURLToPath, URL } from 'node:url';
@@ -54,6 +55,13 @@ export default defineConfig(async ({ mode, command }): Promise<UserConfig> => {
  * @see {@link ${pkg.homepage}}
  */
 `),
+      // vite-plugin-dts
+      // https://github.com/qmhc/vite-plugin-dts
+      mode === 'docs'
+        ? undefined
+        : dts({
+            tsConfigFilePath: './tsconfig.app.json',
+          }),
     ],
     optimizeDeps: {
       exclude: [