feat: v6.0.0

Author: surmon-china

CHANGELOG.md

@@ -1,5 +1,28 @@
 ## CHANGELOG
 
+### v6.0.0 (2022-06-13)
+
+**Breaking changes**
+
+1. The package no longer depends on the codemirror package and now requires you to install the codemirror dependency manually.
+
+e.g. `npm install codemirror vue-codemirror`
+
+2. The package no longer exports the original codemirror package. If you need import interface from codemirror, you now need to make codemirror explicitly dependent in your `package.json`.
+
+e.g.
+
+```json
+"dependencies": {
+  "@codemirror/state": "6.x"
+}
+```
+
+```ts
+import { EditorView } from 'codemirror'
+import { EditorState } from '@codemirror/state'
+```
+
 ### v5.1.0 (2022-06-12)
 
 - Upgrade codemirror dependencies to 6.x

README.md

@@ -12,7 +12,7 @@
 
 [CodeMirror(6)](https://codemirror.net) component for Vue(3).
 
-**vue-codemirror** v5 has been released. This is a new version based on [CodeMirror@6](https://codemirror.net) and is available to Vue3 only. Since CodeMirror@6 is developed with native ES Modules, the new version will no longer support direct browser references to UMD modules. In short, the new version is ⚠️ **completely NOT compatible** with previous versions. If you wish to continue using Vue2 or a lower version of CodeMirror, please refer to the legacy versions below.
+**vue-codemirror** v5/v6 has been released. This is a new version based on [CodeMirror@6](https://codemirror.net) and is available to Vue3 only. Since CodeMirror@6 is developed with native ES Modules, the new version will no longer support direct browser references to UMD modules. In short, the new version is ⚠️ **completely NOT compatible** with previous versions. If you wish to continue using Vue2 or a lower version of CodeMirror, please refer to the legacy versions below.
 
 This [**example site**](https://github.surmon.me/vue-codemirror) contains most of what you want.
 
@@ -44,11 +44,11 @@ This [**example site**](https://github.surmon.me/vue-codemirror) contains most o
 #### Install
 
 ```bash
-yarn add vue-codemirror
+yarn add codemirror vue-codemirror
 ```
 
 ```bash
-npm install vue-codemirror --save
+npm install codemirror vue-codemirror --save
 ```
 
 #### Depending on your actual needs, you may need to install more CodeMirror packages
@@ -65,6 +65,20 @@ yarn add @codemirror/theme-one-dark
 # more CodeMirror packages...
 ```
 
+#### If you need import API/interface from codemirror, you need to make codemirror explicitly dependent in your `package.json`
+
+e.g.
+
+```json
+"dependencies": {
+  "@codemirror/state": "6.x"
+}
+```
+
+```ts
+import { EditorState } from '@codemirror/state'
+```
+
 #### local component
 
 ```vue
@@ -75,7 +89,7 @@ yarn add @codemirror/theme-one-dark
     :style="{ height: '400px' }"
     :autofocus="true"
     :indent-with-tab="true"
-    :tabSize="2"
+    :tab-size="2"
     :extensions="extensions"
     @ready="log('ready', $event)"
     @change="log('change', $event)"
@@ -111,8 +125,8 @@ yarn add @codemirror/theme-one-dark
 
 ```javascript
 import { createApp } from 'vue'
+import { basicSetup } from 'codemirror'
 import VueCodemirror from 'vue-codemirror'
-import { basicSetup } from '@codemirror/basic-setup'
 
 const app = createApp()
 
@@ -156,7 +170,7 @@ app.use(VueCodemirror, {
 
 ### Basic Setup
 
-The [basic-setup](https://codemirror.net/docs/ref/#basic-setup) extension is integrated by default in the vue-codemirror configuration, and is intended as a handy helper to quickly set up CodeMirror without having to install and import a lot of standalone packages. If you want to override the default behavior of the config, just pass the empty array when installing the component globally.
+The [basic-setup](https://codemirror.net/docs/ref/#basic-setup) extension is integrated by default in the vue-codemirror configuration and is intended as a handy helper to quickly set up CodeMirror without having to install and import a lot of standalone packages. If you want to override the default behavior of the config, just pass the empty array when installing the component globally.
 
 ```js
 app.use(VueCodemirror, {

package.json

@@ -1,14 +1,14 @@
 {
   "name": "vue-codemirror",
-  "description": "CodeMirror component for Vue",
-  "version": "5.1.0",
+  "description": "CodeMirror code editor component for Vue",
+  "version": "6.0.0",
   "homepage": "https://github.com/surmon-china/vue-codemirror#readme",
   "license": "MIT",
   "keywords": [
     "vue-codemirror",
     "vue codemirror",
     "vue code editor",
-    "vue web ide"
+    "web IDE vue"
   ],
   "author": {
     "name": "Surmon",
@@ -42,17 +42,18 @@
     "release": ". ./scripts/release.sh"
   },
   "peerDependencies": {
-    "vue": "3.x"
+    "vue": "3.x",
+    "codemirror": "6.x"
   },
   "dependencies": {
-    "codemirror": "6.x",
     "@codemirror/commands": "6.x",
     "@codemirror/language": "6.x",
     "@codemirror/state": "6.x",
     "@codemirror/view": "6.x",
     "csstype": "^2.6.8"
   },
   "devDependencies": {
+    "codemirror": "6.x",
     "@codemirror/lang-cpp": "^6.0.0",
     "@codemirror/lang-html": "^6.0.0",
     "@codemirror/lang-java": "^6.0.0",

src/index.ts

@@ -5,13 +5,6 @@ import { injectGlobalConfig } from './config'
 export type { Props } from './component'
 export { DEFAULT_CONFIG } from './component'
 
-// Stop exports codemirror primitive interface to prevent module domain flooding naming conflicts.
-// export * from 'codemirror'
-// export * from '@codemirror/view'
-// export * from '@codemirror/state'
-// export * from '@codemirror/commands'
-// export * from '@codemirror/language'
-
 export const Codemirror = Component
 export const install: Plugin = (app, defaultConfig?: Props) => {
   app.component(Component.name, Component)