8
0

snippetadapter.js 4.6 KB

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