Merge pull request #533 from ckeditor/remove-ckeditor5-premium-featur…

…es-from-peer-dependencies

Fix: Improve ESM support by adding missing file extensions in imports.

Other: Remove `ckeditor5-premium-features` from `peerDependencies`.

Internal: Remove `ckeditor5-premium-features` from `devDependencies`.

.eslintrc.cjs

@@ -36,7 +36,13 @@ module.exports = {
 			' * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.',
 			' * For licensing, see LICENSE.md.',
 			' */'
-		] } ]
+		] } ],
+		'ckeditor5-rules/require-file-extensions-in-imports': [
+			'error',
+			{
+				extensions: [ '.ts', '.js', '.json' ]
+			}
+		],
 	},
 	'settings': {
 		'react': {

demos/cdn-multiroot-react/App.tsx

@@ -4,9 +4,9 @@
  */
 
 import React, { StrictMode, useState } from 'react';
-import MultiRootEditorDemo from './MultiRootEditorDemo';
-import MultiRootEditorRichDemo from './MultiRootEditorRichDemo';
-import ContextMultiRootEditorDemo from './ContextMultiRootEditorDemo';
+import MultiRootEditorDemo from './MultiRootEditorDemo.js';
+import MultiRootEditorRichDemo from './MultiRootEditorRichDemo.js';
+import ContextMultiRootEditorDemo from './ContextMultiRootEditorDemo.js';
 
 type Demo = 'editor' | 'rich' | 'context';
 

demos/cdn-multiroot-react/main.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import App from './App';
+import App from './App.js';
 
 const element = document.getElementById( 'root' ) as HTMLDivElement;
 

demos/cdn-react/App.tsx

@@ -5,10 +5,10 @@
 
 import React, { useState, type ReactNode } from 'react';
 
-import { CKEditorCloudDemo } from './CKEditorCloudDemo';
-import { CKEditorCloudPluginsDemo } from './CKEditorCloudPluginsDemo';
-import { CKEditorCKBoxCloudDemo } from './CKEditorCKBoxCloudDemo';
-import { CKEditorCloudContextDemo } from './CKEditorCloudContextDemo';
+import { CKEditorCloudDemo } from './CKEditorCloudDemo.js';
+import { CKEditorCloudPluginsDemo } from './CKEditorCloudPluginsDemo.js';
+import { CKEditorCKBoxCloudDemo } from './CKEditorCKBoxCloudDemo.js';
+import { CKEditorCloudContextDemo } from './CKEditorCloudContextDemo.js';
 
 const EDITOR_CONTENT = `
 	<h2>Sample</h2>

demos/cdn-react/getCKCdnClassicEditor.ts

@@ -4,7 +4,7 @@
  */
 
 import type { ClassicEditor, Plugin, ContextPlugin, EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';
-import type { CKEditorCloudResult } from '../../src';
+import type { CKEditorCloudResult } from '../../src/index.js';
 
 type ClassicEditorCreatorConfig = {
 	cloud: CKEditorCloudResult;

demos/cdn-react/main.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { App } from './App';
+import { App } from './App.js';
 
 const element = document.getElementById( 'root' ) as HTMLDivElement;
 

demos/npm-multiroot-react/App.tsx

@@ -4,9 +4,9 @@
  */
 
 import React, { StrictMode, useState } from 'react';
-import MultiRootEditorDemo from './MultiRootEditorDemo';
-import MultiRootEditorRichDemo from './MultiRootEditorRichDemo';
-import ContextMultiRootEditorDemo from './ContextMultiRootEditorDemo';
+import MultiRootEditorDemo from './MultiRootEditorDemo.js';
+import MultiRootEditorRichDemo from './MultiRootEditorRichDemo.js';
+import ContextMultiRootEditorDemo from './ContextMultiRootEditorDemo.js';
 
 type Demo = 'editor' | 'rich' | 'context';
 

demos/npm-multiroot-react/main.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import App from './App';
+import App from './App.js';
 
 const element = document.getElementById( 'root' ) as HTMLDivElement;
 

demos/npm-react/App.tsx

@@ -4,8 +4,8 @@
  */
 
 import React, { useState } from 'react';
-import EditorDemo from './EditorDemo';
-import ContextDemo from './ContextDemo';
+import EditorDemo from './EditorDemo.js';
+import ContextDemo from './ContextDemo.js';
 
 type Demo = 'editor' | 'context';
 

demos/npm-react/ContextDemo.tsx

@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 
 import type { Editor } from 'ckeditor5';
 
-import ClassicEditor from './ClassicEditor';
+import ClassicEditor from './ClassicEditor.js';
 import { CKEditor, CKEditorContext } from '../../src/index.js';
 
 declare global {

demos/npm-react/EditorDemo.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useState } from 'react';
-import ClassicEditor from './ClassicEditor';
+import ClassicEditor from './ClassicEditor.js';
 import { CKEditor } from '../../src/index.js';
 
 declare global {

demos/npm-react/main.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import App from './App';
+import App from './App.js';
 
 const element = document.getElementById( 'root' ) as HTMLDivElement;
 

package.json

@@ -29,11 +29,10 @@
   },
   "dependencies": {
     "prop-types": "^15.7.2",
-    "@ckeditor/ckeditor5-integrations-common": "^2.0.0"
+    "@ckeditor/ckeditor5-integrations-common": "^2.1.0"
   },
   "peerDependencies": {
     "ckeditor5": ">=42.0.0 || ^0.0.0-nightly",
-    "ckeditor5-premium-features": ">=42.0.0 || ^0.0.0-nightly",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {

src/ckeditor.tsx

@@ -19,21 +19,21 @@ import type {
 	EditorCreatorFunction
 } from 'ckeditor5';
 
-import type { EditorSemaphoreMountResult } from './lifecycle/LifeCycleEditorSemaphore';
+import type { EditorSemaphoreMountResult } from './lifecycle/LifeCycleEditorSemaphore.js';
 
 import { uid } from '@ckeditor/ckeditor5-integrations-common';
-import { LifeCycleElementSemaphore } from './lifecycle/LifeCycleElementSemaphore';
+import { LifeCycleElementSemaphore } from './lifecycle/LifeCycleElementSemaphore.js';
 
 import {
 	withCKEditorReactContextMetadata,
 	type CKEditorConfigContextMetadata
-} from './context/setCKEditorReactContextMetadata';
+} from './context/setCKEditorReactContextMetadata.js';
 
 import {
 	ContextWatchdogContext,
 	isContextWatchdogInitializing,
 	isContextWatchdogReadyToUse
-} from './context/ckeditorcontext';
+} from './context/ckeditorcontext.js';
 
 const REACT_INTEGRATION_READ_ONLY_LOCK_ID = 'Lock from React integration (@ckeditor/ckeditor5-react)';
 

src/context/ckeditorcontext.tsx

@@ -10,11 +10,11 @@ import React, {
 } from 'react';
 
 import { uid } from '@ckeditor/ckeditor5-integrations-common';
-import { useIsMountedRef } from '../hooks/useIsMountedRef';
+import { useIsMountedRef } from '../hooks/useIsMountedRef.js';
 import {
 	useInitializedCKEditorsMap,
 	type InitializedContextEditorsConfig
-} from './useInitializedCKEditorsMap';
+} from './useInitializedCKEditorsMap.js';
 
 import type {
 	ContextWatchdog,
@@ -109,7 +109,7 @@ const CKEditorContext = <TContext extends Context = Context>( props: Props<TCont
 		// The prevWatchdogInitializationID variable is used to keep track of the previous initialization ID.
 		// It is used to ensure that the state update is performed only if the current initialization ID matches the previous one.
 		// This helps to avoid race conditions and ensures that the correct context watchdog is associated with the component.
-		const watchdogInitializationID = regenerateInitializationID();
+		const watchdogInitializationID = regenerateInitializationID()!;
 		const contextWatchdog = new ContextWatchdogConstructor( context!, watchdogConfig );
 
 		// Handle error event from context watchdog.

src/index.ts

@@ -3,15 +3,15 @@
  * For licensing, see LICENSE.md.
  */
 
-export { default as CKEditor } from './ckeditor';
-export { default as CKEditorContext } from './context/ckeditorcontext';
-export { default as useMultiRootEditor, type MultiRootHookProps, type MultiRootHookReturns } from './useMultiRootEditor';
+export { default as CKEditor } from './ckeditor.js';
+export { default as CKEditorContext } from './context/ckeditorcontext.js';
+export { default as useMultiRootEditor, type MultiRootHookProps, type MultiRootHookReturns } from './useMultiRootEditor.js';
 
-export { default as useCKEditorCloud } from './cloud/useCKEditorCloud';
+export { default as useCKEditorCloud } from './cloud/useCKEditorCloud.js';
 export {
 	default as withCKEditorCloud,
 	type WithCKEditorCloudHocProps
-} from './cloud/withCKEditorCloud';
+} from './cloud/withCKEditorCloud.js';
 
 export {
 	loadCKEditorCloud,

src/lifecycle/LifeCycleEditorSemaphore.ts

@@ -5,7 +5,7 @@
 
 import type { Editor, EditorWatchdog } from 'ckeditor5';
 
-import type { EditorWatchdogAdapter } from '../ckeditor';
+import type { EditorWatchdogAdapter } from '../ckeditor.js';
 import type { LifeCycleElementSemaphore } from './LifeCycleElementSemaphore.js';
 
 export type EditorSemaphoreMountResult<TEditor extends Editor> = {

src/lifecycle/useLifeCycleSemaphoreSyncRef.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useRef, useState, type RefObject } from 'react';
-import type { LifeCycleElementSemaphore, LifeCycleAfterMountCallback } from './LifeCycleElementSemaphore';
+import type { LifeCycleElementSemaphore, LifeCycleAfterMountCallback } from './LifeCycleElementSemaphore.js';
 
 /**
  * When using the `useState` approach, a new instance of the semaphore must be set based on the previous

src/useMultiRootEditor.tsx

@@ -23,16 +23,16 @@ import type {
 	EventInfo
 } from 'ckeditor5';
 
-import { ContextWatchdogContext, isContextWatchdogReadyToUse } from './context/ckeditorcontext';
-import { EditorWatchdogAdapter } from './ckeditor';
+import { ContextWatchdogContext, isContextWatchdogReadyToUse } from './context/ckeditorcontext.js';
+import { EditorWatchdogAdapter } from './ckeditor.js';
 
-import type { EditorSemaphoreMountResult } from './lifecycle/LifeCycleEditorSemaphore';
+import type { EditorSemaphoreMountResult } from './lifecycle/LifeCycleEditorSemaphore.js';
 
-import { useLifeCycleSemaphoreSyncRef, type LifeCycleSemaphoreSyncRefResult } from './lifecycle/useLifeCycleSemaphoreSyncRef';
-import { mergeRefs } from './utils/mergeRefs';
-import { LifeCycleElementSemaphore } from './lifecycle/LifeCycleElementSemaphore';
-import { useRefSafeCallback } from './hooks/useRefSafeCallback';
-import { useInstantEditorEffect } from './hooks/useInstantEditorEffect';
+import { useLifeCycleSemaphoreSyncRef, type LifeCycleSemaphoreSyncRefResult } from './lifecycle/useLifeCycleSemaphoreSyncRef.js';
+import { mergeRefs } from './utils/mergeRefs.js';
+import { LifeCycleElementSemaphore } from './lifecycle/LifeCycleElementSemaphore.js';
+import { useRefSafeCallback } from './hooks/useRefSafeCallback.js';
+import { useInstantEditorEffect } from './hooks/useInstantEditorEffect.js';
 
 const REACT_INTEGRATION_READ_ONLY_LOCK_ID = 'Lock from React integration (@ckeditor/ckeditor5-react)';
 

tests/_utils-tests/context.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import { describe, expect, it } from 'vitest';
-import Context from '../_utils/context';
+import Context from '../_utils/context.js';
 
 describe( 'Context', () => {
 	describe( 'constructor()', () => {

tests/_utils-tests/editor.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import { describe, expect, it } from 'vitest';
-import Editor from '../_utils/editor';
+import Editor from '../_utils/editor.js';
 
 describe( 'Editor', () => {
 	describe( 'constructor()', () => {

tests/cloud/withCKEditorCloud.test.tsx

@@ -10,7 +10,7 @@ import { cleanup, render } from '@testing-library/react';
 import { createDefer } from '@ckeditor/ckeditor5-integrations-common';
 import { removeAllCkCdnResources } from '@ckeditor/ckeditor5-integrations-common/test-utils';
 
-import withCKEditorCloud, { type WithCKEditorCloudHocProps } from '../../src/cloud/withCKEditorCloud';
+import withCKEditorCloud, { type WithCKEditorCloudHocProps } from '../../src/cloud/withCKEditorCloud.js';
 
 describe( 'withCKEditorCloud', () => {
 	const lastRenderedMockProps: MutableRefObject<WithCKEditorCloudHocProps | null> = {

tests/hooks/useAsyncCallback.test.tsx

@@ -5,8 +5,8 @@
 
 import { describe, expect, it, vi } from 'vitest';
 import { renderHook, act, waitFor } from '@testing-library/react';
-import { useAsyncCallback } from '../../src/hooks/useAsyncCallback';
-import { timeout } from '../_utils/timeout';
+import { useAsyncCallback } from '../../src/hooks/useAsyncCallback.js';
+import { timeout } from '../_utils/timeout.js';
 
 describe( 'useAsyncCallback', () => {
 	it( 'should execute the callback and update the state correctly when the callback resolves', async () => {

tests/hooks/useAsyncValue.test.tsx

@@ -5,7 +5,7 @@
 
 import { describe, expect, it } from 'vitest';
 import { renderHook, waitFor } from '@testing-library/react';
-import { useAsyncValue } from '../../src/hooks/useAsyncValue';
+import { useAsyncValue } from '../../src/hooks/useAsyncValue.js';
 
 describe( 'useAsyncValue', () => {
 	it( 'should return a mutable ref object', async () => {

tests/hooks/useInstantEditorEffect.test.tsx

@@ -5,7 +5,7 @@
 
 import { describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
-import { useInstantEditorEffect } from '../../src/hooks/useInstantEditorEffect';
+import { useInstantEditorEffect } from '../../src/hooks/useInstantEditorEffect.js';
 
 describe( 'useInstantEditorEffect', () => {
 	it( 'should execute the provided function after mounting of editor', () => {

tests/hooks/useInstantEffect.test.tsx

@@ -5,7 +5,7 @@
 
 import { describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
-import { useInstantEffect } from '../../src/hooks/useInstantEffect';
+import { useInstantEffect } from '../../src/hooks/useInstantEffect.js';
 
 describe( 'useInstantEffect', () => {
 	it( 'should call the effect function when dependencies change', () => {

tests/hooks/useIsMountedRef.test.tsx

@@ -5,7 +5,7 @@
 
 import { describe, expect, it } from 'vitest';
 import { renderHook } from '@testing-library/react';
-import { useIsMountedRef } from '../../src/hooks/useIsMountedRef';
+import { useIsMountedRef } from '../../src/hooks/useIsMountedRef.js';
 
 describe( 'useIsMountedRef', () => {
 	it( 'should return a mutable ref object', () => {

tests/hooks/useIsUnmountedRef.test.tsx

@@ -5,7 +5,7 @@
 
 import { describe, expect, it } from 'vitest';
 import { renderHook } from '@testing-library/react';
-import { useIsUnmountedRef } from '../../src/hooks/useIsUnmountedRef';
+import { useIsUnmountedRef } from '../../src/hooks/useIsUnmountedRef.js';
 
 describe( 'useIsUnmountedRef', () => {
 	it( 'should return a mutable ref object', () => {

tests/hooks/useRefSafeCallback.test.tsx

@@ -5,7 +5,7 @@
 
 import { expect, it, describe, vi } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
-import { useRefSafeCallback } from '../../src/hooks/useRefSafeCallback';
+import { useRefSafeCallback } from '../../src/hooks/useRefSafeCallback.js';
 
 describe( 'useRefSafeCallback', () => {
 	it( 'should return a function', () => {

tests/lifecycle/LifeCycleElementSemaphore.test.tsx

@@ -5,11 +5,11 @@
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { createDefer } from '../_utils/defer';
+import { createDefer } from '../_utils/defer.js';
 import {
 	LifeCycleElementSemaphore,
 	type LifeCycleAsyncOperators
-} from '../../src/lifecycle/LifeCycleElementSemaphore';
+} from '../../src/lifecycle/LifeCycleElementSemaphore.js';
 
 describe( 'LifeCycleElementSemaphore', () => {
 	let element: HTMLElement;

tests/lifecycle/useLifeCycleSemaphoreSyncRef.test.tsx

@@ -6,8 +6,8 @@
 import { it, describe, expect, vi, beforeEach, afterEach } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
 
-import { LifeCycleElementSemaphore } from '../../src/lifecycle/LifeCycleElementSemaphore';
-import { useLifeCycleSemaphoreSyncRef } from '../../src/lifecycle/useLifeCycleSemaphoreSyncRef';
+import { LifeCycleElementSemaphore } from '../../src/lifecycle/LifeCycleElementSemaphore.js';
+import { useLifeCycleSemaphoreSyncRef } from '../../src/lifecycle/useLifeCycleSemaphoreSyncRef.js';
 
 describe( 'useLifeCycleSemaphoreSyncRef', () => {
 	let semaphore: LifeCycleElementSemaphore<any>;

tests/utils/mergeRefs.test.tsx

@@ -6,7 +6,7 @@
 import type { MutableRefObject } from 'react';
 
 import { describe, expect, it, vi } from 'vitest';
-import { mergeRefs } from '../../src/utils/mergeRefs';
+import { mergeRefs } from '../../src/utils/mergeRefs.js';
 
 describe( 'mergeRefs', () => {
 	it( 'should call the callback ref with the provided value', () => {