Merge pull request #281 from ckeditor/migrate-to-esm

Fix: Use type of the passed `editor` prop rather than generic `Editor` type. Closes #282.

Internal: Migrate from webpack and Karma to Vite and Vitest. See ckeditor/ckeditor5#16616.

MINOR BREAKING CHANGE: Migrate to ESM. See ckeditor/ckeditor5#16616.

MINOR BREAKING CHANGE: Migrate to Composition API. Closes #172.

MINOR BREAKING CHANGE: Bump required version to Vue 3.4+. See #282.

MINOR BREAKING CHANGE: Export the component as `Ckeditor` instead of `default.component`. Closes #284.

MINOR BREAKING CHANGE: Remove argument from the `destroy` event, as it was always `null`. Closes #283.

.circleci/config.yml

@@ -68,11 +68,11 @@ jobs:
           name: Execute ESLint
           command: yarn run lint
       - run:
-          name: Run unit tests
-          command: yarn run coverage --browsers=Chrome,Firefox
+          name: Run unit tests with coverage
+          command: yarn run test
       - run:
           name: Build demo app
-          command: node ./scripts/test-demo.js
+          command: yarn run build
       - run:
          name: Verify the code coverage
          command: |

.eslintrc.js → .eslintrc.cjs

@@ -24,14 +24,14 @@ module.exports = {
 			' * For licensing, see LICENSE.md.',
 			' */'
 		] } ],
-		'vue/multi-word-component-names': 'off'
+		'vue/multi-word-component-names': 'off',
+		'no-unused-vars': 'off',
+		'@typescript-eslint/no-unused-vars': [ 'error' ]
 	},
 	'overrides': [
 		{
 			'files': [
-				'demo/**/*.js',
-				'demo/**/*.ts',
-				'demo/**/*.vue'
+				'**/*.vue'
 			],
 			'rules': {
 				'ckeditor5-rules/license-header': 'off'

README.md

@@ -25,78 +25,58 @@ See the ["Rich text editor component for Vue.js"](https://ckeditor.com/docs/cked
 After cloning this repository, install necessary dependencies:
 
 ```bash
-yarn install
+npm install
 ```
 
-### Executing tests
-
-```bash
-yarn run test -- [additional options]
-# or
-yarn t -- [additional options]
-```
+You can also use [Yarn](https://yarnpkg.com/).
 
-The command accepts the following options:
+### Running the development server
 
-* `--coverage` (`-c`) – Whether to generate the code coverage.
-* `--source-map` (`-s`) – Whether to attach the source maps.
-* `--watch` (`-w`) – Whether to watch test files.
-* `--reporter` (`-r`) – Reporter for Karma (default: `mocha`, can be changed to `dots`).
-* `--browsers` (`-b`) – Browsers that will be used to run tests (default: `Chrome`, available: `Firefox`).
+To manually test the editor integration, you can start the development server using one of the commands below:
 
-If you are going to change the component (`src/ckeditor.js`) or plugin (`src/plugin.js`) files, remember about rebuilding the package. You can use `yarn run develop` in order to do it automatically.
+```bash
+npm run dev
+```
 
-### Building the package
+### Executing tests
 
-Build a minified version of the package that is ready to publish:
+To test the editor integration against a set of automated tests, run the following command:
 
 ```bash
-yarn run build
+npm run test
 ```
 
-### Changelog generator
+If you want to run the tests in watch mode, use the following command:
 
 ```bash
-yarn run changelog
+npm run test:watch
 ```
 
-### Testing component with Vue CLI
+### Building the package
 
-When symlinking the component in an application generated using [Vue CLI](https://cli.vuejs.org/), make sure your `vue.config.js` file configures webpack in the following way:
+To build the package that is ready to publish, use the following command:
 
-```js
-module.exports = {
-	configureWebpack: {
-		resolve: {
-			symlinks: false
-		}
-	}
-};
+```bash
+npm run build
 ```
 
-Otherwise, the application will fail to load the component correctly and, as a result, it will throw a build error.
-
 ## Releasing package
 
 ### Prerequisites
 
 Before releasing a new version, run a demo project to confirm that the integration works in a real-world scenario.
 
-1. Navigate to the `demo` folder.
-2. Reinstall the dependencies.
-3. Run `yarn dev` to see if the integration works as expected.
-4. Run `yarn build` to see if the project with the integration builds without errors.
-
-```Text
-Dependencies in the `demo` project need to be reinstalled after any changes to the integration, because in `package.json` we use `file:` instead of `link:` due to Vite limitations. Unlike `link:`, which creates a symlink to the integration, `file:` copies its contents when `yarn install` is run and never updates after that.
-```
+1. Reinstall the dependencies.
+2. Run `npm run dev` to see if the integration works as expected.
+3. Run `npm run test` to see if the project passes all automated tests.
+4. Run `npm run build` to see if the project with the integration builds without errors.
 
 ### Changelog
 
 Before starting the release process, you need to generate the changelog:
 
 ```bash
-yarn run changelog
+npm run changelog
 ```
 
 ### Publishing
@@ -106,13 +86,13 @@ After generating the changelog, you are able to release the package.
 First, you need to bump the version:
 
 ```bash
-yarn run release:prepare-packages
+npm run release:prepare-packages
 ```
 
 After bumping the version, you can publish the changes:
 
 ```bash
-yarn run release:publish-packages
+npm run release:publish-packages
 ```
 
 Note: The `release/` directory will be published.

demo/src/App.vue → demo/App.vue

@@ -38,25 +38,23 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import {
-  ClassicEditor,
-  Essentials,
-  Paragraph,
-  Heading,
-  Bold,
-  Italic,
-  type EventInfo
+	ClassicEditor,
+	Essentials,
+	Paragraph,
+	Heading,
+	Bold,
+	Italic,
+	type EventInfo
 } from 'ckeditor5';
 
-import 'ckeditor5/ckeditor5.css';
-
 class TestEditor extends ClassicEditor {
-  static builtinPlugins = [
-    Essentials,
-    Paragraph,
-    Heading,
-    Bold,
-    Italic,
-  ];
+	static builtinPlugins = [
+		Essentials,
+		Paragraph,
+		Heading,
+		Bold,
+		Italic
+	];
 }
 
 // State
@@ -70,7 +68,7 @@ const config = reactive( {
 
 // Methods
 function setEditorData() {
-  data.value = editorInstance.value?.getData() ?? '';
+	data.value = editorInstance.value?.getData() ?? '';
 }
 
 function toggleTwoWayBinding() {
@@ -82,7 +80,7 @@ function toggleEditorDisabled() {
 }
 
 function onReady( editor: TestEditor ) {
-  editorInstance.value = editor;
+	editorInstance.value = editor;
 
 	console.log( 'Editor is ready.', { editor } );
 }
@@ -99,8 +97,8 @@ function onInput( data: string, event: EventInfo, editor: TestEditor ) {
 	console.log( 'Editor data input.', { event, editor, data } );
 }
 
-function onDestroy( editor: TestEditor ) {
-	console.log( 'Editor destroyed.', { editor } );
+function onDestroy() {
+	console.log( 'Editor destroyed.' );
 }
 </script>
 

demo/demo.ts

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { createApp } from 'vue';
+import CKEditorPlugin from '../src/plugin.js';
+import App from './App.vue';
+
+import 'ckeditor5/ckeditor5.css';
+
+createApp( App )
+	.use( CKEditorPlugin )
+	.mount( '#app' );