Skip to content

Commit

Permalink
Revert "Build: Change package build step to async flow (#8093)" (#13195)
Browse files Browse the repository at this point in the history 
This reverts commit 4928f16.
  • Loading branch information
@aduth
aduth authored Jan 7, 2019
1 parent ba327ac commit 68f135b
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 62 deletions.
107 changes: 45 additions & 62 deletions bin/packages/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@
/**
* External dependencies
*/
const { promisify } = require( 'util' );
const fs = require( 'fs' );
const path = require( 'path' );
let glob = require( 'glob' );
const glob = require( 'glob' );
const babel = require( '@babel/core' );
const chalk = require( 'chalk' );
let mkdirp = require( 'mkdirp' );
const mkdirp = require( 'mkdirp' );
const sass = require( 'node-sass' );
const postcss = require( 'postcss' );
const deasync = require( 'deasync' );

/**
* Internal dependencies
Expand All @@ -36,14 +36,6 @@ const BUILD_DIR = {
};
const DONE = chalk.reset.inverse.bold.green( ' DONE ' );

// Promisification
const readFile = promisify( fs.readFile );
const writeFile = promisify( fs.writeFile );
const transformFile = promisify( babel.transformFile );
const renderSass = promisify( sass.render );
glob = promisify( glob );
mkdirp = promisify( mkdirp );

/**
* Get the package name for a specified file
*
Expand Down Expand Up @@ -81,8 +73,6 @@ function getBuildPath( file, buildFolder ) {
* Given a list of scss and js filepaths, divide them into sets them and rebuild.
*
* @param {Array} files list of files to rebuild
*
* @return {Promise} Promise resolving when files are built.
*/
function buildFiles( files ) {
// Reduce files into a unique sets of javaScript files and scss packages.
Expand All @@ -97,50 +87,39 @@ function buildFiles( files ) {
return accumulator;
}, { jsFiles: new Set(), scssPackagePaths: new Set() } );

return Promise.all( [
...buildPaths.jsFiles.map( buildJsFile ),
...buildPaths.scssPackagePaths.map( buildPackageScss ),
] );
buildPaths.jsFiles.forEach( buildJsFile );
buildPaths.scssPackagePaths.forEach( buildPackageScss );
}

/**
* Build a javaScript file for the required environments (node and ES5)
*
* @param {string} file File path to build
* @param {boolean} silent Show logs
*
* @return {Promise} Promise resolving when file is built.
*/
function buildJsFile( file, silent ) {
return Promise.all( [
buildJsFileFor( file, silent, 'main' ),
buildJsFileFor( file, silent, 'module' ),
] );
buildJsFileFor( file, silent, 'main' );
buildJsFileFor( file, silent, 'module' );
}

