Merge pull request #290 from ckeditor/add-umd-build

Feature: Add UMD for better backward compatibility.

MINOR BREAKING CHANGE: Replace the default export with named `CKEditorPlugin` export.

Author: filipsobol

demo/demo.ts

@@ -4,7 +4,7 @@
  */
 
 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';

package.json

@@ -18,10 +18,14 @@
     "ckeditor 5"
   ],
   "type": "module",
+  "main": "./dist/ckeditor.umd.cjs",
+  "module": "./dist/ckeditor.js",
+  "types": "./dist/plugin.d.ts",
   "exports": {
     ".": {
       "types": "./dist/plugin.d.ts",
-      "import": "./dist/ckeditor.js"
+      "import": "./dist/ckeditor.js",
+      "require": "./dist/ckeditor.umd.cjs"
     },
     "./package.json": "./package.json"
   },

src/ckeditor.vue

@@ -23,7 +23,7 @@ import type { Editor, EditorConfig, EventInfo } from 'ckeditor5';
 type EditorType = TEditor extends { create( ...args: any[] ): Promise<infer E> } ? E : never;
 
 defineOptions( {
-	name: 'Ckeditor'
+	name: 'CKEditor'
 } );
 
 const model = defineModel( 'modelValue', { type: String, default: '' } );

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,24 @@ if ( !Vue.version || !Vue.version.startsWith( '3.' ) ) {
 	);
 }
 
-const plugin = {
+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 );
 	}
 };
 
 export {
-	plugin as default,
-	Ckeditor
+	CKEditorPlugin,
+	CKEditor
 };
 
 declare module 'vue' {
 	interface GlobalComponents {
-		Ckeditor: typeof Ckeditor;
+		Ckeditor: typeof CKEditor;
 	}
 }

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: 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

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 CKEditor 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: [ CKEditor ]
+					plugins: [ CKEditorPlugin ]
 				},
 				data: () => ( {
 					editor: TestEditor,

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
 			}

vite.config.ts

@@ -25,15 +25,21 @@ export default defineConfig( {
 		lib: {
 			entry: resolve( __dirname, 'src/plugin.ts' ),
 			name: 'CKEditor',
-			fileName: 'ckeditor',
-			formats: [ 'es' ]
+			fileName: 'ckeditor'
 		},
 
 		rollupOptions: {
 			external: Object.keys( {
 				...pkg.dependencies,
 				...pkg.peerDependencies
-			} )
+			} ),
+
+			output: {
+				globals: {
+					'vue': 'Vue',
+					'lodash-es': '_'
+				}
+			}
 		}
 	},
 

yarn.lock

@@ -6635,7 +6635,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6649,6 +6649,13 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -7352,7 +7359,16 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", [email protected], wrap-ansi@^6.2.0, wrap-ansi@^7.0.0, wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+[email protected], wrap-ansi@^6.2.0, wrap-ansi@^7.0.0, wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==