A bit confusing syntax required for RequireJS

[wwalc]

While playing with RequireJS and CKEditor 5 to validate the API docs I found that using CKEditor is quite counterintuitive:

https://github.com/wwalc/ckeditor5-test-requirejs/blob/master/scripts/app/main.js#L4

In short, the following code works:

	const ClassicEditor = require( 'ckeditor' );

	ClassicEditor.ClassicEditor
		.create( document.querySelector( '#text-editor' ) )

I was expecting something like

	const ClassicEditor = require( 'ckeditor' );

	ClassicEditor
		.create( document.querySelector( '#text-editor' ) )

[Reinmar]

The least confusing way to import would be this:

	const ClassicEditor = require( 'ckeditor' ).ClassicEditor;

I thought that it's not possible, but it turns out that it is, to turn just one export of a module into a library. Right now, we're wrapping the entire module, so require( 'ckeditor' ) gives you the module object. I pushed an example how we can change Webpack configuration to proper-export. It seems to work and will make this correct:

// In CommonJS environment.
const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic/build/ckeditor.js' );
ClassicEditor.create; // [Function]

// If AMD is present, you can do this.
require( '/(ckeditor path)/build/ckeditor.js', ClassicEditor => {
    ClassicEditor.create; // [Function]
} );

// As a global.
ClassicEditor.create; // [Function]

// As an ES6 module (if using webpack or Rollup).
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';
ClassicEditor.create; // [Function]

[Reinmar]

Nope, one correction:

// In CommonJS environment.
const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic/build/ckeditor.js' ).default;
ClassicEditor.create; // [Function]

[Reinmar]

And you'd need to validate Requirejs, @wwalc.

[Reinmar]

If the AMD case will be fine, then I'd only check how we can get rid of that default in case of CJS ;\

[wwalc]

@Reinmar proper-export@ce22096 gave me the following results with RequireJS:

build/ckeditor.js taken as is from proper-export requires this syntax (with .default added):

define(function (require) {
	const ClassicEditor = require( 'ckeditor' ).default;

	ClassicEditor
		.create( document.querySelector( '#text-editor' ) );
...

However, when I rebuilt editor by myself from the proper-export branch with npm run build-ckeditor I got the right (?) result (note: I checked just RequireJS):

define(function (require) {
	const ClassicEditor = require( 'ckeditor' );

	ClassicEditor
		.create( document.querySelector( '#text-editor' ) );
...

The funniest thing happened when I run npm run build to rebuild CKEditor, it stopped working completely with RequireJS:

define(function (require) {
	const ClassicEditor = require( 'ckeditor' );
	console.log(ClassicEditor); // undefined
...

[Reinmar]

The funniest thing happened when I run npm run build to rebuild CKEditor, it stopped working completely with RequireJS:

npm run build resets the ckeditor.js to its initial state so it reverts part of the changes.

[Reinmar]

Changed in:

• ckeditor/ckeditor5-build-balloon@599ab22
• ckeditor/ckeditor5-build-inline@5f64e7d
• ckeditor/ckeditor5-build-classic@e5c7511