Expose view. #16

Change eslint settings
Upgrade yarn 3.5.0.

.eslintrc.yml

@@ -1,48 +1,47 @@
-root: true
 env:
   browser: true
-  es6: true
+  es2022: true # Vuetify recommended
   node: true
 extends:
-  - eslint:recommended
-  - google
-  - plugin:@typescript-eslint/eslint-recommended
+  - plugin:vue/vue3-recommended
+  - standard-with-typescript
   - plugin:import/recommended
   - plugin:import/typescript
-  - plugin:jsdoc/recommended
-  - plugin:vue/vue3-recommended
   - plugin:vuejs-accessibility/recommended
   - plugin:yaml/recommended
   - '@vue/eslint-config-prettier'
-plugins:
-  - '@typescript-eslint'
-  - jsdoc
-  - tsdoc
-  - html
-  - yaml
-  - vue
+overrides:
+  - files:
+      - '*.html'
+    processor: vue/.vue
 parser: vue-eslint-parser
 parserOptions:
   ecmaVersion: latest
   parser: '@typescript-eslint/parser'
   sourceType: module
   createDefaultProgram: true
   project:
-    - ./tsconfig.json
+    - ./tsconfig.app.json
+    - ./tsconfig.node.json
+  extraFileExtensions:
+    - .vue
+plugins:
+  - import
+  - tsdoc
+  - html
+  - yaml
+  - vue
 rules:
-  new-cap: off
-  no-invalid-this: off
-  no-unused-vars: warn
   require-jsdoc: warn
-  valid-jsdoc: off
+  no-unused-vars: warn
+  '@typescript-eslint/ban-ts-comment': off
+  '@typescript-eslint/no-confusing-void-expression': off
+  '@typescript-eslint/no-floating-promises': off
+  '@typescript-eslint/no-invalid-void-type': off
+  '@typescript-eslint/prefer-nullish-coalescing': off
+  '@typescript-eslint/strict-boolean-expressions': off
+  '@typescript-eslint/triple-slash-reference': off
   import/default: off
-  jsdoc/require-param-type: off
-  jsdoc/require-param:
-    - off
-    - enableRootFixer: false
-  jsdoc/require-returns-description: off
-  jsdoc/require-returns-type: off
-  jsdoc/require-returns: off
   tsdoc/syntax: warn
   vue/html-self-closing:
     - error

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+yarnPath: .yarn/releases/yarn-3.5.0.cjs

package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "vue-codemirror6",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "license": "MIT",
   "description": "CodeMirror6 Component for vue2 and vue3.",
   "keywords": [
@@ -56,7 +56,7 @@
     "node": ">=18.15.0",
     "yarn": ">=1.22.19"
   },