/**
* Build a package's scss styles
*
* @param {string} packagePath The path to the package.
*
* @return {Promise} Promise resolving when file is built.
*/
async function buildPackageScss( packagePath ) {
function buildPackageScss( packagePath ) {
const srcDir = path.resolve( packagePath, SRC_DIR );
const scssFiles = await glob( `${ srcDir }/*.scss` );
const scssFiles = glob.sync( `${ srcDir }/*.scss` );

// Build scss files individually.
return Promise.all( scssFiles.map( buildScssFile ) );
scssFiles.forEach( buildScssFile );
}

async function buildScssFile( styleFile ) {
function buildScssFile( styleFile ) {
const outputFile = getBuildPath( styleFile.replace( '.scss', '.css' ), BUILD_DIR.style );
const outputFileRTL = getBuildPath( styleFile.replace( '.scss', '-rtl.css' ), BUILD_DIR.style );

await mkdirp( path.dirname( outputFile ) );

const contents = await readFile( styleFile, 'utf8' );
const builtSass = await renderSass( {
mkdirp.sync( path.dirname( outputFile ) );
const builtSass = sass.renderSync( {
file: styleFile,
includePaths: [ path.resolve( __dirname, '../../assets/stylesheets' ) ],
data: (
Expand All @@ -152,22 +131,27 @@ async function buildScssFile( styleFile ) {
'animations',
'z-index',
].map( ( imported ) => `@import "${ imported }";` ).join( ' ' ) +
contents
fs.readFileSync( styleFile, 'utf8' )
),
} );

const result = await postcss( require( './post-css-config' ) ).process( builtSass.css, {
from: 'src/app.css',
to: 'dest/app.css',
} );
const postCSSSync = ( callback ) => {
postcss( require( './post-css-config' ) )
.process( builtSass.css, { from: 'src/app.css', to: 'dest/app.css' } )
.then( ( result ) => callback( null, result ) );
};

const resultRTL = await postcss( [ require( 'rtlcss' )() ] ).process( result.css, {
from: 'src/app.css',
to: 'dest/app.css',
} );
const postCSSRTLSync = ( ltrCSS, callback ) => {
postcss( [ require( 'rtlcss' )() ] )
.process( ltrCSS, { from: 'src/app.css', to: 'dest/app.css' } )
.then( ( result ) => callback( null, result ) );
};

const result = deasync( postCSSSync )();
fs.writeFileSync( outputFile, result.css );

await writeFile( outputFile, result.css );
await writeFile( outputFileRTL, resultRTL.css );
const resultRTL = deasync( postCSSRTLSync )( result );
fs.writeFileSync( outputFileRTL, resultRTL );
}

/**
Expand All @@ -177,17 +161,17 @@ async function buildScssFile( styleFile ) {
* @param {boolean} silent Show logs
* @param {string} environment Dist environment (node or es5)
*/
async function buildJsFileFor( file, silent, environment ) {
function buildJsFileFor( file, silent, environment ) {
const buildDir = BUILD_DIR[ environment ];
const destPath = getBuildPath( file, buildDir );
const babelOptions = getBabelConfig( environment );
babelOptions.sourceMaps = true;
babelOptions.sourceFileName = file;

await mkdirp( path.dirname( destPath ) );
const transformed = await transformFile( file, babelOptions );
writeFile( destPath + '.map', JSON.stringify( transformed.map ) );
writeFile( destPath, transformed.code + '\n//# sourceMappingURL=' + path.basename( destPath ) + '.map' );
mkdirp.sync( path.dirname( destPath ) );
const transformed = babel.transformFileSync( file, babelOptions );
fs.writeFileSync( destPath + '.map', JSON.stringify( transformed.map ) );
fs.writeFileSync( destPath, transformed.code + '\n//# sourceMappingURL=' + path.basename( destPath ) + '.map' );

if ( ! silent ) {
process.stdout.write(
Expand All @@ -205,25 +189,24 @@ async function buildJsFileFor( file, silent, environment ) {
*
* @param {string} packagePath absolute package path
*/
async function buildPackage( packagePath ) {
function buildPackage( packagePath ) {
const srcDir = path.resolve( packagePath, SRC_DIR );
const jsFiles = await glob( `${ srcDir }/**/*.js`, {
const jsFiles = glob.sync( `${ srcDir }/**/*.js`, {
ignore: [
`${ srcDir }/**/test/**/*.js`,
`${ srcDir }/**/__mocks__/**/*.js`,
],
nodir: true,
} );

await Promise.all( [
// Build js files individually.
...jsFiles.map( ( file ) => buildJsFile( file, true ) ),
process.stdout.write( `${ path.basename( packagePath ) }\n` );

// Build js files individually.
jsFiles.forEach( ( file ) => buildJsFile( file, true ) );

// Build package CSS files
buildPackageScss( packagePath ),
] );
// Build package CSS files
buildPackageScss( packagePath );

process.stdout.write( `${ path.basename( packagePath ) }\n` );
process.stdout.write( `${ DONE }\n` );
}

Expand All @@ -233,7 +216,7 @@ if ( files.length ) {
buildFiles( files );
} else {
process.stdout.write( chalk.inverse( '>> Building packages \n' ) );
Promise.all( getPackages().map( buildPackage ) ).then( () => {
process.stdout.write( '\n' );
} );
getPackages()
.forEach( buildPackage );
process.stdout.write( '\n' );
}
16 changes: 16 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
"cross-env": "3.2.4",
"cssnano": "4.0.3",
"enzyme": "3.7.0",
"deasync": "0.1.13",
"deep-freeze": "0.0.1",
"doctrine": "2.1.0",
"eslint-plugin-jest": "21.5.0",
Expand Down

0 comments on commit 68f135b

Please sign in to comment.