-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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
Default language (en) is not loading with RequireJS (AMD) #914
Comments
@ma2ciek could you check it? |
Yes, it's a bug. When loading editor's build through The Webpack's UMD looks as follows: (function(e, t) {
'object' == typeof exports && 'object' == typeof module ? module.exports = t() : 'function' == typeof define && define.amd ? define([], t) : 'object' == typeof exports ? exports.BalloonEditor = t() : e.BalloonEditor = t()
}
)('undefined' == typeof self ? this : self, function() {
// Script
} ); So for all options despite AMD, the function with script's body runs synchronously and translations should be added correctly. I didn't know that behavior. |
Do you have an idea for how to workaround this? |
I'm thinking now about some smart reversing, so the translation will be added globally before the editor. I'll make some quick POC. |
We could have something like this: cke-build.js var CKEDITOR_TRANSLATIONS = { 'en': { ... } };
// Script pl.js
And But now I'm unsure about running many editors. If it will affect previous ones as |
TBH, you'd need to remind me how it works now :D Which module exports what and how it's executed by RequireJS. |
Sure ;) Now the workflow is as following:
The English translations are added to the build at the end, so the build for the balloon editor looks like this: (function(e, t) {
'object' == typeof exports && 'object' == typeof module ? module.exports = t() : 'function' == typeof define && define.amd ? define([], t) : 'object' == typeof exports ? exports.BalloonEditor = t() : e.BalloonEditor = t()
}
)('undefined' == typeof self ? this : self, function() {
// Whole code of the CKEditor5 with exported BalloonEditor.
} );
CKEDITOR_TRANSLATIONS.add( 'en', {} ); The RequireJS's define function is called in the second line: |
OK, so the module's wrapping function is executed on demand – when first requiring (aka importing) anything from such a module. Perhaps, the module added by |
But then we'd have to know what's the name of the current AMD module and I'm not sure if that information is available. |
Current AMD modules? What do you mean by "current" and why we'd need to know that? To be clear – I meant that perhaps // Import whatever from there to force its evalutation.
import add from '@ckeditor/ckeditor5-utils/src/translation-service';
CKEDITOR_TRANSLATIONS.add( 'en', {} ); Is it possible? |
Actually, I guess – not. And the reason would be our file split (than lang files are separated), yes? |
I misunderstood your last question. That's not possible due to the fact that all webpack imports with our stuff are resolved and land in the 4th. line - see my snippet above. |
Webpack provides an UMD wrapper, so the code resolved from all imports is actually wrapped in the function, which is later called depending on the runtime - |
#914 (comment) - I've tested that approach and it works, because the |
Yeah, I came to the same conclusion that we can't use CKEDITOR_TRANSLATIONS.pl = Object.assign( CKEDITOR_TRANSLATIONS.pl || {}, ...translations ); |
IMO, we may want to add translations for each language only once. I don't see a use case for the safer version. |
People adding their translations from outside of a build? BTW, what I proposed is exactly what export function add( lang, translations ) {
dictionaries[ lang ] = dictionaries[ lang ] || {};
Object.assign( dictionaries[ lang ], translations );
} And with the whole window.CKEDITOR_TRANSLATIONS = window.CKEDITOR_TRANSLATIONS || {}; I'd keep that. |
Right, so I'll keep the safer version. I'll prepare a PR with the fix. |
I'll add |
I've pushed changes to the CKEditor5WebpackPlugin
MultipleLanguageTranslationService (ckeditor5-dev-utils)Changed body of generated chunks and translations. Now there's something like this at the beginning because RequireJS can load these translations in a different order: '(function(d){' +
`d['${ language }']=Object.assign(` +
`d['${ language }']||{},` +
`${ stringifiedTranslations }` +
')' +
'})(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));' It slightly increases the size of assets, but allows to use both approaches: <script src="translations/pl.js">
<script>requirejs( [ 'ckeditor.js' ], ClassicEditor => {} )</script> <script>requirejs( [ 'ckeditor.js', 'translations/pl.js' ], ClassicEditor => {} )</script> TranslationService (ckeditor5-utils)Removed Builds and samples:We can improve our samples and add |
@Reinmar , @ma2ciek Thanks! I'm testing on the demo site of elFinder to edit the HTML file. It seems work perfectly! |
I'm glad that these changes work for you well :) They should land in the next beta version. |
Your changes look really good. And kudos for the post with the summary. I've got just two questions:
|
It does. If the |
But we don't need a JS file in this case. To make a sample for testing requirejs we need a simple HTML file with no assets (requirejs can be loaded from CDN and CKEditor 5 build from the |
Right. |
Manual tests should depend on the HTML files and the rest should be optional to make it work. The second problem is that with the current implementation all files are moved or compiled to
Right, I almost forgot about it. Webpack's loaders won't touch this code so we should provide somehow the transpiled version if somebody uses babel etc. I think we can achieve this either by:
|
AFAICS, each language file (in a build) will contain just one
It can be simpler than that. We don't need to use the
|
To make it clear – let's not overcomplicate this. We need one test file that we'll use very rarely for this specific case. If we'll find out that this is a recurring problem we can think about a more general solution. |
Other: Removed `translation-service~add()` function in favor of using safer, always available, manual approach to extending `CKEDITOR_TRANSLATIONS` global. See ckeditor/ckeditor5#914. BREAKING CHANGES: The `translation-service~add()` function was removed. See `translation-service` module docs to learn how to add translations.
Fix: Enabled builds to work with RequireJS. Closes ckeditor/ckeditor5#914. BREAKING CHANGES: Due to a new format of translation snippets the new version of `CKEditor5WebpackPlugin` will only be compatible with CKEditor 5 v1.0.0-beta.2 or later.
The new version of Besides, I added two manual tests in |
OK, beta.2 (and beta.3 in case of builds) is out and builds will work fine with RequireJS now. |
👍 OK, Thanks! but CDN items (ex. https://cdn.ckeditor.com/ckeditor5/1.0.0-beta.2/classic/ckeditor.js) are not found. |
Turns out that CDN isn't updated yet. Working on this. |
* Feature: Added the image upload button to the build. See ckeditor/ckeditor5#870. * Internal: Build. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v1.0.0-beta.1. * Internal: Updated links to CKEditor 5 website. [skip ci] * Docs: Typo in README fixed. [skip ci] * Removed duplicated "ImageUpload" plugin. * Internal: Updated dependencies. * Tests: Added manual tests for translating editors. See ckeditor/ckeditor5#914. * Internal: Build. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v1.0.0-beta.2. * Fix: Translations should work when CKEditor was loaded using RequireJS. See ckeditor/ckeditor5-dev#914. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Build. * Release: v1.0.0-beta.3. * Docs: Fixed link in the readme. [skip ci] * Docs: Mentioned previous release in the changelog. [skip ci] * Internal: Updated keywords. [skip ci] * Internal: Build. * Internal: Fixed keywords. [skip ci] * Internal: Improved license file. * Docs: Changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v1.0.0-beta.4. * Other: Changed the license to GPL2+ only. See ckeditor/ckeditor5#991. BREAKING CHANGE: The license under which CKEditor 5 is released has been changed from a triple GPL, LGPL and MPL license to a GPL2+ only. See ckeditor/ckeditor5#991 for more information. * Internal: Updated dependencies. * Internal: Build. * Docs: Changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v10.0.0. * Docs: Changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v10.0.1. * Adjusted code to the changes in ckeditor5-editor-classic. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Build. * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v10.1.0. * Switched to webpack@4.12 and UglifyJsWebpackPlugin. * Switched back to banner with exclamation mark. * Webpack up. * Bump, bump. * Hide unnecessary warnings. * Improved comments. * Internal: Upgraded version of Node.js. See ckeditor/ckeditor5-dev#417. * Docs: Improved the package description. * Docs: Improved keywords and the readme. [skip ci] * Internal: Aligned code to changes in ckeditor5-core. See ckeditor/ckeditor5-core#140. * Internal: Build. * Other: Changed the build structure. TODO. Closes ckeditor/ckeditor5#1038. * Internal: Build. * Internal: Build. * Internal: Build. * Internal: Build. * Internal: Build. * Removed unnecessary comment in `webpack.config.js`. * Internal: Further builds simplifications plus some comments. * Internal: Build. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v11.0.0. * Internal: Build. * Internal: Build. * Docs: Changelog. [skip ci] * Internal: Build. * Release: v11.0.1. * Docs: Changed links to documentation. See ckeditor/ckeditor5#1192. * Internal: Upgraded dependencies. * Docs: Changed links to documentation. See ckeditor/ckeditor5#1192. * Upgraded version of ESLint. * Added build screenshot to README.md. * Added Media Embed and Table features to the build. * Internal: Build. * Tests: Updated build tests to the new toolbar configuration. * Internal: Build. * That option got renamed in the meantime. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v11.1.0. [skip ci] * Docs: Fixed invalid merge in the readme. * Docs: Changelog. [skip ci] * Internal: Build. * Release: v11.1.1. [skip ci] * Docs: Made contributing guide link to our docs. [skip ci] * Feature: Introduced the Paste From Office feature. * Feature: Introduced the CKFinder integration plugin. * Internal: Build. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v11.2.0. [skip ci] * Introduced a linter and Travis. * Added a configuration for ESLint. * Directory created by Mgit on CI must be ignored as well. * Code style in tests. * Update raw-loader dependency. * Aligned Travis configuration after switching to Yarn. See ckeditor/ckeditor5#1214. * Docs: Added build status badges to the README. See: ckeditor/ckeditor5#1236. * Fixed formatting in Travis configuration file. * Updated deps. * Add memory leak test. * Add missing ckeditor5-core dependency. * Internal: Bumped the year. [skip ci] * Upgraded version of husky. * Other: Upgraded minimal versions of Node and npm. See: ckeditor/ckeditor5#1507. * Internal: Updated deps. * Internal: Build. * Internal: Build. * Docs: Updated the homepage link. [skip ci] * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v12.0.0. [skip ci] * Internal: Removed unnecessary and added missing deps. * Internal: Introduced Slack Notifications for this repository on CI. * Internal: Build. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v12.1.0. [skip ci] * Internal: Changed a way how to install Chrome on Travis. [skip ci] * Internal: Updated the license header. See ckeditor/ckeditor5#1557. [skip ci] * Internal: Build. * Internal: Updated license section in README. See ckeditor/ckeditor5#1557. [skip ci] * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v12.2.0. [skip ci] * Removed BrowserStack from the repository. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v12.3.0. [skip ci] * Internal: Ping CI. * Internal: Bumped up deps. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v12.3.1. [skip ci] * All tests require an image that exists. It will not cause the 404 error. * Bumped style-loader to v1.0.0. Aligned the webpack config to the new loader API. * Bumped up raw-loader, uglifyjs-webpack-plugin, webpack, and webpack-cli dependencies. * Internal: Build. * Internal: Build. * Other: Changed the URL under bugs key in package.json file. Now we have one issue tracker. See ckeditor/ckeditor5#1988. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v12.4.0. [skip ci] * Internal: Make CI green. * Docs: Removed gitter badge. See ckeditor/ckeditor5#2037. [skip ci] * Internal: Upgraded CI environment to use Xenial version of the distro. See ckeditor/ckeditor#2041. * Feature: Enabled the indent feature in the build. * Internal: Build. * Tests: Updated the test. * Internal: Build. * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v15.0.0. [skip ci] * Internal: Make CI green. * Internal: Updated the GitHub PR template because all packages share the same issue tracker now (see ckeditor/ckeditor5#5576). * Internal: Enabled stylelint in the package. * Internal: Allowed empty input in the stylelint script to avoid errors when no files are found. Added missing stylelint-config-recommended dependency. * Internal: Added the stylelintrc config. [skip ci] * Used the external stylelint-config-ckeditor5 package for stylelint configuration. * Replaced UglifyJS with Terser. * Internal: Build. * Internal: Added a missing pacakge dev-dependencies. See ckeditor/ckeditor5#5856. * Internal: Made the error initialization catch statements more informative. * Minor improvements to error messages used in manual tests and a sample. [skip ci] * Docs: Changelog. [skip ci] * Docs: Corrected the changelog. [skip ci] * Internal: Updated dependencies. [skip ci] * Internal: Build. * Release: v16.0.0. [skip ci] * Internal: Make CI green. * Internal: Added blog post URL. [skip ci] * Internal: Fixed blog post URL for the 11.0.0 release. [skip ci] * Internal: Added config for package.json to .editorconfig. See #318. * Internal: Bumped the year. [skip ci] Co-authored-by: Piotrek Koszuliński <pkoszulinski@gmail.com> Co-authored-by: Kamil Piechaczek <pomek@users.noreply.github.com> Co-authored-by: Anna Tomanek <a.tomanek@cksource.com> Co-authored-by: Maciej Bukowski <ma2ciek@gmail.com> Co-authored-by: Aleksander Nowodzinski <a.nowodzinski@cksource.com> Co-authored-by: Damian Konopka <dk@damiankonopka.pl> Co-authored-by: Maciej <jodator@jodator.net> Co-authored-by: Marek Lewandowski <mlewand@users.noreply.github.com>
Is this a bug report or feature request? (choose one)
🐞 Bug report
💻 Version of CKEditor
CKEditor 5 build v1.0.0-beta.1
📋 Steps to reproduce
❎ Actual result
Uncaught ReferenceError: CKEDITOR_TRANSLATIONS is not defined at ckeditor.js:7
The text was updated successfully, but these errors were encountered: