snippetadapter.js 3.9 KB

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