From 179363b15669b4d1fb59dd9511a229e31a8334d7 Mon Sep 17 00:00:00 2001 From: olfedias Date: Thu, 13 Dec 2018 12:46:17 +0200 Subject: [PATCH 1/3] chore(CI): reenable `test:projects:cra-ts` --- build/gulp/tasks/test-projects.tsx | 115 +++++++-------------- build/gulp/tasks/test-projects/cra/App.tsx | 21 ++++ 2 files changed, 57 insertions(+), 79 deletions(-) create mode 100644 build/gulp/tasks/test-projects/cra/App.tsx diff --git a/build/gulp/tasks/test-projects.tsx b/build/gulp/tasks/test-projects.tsx index a490a78e30..180bdf1b96 100644 --- a/build/gulp/tasks/test-projects.tsx +++ b/build/gulp/tasks/test-projects.tsx @@ -1,6 +1,6 @@ import * as debug from 'debug' import * as fs from 'fs' -import { series, task } from 'gulp' +import { parallel, series, task } from 'gulp' import * as path from 'path' import sh from '../sh' import * as rimraf from 'rimraf' @@ -9,23 +9,12 @@ import config from '../../../config' import * as tmp from 'tmp' const { paths } = config - -const log = msg => { - console.log() - console.log('='.repeat(80)) - console.log('CRA TS:', msg) - console.log('='.repeat(80)) -} +let packageFilename export const createPackageFilename = () => tmp.tmpNameSync({ prefix: 'stardust-', postfix: '.tgz' }) export const runIn = path => cmd => sh(`cd ${path} && ${cmd}`) -export const buildAndPackStardust = async (packageFilename: string) => { - await sh('yarn build:dist') - await sh(`yarn pack --filename ${packageFilename}`) -} - const createReactApp = async (atTempDirectory: string, appName: string): Promise => { const atDirectorySubpath = paths.withRootAt(atTempDirectory) @@ -53,93 +42,61 @@ const createReactApp = async (atTempDirectory: string, appName: string): Promise return appProjectPath } +task('test:projects:pack', async () => { + const logger = debug('bundle:pack') + logger.enabled = true + + packageFilename = createPackageFilename() + await sh(`yarn pack --filename ${packageFilename}`) + + logger(`Stardust package is published: ${packageFilename}`) +}) + // Tests the following scenario // - Create a new react test app // - Add Stardust as a app's dependency // - Update the App.tsx to include some stardust imports // - Try and run a build task('test:projects:cra-ts', async () => { - const appTSX = `import { - Avatar, - Button, - Header, - Image, - Input, - Popup, - Provider, - themes -} from '@stardust-ui/react'; -import * as React from 'react'; - -class App extends React.Component { - public render() { - return ( - -
- } content="Popup content" /> - -
- - ); - } -} - -export default App; -` - //////// PREPARE STARDUST PACKAGE /////// - log('STEP 0. Preparing Stardust package..') - - const packageFilename = createPackageFilename() + const logger = debug('bundle:cra') + logger.enabled = true - await buildAndPackStardust(packageFilename) - log(`Stardust package is published: ${packageFilename}`) + const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/cra') - try { - //////// CREATE TEST REACT APP /////// - log('STEP 1. Create test React project with TSX scripts..') + //////// CREATE TEST REACT APP /////// + logger('STEP 1. Create test React project with TSX scripts..') - const testAppPath = paths.withRootAt( - await createReactApp(tmp.dirSync({ prefix: 'stardust-' }).name, 'test-app'), - ) + const testAppPath = paths.withRootAt( + await createReactApp(tmp.dirSync({ prefix: 'stardust-' }).name, 'test-app'), + ) - const runInTestApp = runIn(testAppPath()) - log(`Test React project is successfully created: ${testAppPath()}`) + const runInTestApp = runIn(testAppPath()) + logger(`Test React project is successfully created: ${testAppPath()}`) - //////// ADD STARDUST AS A DEPENDENCY /////// - log('STEP 2. Add Stardust dependency to test project..') + //////// ADD STARDUST AS A DEPENDENCY /////// + logger('STEP 2. Add Stardust dependency to test project..') - await runInTestApp(`yarn add ${packageFilename}`) - log("Stardust is successfully added as test project's dependency.") + await runInTestApp(`yarn add ${packageFilename}`) + logger("Stardust is successfully added as test project's dependency.") - //////// REFERENCE STARDUST COMPONENTS IN TEST APP's MAIN FILE /////// - log("STEP 3. Reference Stardust components in test project's App.tsx") - fs.writeFileSync(testAppPath('src', 'App.tsx'), appTSX) + //////// REFERENCE STARDUST COMPONENTS IN TEST APP's MAIN FILE /////// + logger("STEP 3. Reference Stardust components in test project's App.tsx") + fs.copyFileSync(scaffoldPath('App.tsx'), testAppPath('src', 'App.tsx')) - //////// BUILD TEST PROJECT /////// - log('STEP 4. Build test project..') - await runInTestApp(`yarn build`) + //////// BUILD TEST PROJECT /////// + logger('STEP 4. Build test project..') + await runInTestApp(`yarn build`) - log('Test project is built successfully!') - } finally { - fs.unlinkSync(packageFilename) - } + logger('Test project is built successfully!') }) task('test:projects:rollup', async () => { const logger = debug('bundle:rollup') logger.enabled = true - const packageFilename = createPackageFilename() const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/rollup') - - await buildAndPackStardust(packageFilename) - logger(`✔️Stardust UI package was prepared: ${packageFilename}`) - const tmpDirectory = tmp.dirSync({ prefix: 'stardust-' }).name + logger(`✔️Temporary directory was created: ${tmpDirectory}`) const dependencies = [ @@ -167,7 +124,7 @@ task('test:projects:rollup', async () => { task( 'test:projects', series( - // 'test:projects:cra-ts', Temporary disabled - 'test:projects:rollup', + series('build:dist', 'test:projects:pack'), + parallel('test:projects:cra-ts', 'test:projects:rollup'), ), ) diff --git a/build/gulp/tasks/test-projects/cra/App.tsx b/build/gulp/tasks/test-projects/cra/App.tsx new file mode 100644 index 0000000000..03506d2688 --- /dev/null +++ b/build/gulp/tasks/test-projects/cra/App.tsx @@ -0,0 +1,21 @@ +import { Avatar, Button, Header, Image, Input, Popup, Provider, themes } from '@stardust-ui/react' +import * as React from 'react' + +class App extends React.Component { + public render() { + return ( + +
+ } content="Popup content" /> + +
+ + ) + } +} + +export default App From 009b581b616ac0a976c7f3a749b7d5cabc19f6e2 Mon Sep 17 00:00:00 2001 From: olfedias Date: Thu, 13 Dec 2018 15:48:36 +0200 Subject: [PATCH 2/3] restore log util --- build/gulp/tasks/test-projects.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/build/gulp/tasks/test-projects.tsx b/build/gulp/tasks/test-projects.tsx index 180bdf1b96..61b2b79d29 100644 --- a/build/gulp/tasks/test-projects.tsx +++ b/build/gulp/tasks/test-projects.tsx @@ -1,4 +1,3 @@ -import * as debug from 'debug' import * as fs from 'fs' import { parallel, series, task } from 'gulp' import * as path from 'path' @@ -11,6 +10,13 @@ import * as tmp from 'tmp' const { paths } = config let packageFilename +const log = (context: string) => (message: string) => { + console.log() + console.log('='.repeat(80)) + console.log(context, ':', message) + console.log('='.repeat(80)) +} + export const createPackageFilename = () => tmp.tmpNameSync({ prefix: 'stardust-', postfix: '.tgz' }) export const runIn = path => cmd => sh(`cd ${path} && ${cmd}`) @@ -43,13 +49,10 @@ const createReactApp = async (atTempDirectory: string, appName: string): Promise } task('test:projects:pack', async () => { - const logger = debug('bundle:pack') - logger.enabled = true - packageFilename = createPackageFilename() await sh(`yarn pack --filename ${packageFilename}`) - logger(`Stardust package is published: ${packageFilename}`) + log('test:projects:pack')(`Stardust package is published: ${packageFilename}`) }) // Tests the following scenario @@ -58,9 +61,7 @@ task('test:projects:pack', async () => { // - Update the App.tsx to include some stardust imports // - Try and run a build task('test:projects:cra-ts', async () => { - const logger = debug('bundle:cra') - logger.enabled = true - + const logger = log('test:projects:cra-ts') const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/cra') //////// CREATE TEST REACT APP /////// @@ -91,8 +92,7 @@ task('test:projects:cra-ts', async () => { }) task('test:projects:rollup', async () => { - const logger = debug('bundle:rollup') - logger.enabled = true + const logger = log('test:projects:rollup') const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/rollup') const tmpDirectory = tmp.dirSync({ prefix: 'stardust-' }).name From 5cd42fe4c00700775c5a63db0f36b66db390978c Mon Sep 17 00:00:00 2001 From: olfedias Date: Thu, 13 Dec 2018 15:57:42 +0200 Subject: [PATCH 3/3] minor fixes --- build/gulp/tasks/test-projects.tsx | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/build/gulp/tasks/test-projects.tsx b/build/gulp/tasks/test-projects.tsx index 61b2b79d29..79d35ef834 100644 --- a/build/gulp/tasks/test-projects.tsx +++ b/build/gulp/tasks/test-projects.tsx @@ -8,16 +8,20 @@ import config from '../../../config' import * as tmp from 'tmp' const { paths } = config -let packageFilename const log = (context: string) => (message: string) => { console.log() console.log('='.repeat(80)) - console.log(context, ':', message) + console.log(`${context} : ${message}`) console.log('='.repeat(80)) } -export const createPackageFilename = () => tmp.tmpNameSync({ prefix: 'stardust-', postfix: '.tgz' }) +export const publishPackage = async () => { + const filename = tmp.tmpNameSync({ prefix: 'stardust-', postfix: '.tgz' }) + await sh(`yarn pack --filename ${filename}`) + + return filename +} export const runIn = path => cmd => sh(`cd ${path} && ${cmd}`) @@ -48,13 +52,6 @@ const createReactApp = async (atTempDirectory: string, appName: string): Promise return appProjectPath } -task('test:projects:pack', async () => { - packageFilename = createPackageFilename() - await sh(`yarn pack --filename ${packageFilename}`) - - log('test:projects:pack')(`Stardust package is published: ${packageFilename}`) -}) - // Tests the following scenario // - Create a new react test app // - Add Stardust as a app's dependency @@ -64,6 +61,9 @@ task('test:projects:cra-ts', async () => { const logger = log('test:projects:cra-ts') const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/cra') + const packageFilename = await publishPackage() + logger(`✔️Package was published: ${packageFilename}`) + //////// CREATE TEST REACT APP /////// logger('STEP 1. Create test React project with TSX scripts..') @@ -99,6 +99,9 @@ task('test:projects:rollup', async () => { logger(`✔️Temporary directory was created: ${tmpDirectory}`) + const packageFilename = await publishPackage() + logger(`✔️Package was published: ${packageFilename}`) + const dependencies = [ 'rollup', 'rollup-plugin-replace', @@ -123,8 +126,5 @@ task('test:projects:rollup', async () => { task( 'test:projects', - series( - series('build:dist', 'test:projects:pack'), - parallel('test:projects:cra-ts', 'test:projects:rollup'), - ), + series('build:dist', parallel('test:projects:cra-ts', 'test:projects:rollup')), )