Why does index.js of e.g. cke5-paragraph looks different than that of cke5-highlight

[Reinmar]

Form A:

• https://github.com/ckeditor/ckeditor5/blob/5201dc2/packages/ckeditor5-clipboard/src/index.js#L1
• https://github.com/ckeditor/ckeditor5/blob/5201dc2/packages/ckeditor5-paragraph/src/index.js#L1

Form B:

• https://github.com/ckeditor/ckeditor5/blob/5201dc2/packages/ckeditor5-highlight/src/index.js#L1
• https://github.com/ckeditor/ckeditor5/blob/5201dc2/packages/ckeditor5-image/src/index.js#L1

I remember something that we tried to change all B occurrences into A or vice versa but it didn't work. It'd be good to know why.

[psmyrek]

AFAIK, in our core plugins (Paragraph, Clipboard, and others from /src) we are re-exporting all named exports:

export * from '@ckeditor/ckeditor5-paragraph';

so this is why we are using named exports (but not default export) in the original sources of these plugins, i.e. packages/ckeditor5-paragraph/src/index.js:

export { default as Paragraph } from './paragraph';
export { default as ParagraphButtonUI } from './paragraphbuttonui';

In the Paragraph plugin after changing exports from:

export { default as Paragraph } from './paragraph';
export { default as ParagraphButtonUI } from './paragraphbuttonui';

to:

import Paragraph from './paragraph';
import ParagraphButtonUI from './paragraphbuttonui';

export {
    Paragraph,
    ParagraphButtonUI
};

all seems to work just fine. But still, this is not a default export, like in other non-core plugins (e.g. Highlight).

AFAIK, it is currently not possible to re-export a default export, because this is currently a Stage 1 Proposal: https://github.com/tc39/proposal-export-default-from.

[Reinmar]

The following version is better:

export { default as Clipboard } from './clipboard';
export { default as PastePlainText } from './pasteplaintext';

as it makes more sense to have two names exports rather than having one object exported from e.g. highlight:

import Highlight from './highlight';
import HighlightEditing from './highlightediting';
import HighlightUI from './highlightui';

export default {
	Highlight,
	HighlightEditing,
	HighlightUI
};

Ideally, all packages should use the same format that's used in e.g. ckeditor5-pararaph. A question remains – why non-DLL packages use an object?

One hyphotesis is that it's because exposing things to CKEditor5 global.

There are two methods that we use currently - one for DLLs and one for non-DLLs. The former is defined in webpack.config.dll.js. The latter in https://github.com/ckeditor/ckeditor5-dev/blob/master/packages/ckeditor5-dev-utils/lib/builds/getdllpluginwebpackconfig.js#L36-L43.

We should check whether using the multiple named exports notation in non-DLLs packages is supported by this webpack's library notation. If not, we could also try to use the same (or similar) webpack configuration method that we use for DLLs.

[Reinmar]

If we won't manage to figure out how to unify these index.js files, let's at least document how they should look (and why this way) in the DLL builds guide. There will be a section about writing DLL-compatible plugins.

[Reinmar]

Just stumbled upon this again, but from a different angle.

WE had a short chat about this with @pomek:

Basically, IIRC we went with an object so globalization works out of the box, just like I wrote in one of the above comments:

One hyphotesis is that it's because exposing things to CKEditor5 global.

But I think we need to revisit this. It's too ugly.

[pomek]

I do not remember every decision we made regarding the DLL topic, so maybe the proposed solution may break something somewhere, but it resolves the main problem.

As I already mentioned, I suggested changing the default object export with re-exporting modules. So, replace the following content:

ckeditor5/packages/ckeditor5-basic-styles/src/index.js

Lines 32 to 54 in dbc9133

	export default {
	Bold,
	BoldEditing,
	BoldUI,
	Code,
	CodeEditing,
	CodeUI,
	Italic,
	ItalicEditing,
	ItalicUI,
	Strikethrough,
	StrikethroughEditing,
	StrikethroughUI,
	Subscript,
	SubscriptEditing,
	SubscriptUI,
	Superscript,
	SuperscriptEditing,
	SuperscriptUI,
	Underline,
	UnderlineEditing,
	UnderlineUI
	};

with

export { default as Bold } from './bold';
export { default as BoldEditing } from './bold/boldediting';
export { default as BoldUI } from './bold/boldui';
export { default as Code } from './code';
export { default as CodeEditing } from './code/codeediting';
export { default as CodeUI } from './code/codeui';
export { default as Italic } from './italic';
export { default as ItalicEditing } from './italic/italicediting';
export { default as ItalicUI } from './italic/italicui';
export { default as Strikethrough } from './strikethrough';
export { default as StrikethroughEditing } from './strikethrough/strikethroughediting';
export { default as StrikethroughUI } from './strikethrough/strikethroughui';
export { default as Subscript } from './subscript';
export { default as SubscriptEditing } from './subscript/subscriptediting';
export { default as SubscriptUI } from './subscript/subscriptui';
export { default as Superscript } from './superscript';
export { default as SuperscriptEditing } from './superscript/superscriptediting';
export { default as SuperscriptUI } from './superscript/superscriptui';
export { default as Underline } from './underline';
export { default as UnderlineEditing } from './underline/underlineediting';
export { default as UnderlineUI } from './underline/underlineui';

Unfortunately, CKEditor5.basicStyles is undefined now.

I decided to see what webpack built.

The build exports the default module:

When the export was defined as export default { /* ... */ }, it worked. After changing it to re-exports, it does not make sense because we don't export the default property anymore.

It means that I had to analyze the webpack configuration.

I found this:

output: {
	library: [ 'CKEditor5', getGlobalKeyForPackage( packageName ) ],

	path: path.join( options.packagePath, 'build' ),
	filename: getIndexFileName( packageName ),
	libraryTarget: 'window',
	libraryExport: 'default'
},

The libraryExport shouldn't be here. After removing it and rebuilding DLLs, CKEditor5.basicStyles exports Module (the same as the core-dll packages):

I guess it resolves the issue.