-  "packageManager": "yarn@3.4.1",
+  "packageManager": "yarn@3.5.0",
   "sideEffects": false,
   "scripts": {
     "dev": "vite",
@@ -89,22 +89,21 @@
     "@types/node": "^18.15.3",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/tsconfig": "^0.1.3",
     "@vueuse/core": "^9.13.0",
     "eslint": "^8.36.0",
-    "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-standard-with-typescript": "latest",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-linter-browserify": "^8.36.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^40.0.2",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-n": "^15.6.1",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-vue": "^9.9.0",
+    "eslint-plugin-vue": "latest",
     "eslint-plugin-vuejs-accessibility": "^2.1.0",
     "eslint-plugin-yaml": "^0.5.0",
     "husky": "^8.0.3",
@@ -113,9 +112,9 @@
     "prettier": "^2.8.4",
     "rimraf": "^4.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.59.2",
+    "sass": "^1.59.3",
     "typescript": "^4.9.5",
-    "vite": "^4.1.4",
+    "vite": "^4.2.0",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-checker": "^0.5.6",
     "vite-plugin-dts": "^2.1.0",

src-docs/main.ts

@@ -2,5 +2,5 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 
-// @ts-ignore
+// @ts-expect-error
 createApp(App).mount('#app');

src/components/CodeMirror.ts

@@ -23,6 +23,7 @@ import { compact, trim } from 'lodash';
 // CodeMirror
 import { basicSetup, minimalSetup } from 'codemirror';
 import {
+  Compartment,
   EditorSelection,
   EditorState,
   StateEffect,
@@ -91,7 +92,7 @@ export default defineComponent({
      * @see {@link https://codemirror.net/docs/ref/#view.EditorView^theme}
      */
     theme: {
-      type: Object as PropType<{ [selector: string]: StyleSpec }>,
+      type: Object as PropType<Record<string, StyleSpec>>,
       default: () => {},
     },
     /** Dark Mode */
@@ -287,7 +288,7 @@ export default defineComponent({
    * @param props  - Props
    * @param context - Context
    */
-  // @ts-ignore
+  // @ts-expect-error
   setup(props, context: SetupContext<CodeMirrorEmitsOptions>) {
     /** Editor DOM */
     const editor: Ref<HTMLElement | undefined> = ref();
@@ -324,7 +325,7 @@ export default defineComponent({
 
     /** Cursor Position */
     const cursor: WritableComputedRef<number> = computed({
-      get: () => view.value.state.selection.main.head || 0,
+      get: () => view.value.state.selection.main.head,
       set: a => view.value.dispatch({ selection: { anchor: a } }),
     });
 
@@ -347,6 +348,12 @@ export default defineComponent({
       () => view.value.state.doc.length
     );
 
+    // Synamic Reconfiguration
+    // @see https://codemirror.net/examples/config/
+
+    const language = new Compartment();
+    const tabSize = new Compartment();
+
     /** Get CodeMirror Extension */
     const extensions: ComputedRef<Extension[]> = computed(() =>
       // TODO: Ignore previous prop was not changed.
@@ -368,7 +375,9 @@ export default defineComponent({
         // Allow Multiple Selections
         EditorState.allowMultipleSelections.of(props.allowMultipleSelections),
         // Indent tab size
-        props.tabSize ? EditorState.tabSize.of(props.tabSize) : undefined,
+        props.tabSize
+          ? tabSize.of(EditorState.tabSize.of(props.tabSize))
+          : undefined,
         // locale settings
         props.phrases ? EditorState.phrases.of(props.phrases) : undefined,
         // Readonly option
@@ -380,7 +389,7 @@ export default defineComponent({
           ? EditorState.lineSeparator.of(props.lineSeparator)
           : undefined,
         // Lang
-        props.lang ? props.lang.extension : undefined,
+        props.lang ? language.of(props.lang) : undefined,
         // Append Linter settings
         props.linter ? linter(props.linter, props.linterConfig) : undefined,
         // Show 🔴 to error line when linter enabled.
@@ -435,7 +444,7 @@ export default defineComponent({
     onMounted(async () => {
       /** Initial value */
       let value: string | Text = doc.value;
-      if (editor.value && editor.value.childNodes[0]) {
+      if (editor.value?.childNodes[0]) {
         // when slot mode, overwrite initial value
         if (doc.value !== '') {
           console.warn(
@@ -456,6 +465,7 @@ export default defineComponent({
           // console.log(view.state.doc.toString(), tr);
           if (tr.changes.empty) return;
           // child-to-parent binding
+          // eslint-disable-next-line @typescript-eslint/no-base-to-string
           const v = view.value.state.doc.toString();
           context.emit('update:modelValue', v);
           context.emit('change', view.value.state);
@@ -464,26 +474,24 @@ export default defineComponent({
 
       await nextTick();
       context.emit('ready', {
-        view: view,
+        view,
         state: view.value.state,
         container: editor.value,
       });
     });
 
     /** Destroy */
     onUnmounted(() => {
-      if (view.value) {
-        view.value.destroy();
-        context.emit('destroy');
-      }
+      view.value.destroy();
+      context.emit('destroy');
     });
 
     /**
      * Forces any linters configured to run when the editor is idle to run right away.
      *
      * @see {@link https://codemirror.net/docs/ref/#lint.forceLinting}
      */
-    const lint = () => {
+    const lint = (): void => {
       if (props.linter) {
         forceLinting(view.value);
       }
@@ -494,7 +502,7 @@ export default defineComponent({
      *
      * @see {@link https://codemirror.net/examples/config/#top-level-reconfiguration}
      */
-    const forceReconfigure = () => {
+    const forceReconfigure = (): void => {
       // Deconfigure all Extensions
       view.value.dispatch({
         effects: StateEffect.reconfigure.of([]),
@@ -560,7 +568,7 @@ export default defineComponent({
       replacement: string | Text,
       from: number,
       to: number
-    ) =>
+    ): void =>
       view.value.dispatch({
         changes: { from, to, insert: replacement },
       });
@@ -570,7 +578,7 @@ export default defineComponent({
      *
      * @param replacement - replacement text
      */
-    const replaceSelection = (replacement: string | Text) =>
+    const replaceSelection = (replacement: string | Text): void =>
       view.value.dispatch(view.value.state.replaceSelection(replacement));
     /**
      * Set the cursor position.
@@ -584,7 +592,7 @@ export default defineComponent({
      * @param anchor - anchor position
      * @param head -
      */
-    const setSelection = (anchor: number, head?: number) =>
+    const setSelection = (anchor: number, head?: number): void =>
       view.value.dispatch({ selection: { anchor, head } });
     /**
      * Sets a new set of selections. There must be at least one selection in the given array.
@@ -595,7 +603,7 @@ export default defineComponent({
     const setSelections = (
       ranges: readonly SelectionRange[],
       primary?: number
-    ) =>
+    ): void =>
       view.value.dispatch({
         selection: EditorSelection.create(ranges, primary),
       });
@@ -604,7 +612,7 @@ export default defineComponent({
      *
      * @param f - function
      */
-    const extendSelectionsBy = (f: Function) =>
+    const extendSelectionsBy = (f: any): void =>
       view.value.dispatch({
         selection: EditorSelection.create(
           selection.value.ranges.map((r: SelectionRange) => r.extend(f(r)))
@@ -614,6 +622,7 @@ export default defineComponent({
     /** Export properties and functions */
     context.expose({
       editor,
+      view,
       cursor,
       selection,
       state,
@@ -649,19 +658,19 @@ export default defineComponent({
     //   </div>
     // </template>
     return h(
-      // @ts-ignore
+      // @ts-expect-error
       this.$props.tag,
       {
         ref: 'editor',
         class: 'vue-codemirror',
       },
-      // @ts-ignore
+      // @ts-expect-error
       this.$slots.default
         ? // Hide original content
           h(
             'aside',
             { style: 'display: none;', 'aria-hidden': 'true' },
-            // @ts-ignore
+            // @ts-expect-error
             slot(this.$slots.default)
           )
         : undefined

src/helpers/h-demi.ts

@@ -21,7 +21,7 @@ interface Options extends VNodeProps {
   'aria-hidden'?: string;
 }
 
-const adaptOnsV3 = (ons: Object) => {
+const adaptOnsV3 = (ons: any): any => {
   if (!ons) return {};
   return Object.entries(ons).reduce((ret, [key, handler]) => {
     key = key.charAt(0).toUpperCase() + key.slice(1);
@@ -54,6 +54,6 @@ function h(
 }
 
 const slot = (defaultSlots: any): Slots =>
-  typeof defaultSlots == 'function' ? defaultSlots() : defaultSlots;
+  typeof defaultSlots === 'function' ? defaultSlots() : defaultSlots;
 
 export { slot, h as default };

src/index.ts

@@ -2,13 +2,14 @@ import CodeMirror from './components/CodeMirror';
 import Meta from './Meta';
 
 // TODO: Move phrases props to option.
-const installCodeMirror = (app: any) => app.component('CodeMirror', CodeMirror);
+const installCodeMirror = (app: any): void =>
+  app.component('CodeMirror', CodeMirror);
 
 export { CodeMirror as default, installCodeMirror as install, Meta };
 
 // For CDN. (Maybe Vue2 only)
-// @ts-ignore
+// @ts-expect-error
 if (typeof window !== 'undefined' && window.Vue) {
-  // @ts-ignore
+  // @ts-expect-error
   window.Vue.use(CodeMirror);
 }