search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.61k stars 3.7k forks source link

Bundle for browseers #4659

Closed mariusrak closed 5 years ago

mariusrak commented 5 years ago

Hi, would it be possible to transpile source so current browsers would be able to run it without custom transpilation? Transpiling all the node_modules in a project would be big overhead so usually modules comes transpiled. Thanks.

ma2ciek commented 5 years ago

Hi, @mariusrak,

We use ES6 syntax which is supported well by modern browsers ;) Could you describe better the problem you have?

mariusrak commented 5 years ago

I bundle the code with other packages but don't transpile them, since all of them are already transpiled (also build for CKE5 classic). But when I use mentions package i get error, that imports are allowed only for top level which with transpilation and bundling will never be the case.

ma2ciek commented 5 years ago

But you should bundle the code using webpack or another similar tool. Most of the modern libraries use imports and that allows us to create modular and independent code. Please see Installing plugins guide.

mariusrak commented 5 years ago

I'm using meteor for bundling code. And all of packages I've used are bundled and used without a problem because they're pre-transpiled to compatibile code. Transpaling all node_modules is giant overhead and its usually not done. Usually packages are distributed with pre-transpiled code.

Later I've installed plugin by compiling whole build but this approach is absolutelly ineffective and I think it's even not standard way that a user should compile a build.

You could make one pre-commit hook which would run bundling of the code for es5, put it into ./dist and set main in package.json to this build. There's really no more work for next upgrades of plugin and saves great time for users. You can still keep high modularity and keep users smiling.

ma2ciek commented 5 years ago

I'm using meteor for bundling code. And all of packages I've used are bundled and used without a problem because they're pre-transpiled to compatibile code. Transpaling all node_modules is giant overhead and its usually not done. Usually packages are distributed with pre-transpiled code.

Maybe it's a Meteor problem since it can't resolve ES6 imports. I'm not telling that you should transpile all node_modules. But you should bundle them using e.g. webpack which understand how to resolve those imports. We don't use Babel to transpile anything in our demos.

You could make one pre-commit hook which would run bundling of the code for es5, put it into ./dist and set main in package.json to this build. There's really no more work for next upgrades of plugin and saves great time for users. You can still keep high modularity and keep users smiling.

No, we can't serve the ES5 version of plugins.

ma2ciek commented 5 years ago

And note that CKEditor 5 builds are NOT transpiled to ES5. They're ES6, they use const, class keywords, etc. The only difference is that these build provides bundled code without import or export keywords.

mariusrak commented 5 years ago

And note that CKEditor 5 builds are NOT transpiled to ES5. They're ES6, they use const, class keywords, etc. The only difference is that these build provides bundled code without import or export keywords.

Well I guess that's the point, not using the import keyword. I'm all for modular architecture. But current solution lowers modularity. For every new plugin there's need to recompile build. My initial understanding was that I'd simply npm install the mention plugin and in existing build I'll just configure to use imported plugin. But currently it is not possible, I'd need to rebuild plugin code to remove the import keyword.

So how it would be possible to achieve this level of modularity, where I can simply npm install and configure without necessity to recompile editor build?

I don't think that switching from meteor to webpack is a solution. And imports has to be transpiled since browsers don't allow them to be called in some function. Therefore webpack is compiling all node_modules. While meteor is only packing them in bundle. At least that's how I understand the situation.

Our architecture is modular, with the bundled plugin we'd have to include all files in the one file. It's won't be modular anymore.

No, I don't mean to bundle all plugins in some sort of giant plugin bag. I mean to build a plugin s when I do require('plugin') I get one function which does the stuff. This would be then configurable in any CKE build.