8
0

snippetadapter.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. /**
  2. * @license Copyright (c) 2003-2017, 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 } = require( '@ckeditor/ckeditor5-dev-utils' );
  10. const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
  11. const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
  12. const BabelMinifyPlugin = require( 'babel-minify-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. minify: 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. return {
  45. html: fs.readFileSync( data.snippetSource.html ),
  46. assets: {
  47. js: [
  48. path.join( data.relativeOutputPath, data.snippetPath, 'snippet.js' )
  49. ],
  50. css: cssFiles
  51. }
  52. };
  53. } );
  54. };
  55. function getWebpackConfig( config ) {
  56. const plugins = [
  57. new ExtractTextPlugin( 'snippet.css' ),
  58. new CKEditorWebpackPlugin( {
  59. languages: [ config.language || 'en' ]
  60. } ),
  61. new webpack.BannerPlugin( {
  62. banner: bundler.getLicenseBanner(),
  63. raw: true
  64. } )
  65. ];
  66. if ( config.minify ) {
  67. plugins.push(
  68. new BabelMinifyPlugin(
  69. {
  70. // Temporary workaround for https://github.com/ckeditor/ckeditor5/issues/542.
  71. mangle: false
  72. },
  73. {
  74. comments: false
  75. }
  76. )
  77. );
  78. }
  79. return {
  80. devtool: 'source-map',
  81. entry: config.entry,
  82. output: {
  83. path: config.outputPath,
  84. filename: 'snippet.js'
  85. },
  86. plugins,
  87. // Configure the paths so building CKEditor 5 snippets work even if the script
  88. // is triggered from a directory outside ckeditor5 (e.g. multi-project case).
  89. resolve: {
  90. modules: getModuleResolvePaths()
  91. },
  92. resolveLoader: {
  93. modules: getModuleResolvePaths()
  94. },
  95. module: {
  96. rules: [
  97. {
  98. test: /\.svg$/,
  99. use: [ 'raw-loader' ]
  100. },
  101. {
  102. test: /\.scss$/,
  103. use: ExtractTextPlugin.extract( {
  104. fallback: 'style-loader',
  105. use: [
  106. {
  107. loader: 'css-loader',
  108. options: {
  109. minimize: config.minify
  110. }
  111. },
  112. 'sass-loader'
  113. ]
  114. } )
  115. }
  116. ]
  117. }
  118. };
  119. }
  120. function runWebpack( webpackConfig ) {
  121. return new Promise( ( resolve, reject ) => {
  122. webpack( webpackConfig, ( err, stats ) => {
  123. if ( err ) {
  124. reject( err );
  125. } else if ( stats.hasErrors() ) {
  126. reject( new Error( stats.toString() ) );
  127. } else {
  128. resolve();
  129. }
  130. } );
  131. } );
  132. }
  133. function getModuleResolvePaths() {
  134. return [
  135. path.resolve( __dirname, '..', '..', '..', 'node_modules' ),
  136. 'node_modules'
  137. ];
  138. }
  139. function readSnippetConfig( snippetSourcePath ) {
  140. const snippetSource = fs.readFileSync( snippetSourcePath ).toString();
  141. const configSourceMatch = snippetSource.match( /\n\/\* config ([\s\S]+?)\*\// );
  142. if ( !configSourceMatch ) {
  143. return {};
  144. }
  145. return JSON.parse( configSourceMatch[ 1 ] );
  146. }