New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A bit confusing syntax required for RequireJS #545

Closed
wwalc opened this Issue Sep 6, 2017 · 7 comments

Comments

Projects
None yet
2 participants
@wwalc
Copy link
Member

wwalc commented Sep 6, 2017

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

This comment has been minimized.

Copy link
Member

Reinmar commented Sep 6, 2017

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

This comment has been minimized.

Copy link
Member

Reinmar commented Sep 6, 2017

Nope, one correction:

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

This comment has been minimized.

Copy link
Member

Reinmar commented Sep 6, 2017

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

@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Sep 6, 2017

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

This comment has been minimized.

Copy link
Member Author

wwalc commented Sep 6, 2017

@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

This comment has been minimized.

Copy link
Member

Reinmar commented Sep 7, 2017

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 Reinmar self-assigned this Sep 7, 2017

Reinmar added a commit to ckeditor/ckeditor5-build-balloon that referenced this issue Sep 7, 2017

Merge branch t/ckeditor5/545
Other: The build now defines the editor as its default export. This makes requiring the build easier when using AMD, CJS or ES6 modules. See ckeditor/ckeditor5#545.

BREAKING CHANGE: The build now defines a default export instead of named export. See ckeditor/ckeditor5#545.

Reinmar added a commit to ckeditor/ckeditor5-build-inline that referenced this issue Sep 7, 2017

Merge branch t/ckeditor5/545
Other: The build now defines the editor as its default export. This makes requiring the build easier when using AMD, CJS or ES6 modules. See ckeditor/ckeditor5#545.

BREAKING CHANGE: The build now defines a default export instead of named export. See ckeditor/ckeditor5#545.

Reinmar added a commit to ckeditor/ckeditor5-build-classic that referenced this issue Sep 7, 2017

Merge branch t/ckeditor5/545
Other: The build now defines the editor as its default export. This makes requiring the build easier when using AMD, CJS or ES6 modules. See ckeditor/ckeditor5#545.

BREAKING CHANGE: The build now defines a default export instead of named export. See ckeditor/ckeditor5#545.

@Reinmar Reinmar closed this Sep 7, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment