snippetadapter.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* eslint-env node */
  6. const path = require( 'path' );
  7. const fs = require( 'fs' );
  8. const webpack = require( 'webpack' );
  9. const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
  10. const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
  11. const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
  12. const UglifyJsWebpackPlugin = require( 'uglifyjs-webpack-plugin' );
  13. const webpackProcesses = new Map();
  14. module.exports = function snippetAdapter( data ) {
  15. if ( !data.snippetSource.js ) {
  16. throw new Error( `Missing snippet source for "${ data.snippetPath }".` );
  17. }
  18. const snippetConfig = readSnippetConfig( data.snippetSource.js );
  19. const outputPath = path.join( data.outputPath, data.snippetPath );
  20. const webpackConfig = getWebpackConfig( {
  21. entry: data.snippetSource.js,
  22. outputPath,
  23. language: snippetConfig.language,
  24. production: data.options.production,
  25. definitions: data.options.definitions || {}
  26. } );
  27. let promise;
  28. // See #530.
  29. if ( webpackProcesses.has( outputPath ) ) {
  30. promise = webpackProcesses.get( outputPath );
  31. } else {
  32. promise = runWebpack( webpackConfig );
  33. webpackProcesses.set( outputPath, promise );
  34. }
  35. return promise
  36. .then( () => {
  37. const wasCSSGenerated = fs.existsSync( path.join( outputPath, 'snippet.css' ) );
  38. const cssFiles = [
  39. path.join( data.basePath, 'assets', 'snippet-styles.css' )
  40. ];
  41. // CSS may not be generated by Webpack if a snippet's JS file didn't import any SCSS files.
  42. if ( wasCSSGenerated ) {
  43. cssFiles.unshift( path.join( data.relativeOutputPath, data.snippetPath, 'snippet.css' ) );
  44. }
  45. // If the snippet is a dependency of a parent snippet, append JS and CSS to HTML and save to disk.
  46. if ( data.isDependency ) {
  47. let htmlFile = fs.readFileSync( data.snippetSource.html ).toString();
  48. if ( wasCSSGenerated ) {
  49. htmlFile += '<link rel="stylesheet" href="snippet.css" type="text/css">';
  50. }
  51. htmlFile += '<script src="snippet.js"></script>';
  52. fs.writeFileSync( path.join( outputPath, 'snippet.html' ), htmlFile );
  53. }
  54. return {
  55. html: fs.readFileSync( data.snippetSource.html ),
  56. assets: {
  57. js: [
  58. // Load snippet helpers first.
  59. path.join( data.basePath, 'assets', 'snippet.js' ),
  60. // Then load the actual snippet code.
  61. path.join( data.relativeOutputPath, data.snippetPath, 'snippet.js' )
  62. ],
  63. css: cssFiles
  64. },
  65. dependencies: snippetConfig.dependencies
  66. };
  67. } );
  68. };
  69. function getWebpackConfig( config ) {
  70. // Stringify all definitions values. The `DefinePlugin` injects definition values as they are so we need to stringify them,
  71. // so they will become real strings in the generated code. See https://webpack.js.org/plugins/define-plugin/ for more information.
  72. const definitions = {};
  73. for ( const definitionKey in config.definitions ) {
  74. definitions[ definitionKey ] = JSON.stringify( config.definitions[ definitionKey ] );
  75. }
  76. return {
  77. mode: config.production ? 'production' : 'development',
  78. devtool: 'source-map',
  79. entry: config.entry,
  80. output: {
  81. path: config.outputPath,
  82. filename: 'snippet.js'
  83. },
  84. optimization: {
  85. minimizer: [
  86. new UglifyJsWebpackPlugin( {
  87. sourceMap: true,
  88. uglifyOptions: {
  89. output: {
  90. // Preserve license comments starting with an exclamation mark.
  91. comments: /^!/
  92. }
  93. }
  94. } )
  95. ]
  96. },
  97. plugins: [
  98. new MiniCssExtractPlugin( { filename: 'snippet.css' } ),
  99. new CKEditorWebpackPlugin( {
  100. language: config.language || 'en'
  101. } ),
  102. new webpack.BannerPlugin( {
  103. banner: bundler.getLicenseBanner(),
  104. raw: true
  105. } ),
  106. new webpack.DefinePlugin( definitions )
  107. ],
  108. // Configure the paths so building CKEditor 5 snippets work even if the script
  109. // is triggered from a directory outside ckeditor5 (e.g. multi-project case).
  110. resolve: {
  111. modules: getModuleResolvePaths()
  112. },
  113. resolveLoader: {
  114. modules: getModuleResolvePaths()
  115. },
  116. module: {
  117. rules: [
  118. {
  119. test: /\.svg$/,
  120. use: [ 'raw-loader' ]
  121. },
  122. {
  123. test: /\.css$/,
  124. use: [
  125. MiniCssExtractPlugin.loader,
  126. 'css-loader',
  127. {
  128. loader: 'postcss-loader',
  129. options: styles.getPostCssConfig( {
  130. themeImporter: {
  131. themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
  132. },
  133. minify: config.production
  134. } )
  135. }
  136. ]
  137. }
  138. ]
  139. }
  140. };
  141. }
  142. function runWebpack( webpackConfig ) {
  143. return new Promise( ( resolve, reject ) => {
  144. webpack( webpackConfig, ( err, stats ) => {
  145. if ( err ) {
  146. reject( err );
  147. } else if ( stats.hasErrors() ) {
  148. reject( new Error( stats.toString() ) );
  149. } else {
  150. resolve();
  151. }
  152. } );
  153. } );
  154. }
  155. function getModuleResolvePaths() {
  156. return [
  157. path.resolve( __dirname, '..', '..', 'node_modules' ),
  158. 'node_modules'
  159. ];
  160. }
  161. function readSnippetConfig( snippetSourcePath ) {
  162. const snippetSource = fs.readFileSync( snippetSourcePath ).toString();
  163. const configSourceMatch = snippetSource.match( /\n\/\* config ([\s\S]+?)\*\// );
  164. if ( !configSourceMatch ) {
  165. return {};
  166. }
  167. return JSON.parse( configSourceMatch[ 1 ] );
  168. }