Merge pull request #292 from ckeditor/revert-renames-of-exports

Other: Rename exports to improve name of the editor component in Vue. MINOR BREAKING CHANGE: Rename main package exports to `CkeditorPlugin` and `Ckeditor`.
ckeditor · Jul 16, 2024 · fac4482 · fac4482
2 parents 93049a2 + dc58bc9
commit fac4482
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 16 deletions.
diff --git a/demo/demo.ts b/demo/demo.ts
@@ -4,11 +4,11 @@
  */
 
 import { createApp } from 'vue';
-import { CKEditorPlugin } from '../src/plugin.js';
+import { CkeditorPlugin } from '../src/plugin.js';
 import App from './App.vue';
 
 import 'ckeditor5/ckeditor5.css';
 
 createApp( App )
-	.use( CKEditorPlugin )
+	.use( CkeditorPlugin )
 	.mount( '#app' );
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -5,7 +5,7 @@
 
 /* eslint-env browser */
 import * as Vue from 'vue';
-import CKEditor from './ckeditor.vue';
+import Ckeditor from './ckeditor.vue';
 
 /* istanbul ignore if -- @preserve */
 if ( !Vue.version || !Vue.version.startsWith( '3.' ) ) {
@@ -16,24 +16,31 @@ if ( !Vue.version || !Vue.version.startsWith( '3.' ) ) {
 	);
 }
 
-const CKEditorPlugin = {
+const CkeditorPlugin = {
 	/**
 	 * Installs the plugin, registering the `<ckeditor>` component.
 	 *
 	 * @param app The application instance.
 	 */
 	install( app: Vue.App ): void {
-		app.component( 'Ckeditor', CKEditor );
+		app.component( 'Ckeditor', Ckeditor );
 	}
 };
 
+/**
+ * The component is exported as `Ckeditor` and not `CKEditor`, because of how Vue handles components with
+ * capitalized names. The component with more than one consecutive capital letter will also be be available
+ * in kebab-case, where each capital letter is separated by `-`. This way, the `CKEditor` component will
+ * be available as `c-k-editor`, which doesn't look good.
+ */
 export {
-	CKEditorPlugin,
-	CKEditor
+	CkeditorPlugin,
+	Ckeditor
 };
 
 declare module 'vue' {
 	interface GlobalComponents {
-		Ckeditor: typeof CKEditor;
+		Ckeditor: typeof Ckeditor;
+		ckeditor: typeof Ckeditor;
 	}
 }
diff --git a/tests/ckeditor.test.ts b/tests/ckeditor.test.ts
@@ -6,7 +6,7 @@
 import { nextTick } from 'vue';
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
-import { CKEditor } from '../src/plugin.ts';
+import { Ckeditor } from '../src/plugin.ts';
 import {
 	MockEditor,
 	ModelDocument,
@@ -26,7 +26,7 @@ describe( 'CKEditor component', () => {
 	} );
 
 	it( 'should have a name', () => {
-		expect( CKEditor.name ).to.equal( 'CKEditor' );
+		expect( Ckeditor.name ).to.equal( 'CKEditor' );
 	} );
 
 	it( 'should print a warning if the "window.CKEDITOR_VERSION" variable is not available', async () => {
@@ -251,7 +251,7 @@ describe( 'CKEditor component', () => {
 
 				const component = mount( {
 					components: {
-						ckeditor: CKEditor
+						Ckeditor
 					},
 					data: () => ( {
 						editor: MockEditor,
@@ -524,7 +524,7 @@ describe( 'CKEditor component', () => {
 } );
 
 function mountComponent( props: Record<string, any> = {} ) {
-	return mount( CKEditor, {
+	return mount( Ckeditor, {
 		props: {
 			editor: MockEditor,
 			...props

diff --git a/tests/plugin/integration.test.ts b/tests/plugin/integration.test.ts
@@ -6,7 +6,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
-import { CKEditorPlugin } from '../../src/plugin.js';
+import { CkeditorPlugin } from '../../src/plugin.js';
 
 describe( 'CKEditor plugin', () => {
 	it( 'should work with an actual editor build', async () => {
@@ -40,7 +40,7 @@ describe( 'CKEditor plugin', () => {
 			{
 				attachTo: domElement,
 				global: {
-					plugins: [ CKEditorPlugin ]
+					plugins: [ CkeditorPlugin ]
 				},
 				data: () => ( {
 					editor: TestEditor,

diff --git a/tests/plugin/localcomponent.test.ts b/tests/plugin/localcomponent.test.ts
@@ -6,7 +6,7 @@
 import { nextTick } from 'vue';
 import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
-import { CKEditor } from '../../src/plugin.js';
+import { Ckeditor } from '../../src/plugin.js';
 import { MockEditor } from '../_utils/mockeditor';
 
 class FooEditor extends MockEditor {}
@@ -15,7 +15,7 @@ describe( 'CKEditor plugin', () => {
 	it( 'should work when the component is used locally', async () => {
 		window.CKEDITOR_VERSION = '42.0.0';
 
-		const firstComponent = mount( CKEditor, {
+		const firstComponent = mount( Ckeditor, {
 			props: {
 				editor: FooEditor
 			}