snippetadapter.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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. const snippetConfig = readSnippetConfig( data.snippetSource.js );
  16. const outputPath = path.join( data.outputPath, data.snippetPath );
  17. const webpackConfig = getWebpackConfig( {
  18. entry: data.snippetSource.js,
  19. outputPath,
  20. language: snippetConfig.language,
  21. minify: data.options.production
  22. } );
  23. let promise;
  24. // See #530.
  25. if ( webpackProcesses.has( outputPath ) ) {
  26. promise = webpackProcesses.get( outputPath );
  27. } else {
  28. promise = runWebpack( webpackConfig );
  29. webpackProcesses.set( outputPath, promise );
  30. }
  31. return promise
  32. .then( () => {
  33. const wasCSSGenerated = fs.existsSync( path.join( outputPath, 'snippet.css' ) );
  34. const cssFiles = [
  35. path.join( data.basePath, 'assets', 'snippet-styles.css' )
  36. ];
  37. // CSS may not be generated by Webpack if a snippet's JS file didn't import any SCSS files.
  38. if ( wasCSSGenerated ) {
  39. cssFiles.unshift( path.join( data.relativeOutputPath, data.snippetPath, 'snippet.css' ) );
  40. }
  41. return {
  42. html: fs.readFileSync( data.snippetSource.html ),
  43. assets: {
  44. js: [
  45. path.join( data.relativeOutputPath, data.snippetPath, 'snippet.js' )
  46. ],
  47. css: cssFiles
  48. }
  49. };
  50. } );
  51. };
  52. function getWebpackConfig( config ) {
  53. const plugins = [
  54. new ExtractTextPlugin( 'snippet.css' ),
  55. new CKEditorWebpackPlugin( {
  56. languages: [ config.language || 'en' ]
  57. } ),
  58. new webpack.BannerPlugin( {
  59. banner: bundler.getLicenseBanner(),
  60. raw: true
  61. } )
  62. ];
  63. if ( config.minify ) {
  64. plugins.push(
  65. new BabelMinifyPlugin( null, {
  66. comments: false
  67. } )
  68. );
  69. }
  70. return {
  71. devtool: 'source-map',
  72. entry: config.entry,
  73. output: {
  74. path: config.outputPath,
  75. filename: 'snippet.js'
  76. },
  77. plugins,
  78. // Configure the paths so building CKEditor 5 snippets work even if the script
  79. // is triggered from a directory outside ckeditor5 (e.g. multi-project case).
  80. resolve: {
  81. modules: getModuleResolvePaths()
  82. },
  83. resolveLoader: {
  84. modules: getModuleResolvePaths()
  85. },
  86. module: {
  87. rules: [
  88. {
  89. test: /\.svg$/,
  90. use: [ 'raw-loader' ]
  91. },
  92. {
  93. test: /\.scss$/,
  94. use: ExtractTextPlugin.extract( {
  95. fallback: 'style-loader',
  96. use: [
  97. {
  98. loader: 'css-loader',
  99. options: {
  100. minimize: config.minify
  101. }
  102. },
  103. 'sass-loader'
  104. ]
  105. } )
  106. }
  107. ]
  108. }
  109. };
  110. }
  111. function runWebpack( webpackConfig ) {
  112. return new Promise( ( resolve, reject ) => {
  113. webpack( webpackConfig, ( err, stats ) => {
  114. if ( err ) {
  115. reject( err );
  116. } else if ( stats.hasErrors() ) {
  117. reject( new Error( stats.toString() ) );
  118. } else {
  119. resolve();
  120. }
  121. } );
  122. } );
  123. }
  124. function getModuleResolvePaths() {
  125. return [
  126. path.resolve( __dirname, '..', '..', '..', 'node_modules' ),
  127. 'node_modules'
  128. ];
  129. }
  130. function readSnippetConfig( snippetSourcePath ) {
  131. const snippetSource = fs.readFileSync( snippetSourcePath ).toString();
  132. const configSourceMatch = snippetSource.match( /\n\/\* config ([\s\S]+?)\*\// );
  133. if ( !configSourceMatch ) {
  134. return {};
  135. }
  136. return JSON.parse( configSourceMatch[ 1 ] );
  137. }