8
0

snippetadapter.js 3.7 KB

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