Update dependencies.

Add version and build information to index.ts.
Update documentation.
Upgrade yarn-3.2.4.

Author: logue

.yarn/releases/yarn-3.2.3.cjs

@@ -1,2 +1,2 @@
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs
 nodeLinker: node-modules

.yarn/releases/yarn-3.2.4.cjs

@@ -5,26 +5,25 @@
 [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/vue-codemirror6/file/README.md)
 [![npm version](https://img.shields.io/npm/v/vue-codemirror6.svg)](https://www.npmjs.com/package/vue-codemirror6)
 [![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/logue/vue-codemirror6)
+[![Twitter Follow](https://img.shields.io/twitter/follow/logue256?style=plastic)](https://twitter.com/logue256)
 
-A component for using [CodeMirror6](https://codemirror.net/6/) with Vue. Unrelated to [surmon-china's vue-codemirror](https://github.com/surmon-china/vue-codemirror), it is for CodeMirror6.
+A component for using [CodeMirror6](https://codemirror.net/6/) with Vue. This component works in both Vue2 and Vue3.
 
 ## Usage
 
 ```sh
 yarn add vue-codemirror6 codemirror
 ```
 
-This component can handle bidirectional binding by `v-model` like a general Vue component.
-
-When using with Vue <2.6, [@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) is required separately.
+For Vue 2.7 or below, [@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) is required separately.
 
 ```sh
 yarn add vue-codemirror6 @vue/composition-api
 ```
 
-For Vue 2.7 or later, import vue directly like Vue3.
+This component can handle bidirectional binding by `v-model` like a general Vue component.
 
-### Props
+## Props
 
 | Props      | Type                              | Information                                                                                                                                                                                                                    |
 | ---------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -43,7 +42,7 @@ For Vue 2.7 or later, import vue directly like Vue3.
 | lintGutter | boolean                           | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified.                                                                                                    |
 | tag        | string                            | HTML tags used in the component. (Default is `div` tag.)                                                                                                                                                                       |
 
-Notice: `lang` and `linter` can also be set together in `extensions`. This is defined for usability compatibility with past CodeMirrors.
+⚠ Notice: `lang` and `linter` can also be set together in `extensions`. These are separated for compatibility with previous versions of CodeMirror settings and for typing props.
 
 ### Supported Languages
 
@@ -152,8 +151,8 @@ import { ref, defineComponent, type Ref } from 'vue';
 import CodeMirror from 'vue-codemirror6';
 
 // CodeMirror extensions
-import type { LanguageSupport } from '@codemirror/language';
 import { markdown as md } from '@codemirror/lang-markdown';
+import type { LanguageSupport } from '@codemirror/language';
 import type { Extension } from '@codemirror/state';
 import type { ViewUpdate } from '@codemirror/view';
 
@@ -164,6 +163,7 @@ export default defineComponent({
   setup() {
     /**
      * Get Vuetify instance
+     *
      * @see {@link https://github.com/logue/vite-vue2-vuetify-ts-starter | vite-vue2-vuetify-ts-starter}
      */
     const vuetify = useVuetify();

.yarnrc.yml

@@ -56,7 +56,7 @@
         </div>
       </div>
     </nav>
-    <header class="bg-light">
+    <header class="header bg-light">
       <div class="container py-3">
         <h1>Vue CodeMirror6 Demo</h1>
         <p class="lead">
@@ -110,20 +110,30 @@ export default defineComponent({
     const dark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches);
     watch(dark, () => {
       const navbar = document.querySelector('.navbar').classList;
+      const header = document.querySelector('.header').classList;
+      const demo = document.querySelector('.demo').classList;
       const main = document.querySelector('main').classList;
       const footer = document.querySelector('.footer').classList;
       if (dark.value) {
         navbar.remove('navbar-dark', 'bg-dark');
         navbar.add('navbar-light', 'bg-light');
+        header.remove('bg-light', 'text-dark');
+        header.add('bg-dark', 'text-light');
         main.remove('bg-white', 'text-dark');
         main.add('bg-black', 'text-light');
+        demo.remove('bg-light', 'text-dark');
+        demo.add('bg-dark', 'text-light');
         footer.remove('bg-light', 'text-dark');
         footer.add('bg-dark', 'text-light');
       } else {
         navbar.add('navbar-dark', 'bg-dark');
         navbar.remove('navbar-light', 'bg-light');
+        header.remove('bg-dark', 'text-light');
+        header.add('bg-light', 'text-dark');
         main.add('bg-white', 'text-dark');
         main.remove('bg-black', 'text-light');
+        demo.remove('bg-dark', 'text-light');
+        demo.add('bg-light', 'text-dark');
         footer.add('bg-light', 'text-dark');
         footer.remove('bg-dark', 'text-light');
       }

README.md

@@ -124,7 +124,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
         </div>
         <div class="col">
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div class="p-3 bg-light text-dark" v-html="output" />
+          <div class="demo p-3 bg-light text-dark" v-html="output" />
         </div>
       </div>
       <p>
@@ -285,7 +285,7 @@ export default defineComponent({
             v-model="demo2"
             aria-label="two way bind test"
             rows="3"
-            class="form-control"
+            class="demo form-control"
           />
         </div>
       </div>

dev/App.vue

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "vue-codemirror6",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "description": "CodeMirror6 Component for vue2 and vue3.",
   "keywords": [
@@ -54,7 +54,7 @@
     "node": ">=16.17.1",
     "yarn": ">=1.22.10"
   },
-  "packageManager": "[email protected].3",
+  "packageManager": "[email protected].4",
   "sideEffects": false,
   "scripts": {
     "dev": "vite",
@@ -83,26 +83,26 @@
   },
   "devDependencies": {
     "@codemirror/lang-javascript": "^6.1.0",
-    "@codemirror/lang-markdown": "^6.0.1",
-    "@types/lodash": "^4.14.185",
-    "@types/node": "^18.7.23",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
-    "@vitejs/plugin-vue": "^3.1.0",
+    "@codemirror/lang-markdown": "^6.0.2",
+    "@types/lodash": "^4.14.186",
+    "@types/node": "^18.8.4",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "@vitejs/plugin-vue": "^3.1.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/tsconfig": "^0.1.3",
     "codemirror": "^6.0.1",
-    "eslint": "^8.24.0",
+    "eslint": "^8.25.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.1",
-    "eslint-linter-browserify": "^8.24.0",
+    "eslint-linter-browserify": "^8.25.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-vue": "^9.5.1",
+    "eslint-plugin-vue": "^9.6.0",
     "eslint-plugin-vuejs-accessibility": "^1.2.0",
     "eslint-plugin-yaml": "^0.5.0",
     "husky": "^8.0.1",
@@ -111,13 +111,13 @@
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "rollup-plugin-visualizer": "^5.8.2",
-    "typescript": "^4.8.3",
-    "vite": "^3.1.3",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.7",
     "vite-plugin-banner": "^0.5.0",
     "vite-plugin-checker": "^0.5.1",
-    "vue": "^3.2.39",
+    "vue": "^3.2.40",
     "vue-eslint-parser": "^9.1.0",
-    "vue-tsc": "^0.40.13"
+    "vue-tsc": "^1.0.5"
   },
   "husky": {
     "hooks": {

dev/DemoPage.vue

@@ -1,3 +1,9 @@
+/**
+ * h-demi - h function for Vue 2 and 3
+ *
+ * @see {@link https://github.com/vueuse/vue-demi/issues/65}
+ */
+
 import { h as hDemi, isVue2, type VNode, Vue2 } from 'vue-demi';
 
 interface Options {

package.json

@@ -1,9 +1,10 @@
 import CodeMirror from './components/CodeMirror';
+import Meta from './Meta';
 
 // TODO: Move phrases props to option.
 const installCodeMirror = (app: any) => app.component('CodeMirror', CodeMirror);
 
-export { CodeMirror as default, installCodeMirror as install };
+export { CodeMirror as default, installCodeMirror as install, Meta };
 
 // For CDN. (Maybe Vue2 only)
 // @ts-ignore

src/helpers/h-demi.ts

@@ -0,0 +1,7 @@
+/** Build information meta data */
+export default interface MetaInterface {
+  /** Version */
+  version: string;
+  /** Build date */
+  date: string;
+}