snippetadapter.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /**
  2. * @license Copyright (c) 2003-2018, 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. } );
  26. let promise;
  27. // See #530.
  28. if ( webpackProcesses.has( outputPath ) ) {
  29. promise = webpackProcesses.get( outputPath );
  30. } else {
  31. promise = runWebpack( webpackConfig );
  32. webpackProcesses.set( outputPath, promise );
  33. }
  34. return promise
  35. .then( () => {
  36. const wasCSSGenerated = fs.existsSync( path.join( outputPath, 'snippet.css' ) );
  37. const cssFiles = [
  38. path.join( data.basePath, 'assets', 'snippet-styles.css' )
  39. ];
  40. // CSS may not be generated by Webpack if a snippet's JS file didn't import any SCSS files.
  41. if ( wasCSSGenerated ) {
  42. cssFiles.unshift( path.join( data.relativeOutputPath, data.snippetPath, 'snippet.css' ) );
  43. }
  44. // If the snippet is a dependency of a parent snippet, append JS and CSS to HTML and save to disk.
  45. if ( data.isDependency ) {
  46. let htmlFile = fs.readFileSync( data.snippetSource.html ).toString();
  47. if ( wasCSSGenerated ) {
  48. htmlFile += '<link rel="stylesheet" href="snippet.css" type="text/css">';
  49. }
  50. htmlFile += '<script src="snippet.js"></script>';
  51. fs.writeFileSync( path.join( outputPath, 'snippet.html' ), htmlFile );
  52. }
  53. return {
  54. html: fs.readFileSync( data.snippetSource.html ),
  55. assets: {
  56. js: [
  57. path.join( data.relativeOutputPath, data.snippetPath, 'snippet.js' )
  58. ],
  59. css: cssFiles
  60. },
  61. dependencies: snippetConfig.dependencies
  62. };
  63. } );
  64. };
  65. function getWebpackConfig( config ) {
  66. const plugins = [
  67. new MiniCssExtractPlugin( { filename: 'snippet.css' } ),
  68. new CKEditorWebpackPlugin( {
  69. language: config.language || 'en'
  70. } ),
  71. new webpack.BannerPlugin( {
  72. banner: bundler.getLicenseBanner(),
  73. raw: true
  74. } )
  75. ];
  76. const minimizer = [];
  77. if ( config.production ) {
  78. minimizer.push(
  79. new UglifyJsWebpackPlugin( {
  80. sourceMap: true,
  81. uglifyOptions: {
  82. output: {
  83. comments: /^\**!/
  84. }
  85. }
  86. } )
  87. );
  88. }
  89. return {
  90. mode: config.production ? 'production' : 'development',
  91. devtool: 'source-map',
  92. entry: config.entry,
  93. output: {
  94. path: config.outputPath,
  95. filename: 'snippet.js'
  96. },
  97. optimization: {
  98. minimizer
  99. },
  100. plugins,
  101. // Configure the paths so building CKEditor 5 snippets work even if the script
  102. // is triggered from a directory outside ckeditor5 (e.g. multi-project case).
  103. resolve: {
  104. modules: getModuleResolvePaths()
  105. },
  106. resolveLoader: {
  107. modules: getModuleResolvePaths()
  108. },
  109. module: {
  110. rules: [
  111. {
  112. test: /\.svg$/,
  113. use: [ 'raw-loader' ]
  114. },
  115. {
  116. test: /\.css$/,
  117. use: [
  118. MiniCssExtractPlugin.loader,
  119. 'css-loader',
  120. {
  121. loader: 'postcss-loader',
  122. options: styles.getPostCssConfig( {
  123. themeImporter: {
  124. themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
  125. },
  126. minify: config.production
  127. } )
  128. }
  129. ]
  130. }
  131. ]
  132. }
  133. };
  134. }
  135. function runWebpack( webpackConfig ) {
  136. return new Promise( ( resolve, reject ) => {
  137. webpack( webpackConfig, ( err, stats ) => {
  138. if ( err ) {
  139. reject( err );
  140. } else if ( stats.hasErrors() ) {
  141. reject( new Error( stats.toString() ) );
  142. } else {
  143. resolve();
  144. }
  145. } );
  146. } );
  147. }
  148. function getModuleResolvePaths() {
  149. return [
  150. path.resolve( __dirname, '..', '..', 'node_modules' ),
  151. 'node_modules'
  152. ];
  153. }
  154. function readSnippetConfig( snippetSourcePath ) {
  155. const snippetSource = fs.readFileSync( snippetSourcePath ).toString();
  156. const configSourceMatch = snippetSource.match( /\n\/\* config ([\s\S]+?)\*\// );
  157. if ( !configSourceMatch ) {
  158. return {};
  159. }
  160. return JSON.parse( configSourceMatch[ 1 ] );
  161. }