From 612e6972db79b4340b6f816c76b20f4c11a59cc5 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Tue, 12 Feb 2019 17:19:15 +0100 Subject: [PATCH 1/4] Added template-comment-loader to the snippetAdapter webpack configuration. --- scripts/docs/snippetadapter.js | 10 +++++-- scripts/docs/template-comment-loader.js | 37 +++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 scripts/docs/template-comment-loader.js diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index d46c90c821b..868c812497a 100644 --- a/scripts/docs/snippetadapter.js +++ b/scripts/docs/snippetadapter.js @@ -27,7 +27,8 @@ module.exports = function snippetAdapter( data ) { entry: data.snippetSource.js, outputPath, language: snippetConfig.language, - production: data.options.production + production: data.options.production, + templateCommentLoaderConfig: data.options.templateCommentLoaderConfig || {} } ); let promise; @@ -151,7 +152,12 @@ function getWebpackConfig( config ) { } ) } ] - } + }, + { + test: /\.js$/, + loader: require.resolve( './template-comment-loader' ), + query: config.templateCommentLoaderConfig + }, ] } }; diff --git a/scripts/docs/template-comment-loader.js b/scripts/docs/template-comment-loader.js new file mode 100644 index 00000000000..c69e57a48a3 --- /dev/null +++ b/scripts/docs/template-comment-loader.js @@ -0,0 +1,37 @@ +/** + * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* eslint-env node */ + +/* + * Matches `// @if param // someCode` and evaluates the `option.param`. + * If the param is evaluated to true, then uncomments the code. + * + * Note: Use this only for conditional imports. Otherwise use the webpack define plugin. + */ +module.exports = function templateCommentLoader( source, map ) { + source = source.replace( /\/\/ @if (!?[\w]+) \/\/(.+)/g, ( match, option, body ) => { + // this.query comes from the webpack loader config. + // Missing param in webpack loader config + if ( !( option in this.query ) ) { + return match; + } + + const optionValue = this.query[ option ]; + + // Do nothing when the option is falsy + if ( !optionValue ) { + return match; + } + + // Replace the option in body with evaluated value. + body = body.replace( new RegExp( option, 'g' ), this.query[ option ] ); + + // Uncomment the following code otherwise. + return `/* @if ${ option } */ ${ body }`; + } ); + + this.callback( null, source, map ); +}; From 7e118ae88e88d2c460f9919f512845a8a7bd16ce Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Wed, 13 Feb 2019 11:56:31 +0100 Subject: [PATCH 2/4] Fixed code style. --- scripts/docs/template-comment-loader.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/docs/template-comment-loader.js b/scripts/docs/template-comment-loader.js index c69e57a48a3..2385a838d97 100644 --- a/scripts/docs/template-comment-loader.js +++ b/scripts/docs/template-comment-loader.js @@ -14,14 +14,14 @@ module.exports = function templateCommentLoader( source, map ) { source = source.replace( /\/\/ @if (!?[\w]+) \/\/(.+)/g, ( match, option, body ) => { // this.query comes from the webpack loader config. - // Missing param in webpack loader config + // Missing param in webpack loader config. if ( !( option in this.query ) ) { return match; } const optionValue = this.query[ option ]; - // Do nothing when the option is falsy + // Do nothing when the option is falsy. if ( !optionValue ) { return match; } From 00535e3423c594fec3df23e3b5aa1099a495badd Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Wed, 13 Feb 2019 17:13:01 +0100 Subject: [PATCH 3/4] Changed template-comment-laoder to DefinePlugin. Changed `templateCommentLoaderConfig` to `definitions`. --- scripts/docs/snippetadapter.js | 12 +++----- scripts/docs/template-comment-loader.js | 37 ------------------------- 2 files changed, 4 insertions(+), 45 deletions(-) delete mode 100644 scripts/docs/template-comment-loader.js diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index 868c812497a..c4e0b775838 100644 --- a/scripts/docs/snippetadapter.js +++ b/scripts/docs/snippetadapter.js @@ -28,7 +28,7 @@ module.exports = function snippetAdapter( data ) { outputPath, language: snippetConfig.language, production: data.options.production, - templateCommentLoaderConfig: data.options.templateCommentLoaderConfig || {} + definitions: data.options.definitions || {} } ); let promise; @@ -118,7 +118,8 @@ function getWebpackConfig( config ) { new webpack.BannerPlugin( { banner: bundler.getLicenseBanner(), raw: true - } ) + } ), + new webpack.DefinePlugin( config.definitions ) ], // Configure the paths so building CKEditor 5 snippets work even if the script @@ -152,12 +153,7 @@ function getWebpackConfig( config ) { } ) } ] - }, - { - test: /\.js$/, - loader: require.resolve( './template-comment-loader' ), - query: config.templateCommentLoaderConfig - }, + } ] } }; diff --git a/scripts/docs/template-comment-loader.js b/scripts/docs/template-comment-loader.js deleted file mode 100644 index 2385a838d97..00000000000 --- a/scripts/docs/template-comment-loader.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md. - */ - -/* eslint-env node */ - -/* - * Matches `// @if param // someCode` and evaluates the `option.param`. - * If the param is evaluated to true, then uncomments the code. - * - * Note: Use this only for conditional imports. Otherwise use the webpack define plugin. - */ -module.exports = function templateCommentLoader( source, map ) { - source = source.replace( /\/\/ @if (!?[\w]+) \/\/(.+)/g, ( match, option, body ) => { - // this.query comes from the webpack loader config. - // Missing param in webpack loader config. - if ( !( option in this.query ) ) { - return match; - } - - const optionValue = this.query[ option ]; - - // Do nothing when the option is falsy. - if ( !optionValue ) { - return match; - } - - // Replace the option in body with evaluated value. - body = body.replace( new RegExp( option, 'g' ), this.query[ option ] ); - - // Uncomment the following code otherwise. - return `/* @if ${ option } */ ${ body }`; - } ); - - this.callback( null, source, map ); -}; From 0478df803b1c100103cbadea837c392b9312f506 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Fri, 15 Feb 2019 12:12:34 +0100 Subject: [PATCH 4/4] Added value stringifying for values passed to DefinePlugin. --- scripts/docs/snippetadapter.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index c4e0b775838..0e23a916463 100644 --- a/scripts/docs/snippetadapter.js +++ b/scripts/docs/snippetadapter.js @@ -84,6 +84,14 @@ module.exports = function snippetAdapter( data ) { }; function getWebpackConfig( config ) { + // Stringify all definitions values. The `DefinePlugin` injects definition values as they are so we need to stringify them, + // so they will become real strings in the generated code. See https://webpack.js.org/plugins/define-plugin/ for more information. + const definitions = {}; + + for ( const definitionKey in config.definitions ) { + definitions[ definitionKey ] = JSON.stringify( config.definitions[ definitionKey ] ); + } + return { mode: config.production ? 'production' : 'development', @@ -119,7 +127,7 @@ function getWebpackConfig( config ) { banner: bundler.getLicenseBanner(), raw: true } ), - new webpack.DefinePlugin( config.definitions ) + new webpack.DefinePlugin( definitions ) ], // Configure the paths so building CKEditor 5 snippets work even if the script