Skip to content

Commit f396779

Browse files
author
Ahmad Awais
committed
📦 NEW: CGB App Architechture
1 parent 721086f commit f396779

13 files changed

Lines changed: 320 additions & 278 deletions

‎packages/create-guten-block/app/cli.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* Commande.js CLI
3+
*
4+
* Set the options for -v --help etc.
5+
*/
6+
7+
const chalk = require( 'chalk' );
8+
const commander = require( 'commander' );
9+
const packageJson = require( '../package.json' );
10+
11+
// Commander.js program.
12+
module.exports = () => {
13+
new commander.Command( packageJson.name )
14+
.version( packageJson.version, '-v, --version' )
15+
.description(
16+
`CGB ${ chalk.dim(
17+
'(create-guten-block)'
18+
) } is a Zero-Config #OCJS for builing WordPress Gutenberg Blocks.`
19+
)
20+
.arguments( '<block-name>' )
21+
.usage( `${ chalk.green( '<block-name>' ) }` )
22+
// .action(name => {
23+
// projectName = name;
24+
// })
25+
.allowUnknownOption()
26+
.on( '--help', () => {
27+
console.log( `\n Only ${ chalk.green( '<block-name>' ) } is required.\n` );
28+
} )
29+
.parse( process.argv );
30+
};

‎packages/create-guten-block/app/consoleClear.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Cross platform clear console.
3+
*
4+
* Support for win32 and others.
5+
*/
6+
7+
module.exports = () => {
8+
process.stdout.write(
9+
process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'
10+
);
11+
};

‎packages/create-guten-block/app/createPluginDir.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* Create Plugin Directory.
3+
*
4+
* @param {string} blockName The block name.
5+
* @return {promise} promise resolved.
6+
*/
7+
8+
const chalk = require( 'chalk' );
9+
const shell = require( 'shelljs' );
10+
const clearConsole = require( './consoleClear' );
11+
const directoryExists = require( 'directory-exists' );
12+
13+
module.exports = blockName => {
14+
// Check if the plugin dir is already presnet.
15+
const dirAlreadyExist = directoryExists.sync( `./${ blockName }` );
16+
17+
// If exists then exit.
18+
if ( dirAlreadyExist ) {
19+
clearConsole();
20+
console.log(
21+
'\n❌ ',
22+
chalk.black.bgRed(
23+
` A directory with this name already exists: ${ blockName } \n`
24+
)
25+
);
26+
27+
console.log(
28+
` ${ chalk.dim(
29+
'Please move or delete it (maybe make a copy for backup) and run this command again.'
30+
) }`
31+
);
32+
console.log(
33+
` ${ chalk.dim( 'Or provide a different name for your block.' ) }`
34+
);
35+
console.log( chalk.dim( '\nFor example: \n' ) );
36+
console.log(
37+
` ${ chalk.dim( 'create-guten-block' ) } ${ chalk.green( 'new-block-name' ) }\n`
38+
);
39+
process.exit( 1 );
40+
} else {
41+
return new Promise( resolve => {
42+
// Where user is at the moment.
43+
shell.exec( `mkdir -p ${ blockName }`, () => {
44+
resolve( true );
45+
} );
46+
} );
47+
}
48+
};

‎packages/create-guten-block/app/getBlockDir.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* Get block directory.
3+
*
4+
* @param {string} blockName The block name.
5+
* @return {string} The block directory.
6+
*/
7+
8+
module.exports = blockName => {
9+
return `${ process.cwd() }/${ blockName }`;
10+
};

‎packages/create-guten-block/app/getBlockName.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Handle if there's no block name.
3+
*
4+
* @param {string} theThirdArg Third arg from node process.
5+
* @return {string} The block name.
6+
*/
7+
8+
const chalk = require( 'chalk' );
9+
10+
module.exports = theThirdArg => {
11+
// Is there a plugin-name provided as the third argument?
12+
const isBlockName = theThirdArg === undefined ? false : theThirdArg;
13+
14+
// Stop if there's no block name to create the plugin dir.
15+
if ( ! isBlockName ) {
16+
console.log(
17+
'\n❌ ',
18+
chalk.black.bgRed( ' You forgot to specify a block name: \n' )
19+
);
20+
console.log(
21+
` ${ chalk.dim( 'create-guten-block' ) } ${ chalk.green( '<block-name>' ) }`
22+
);
23+
console.log( chalk.dim( '\nFor example: \n' ) );
24+
console.log(
25+
` ${ chalk.dim( 'create-guten-block' ) } ${ chalk.green( 'my-block' ) }\n`
26+
);
27+
process.exit( 1 );
28+
}
29+
30+
// Create block name from 2nd Argument.
31+
const blockName = isBlockName
32+
.toLowerCase()
33+
.split( ' ' )
34+
.join( '-' );
35+
36+
return blockName;
37+
};

‎packages/create-guten-block/app/initBlock.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Initialize the block plugin.
3+
*
4+
* @param {string} blockName The block name.
5+
* @param {string} blockDir The block directory.
6+
*/
7+
8+
const path = require( 'path' );
9+
10+
module.exports = ( blockName, blockDir ) => {
11+
// Root path.
12+
const root = process.cwd();
13+
14+
// Get path to cgb-scripts.
15+
const scriptsPath = path.resolve(
16+
root,
17+
'node_modules',
18+
'cgb-scripts',
19+
'scripts',
20+
'init.js'
21+
);
22+
23+
// Require cgb-scripts.
24+
const init = require( scriptsPath );
25+
26+
// Run the initializer function.
27+
init( root, blockName, blockDir );
28+
};

‎packages/create-guten-block/app/npmInstallScripts.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* NPM install cgb-scripts.
3+
*
4+
* - Build package.json file.
5+
* - NPM install the plugin block.
6+
*
7+
* @param {string} blockName The block name.
8+
* @param {string} blockDir The block directory.
9+
* @return {promise} promise resolved.
10+
*/
11+
12+
const path = require( 'path' );
13+
const fs = require( 'fs-extra' );
14+
const execa = require( 'execa' );
15+
const shell = require( 'shelljs' );
16+
17+
module.exports = ( blockName, blockDir ) => {
18+
shell.cd( blockDir );
19+
shell.touch( 'package.json' );
20+
21+
// Build a package.json file since npm install needs it.
22+
const appPackage = {
23+
name: `${ blockName }-cgb-guten-block`,
24+
version: '1.0.0',
25+
private: true,
26+
scripts: {
27+
start: 'cgb-scripts start',
28+
build: 'cgb-scripts build',
29+
eject: 'cgb-scripts eject',
30+
},
31+
};
32+
33+
// Write the package.json file.
34+
fs.writeFileSync(
35+
path.join( process.cwd(), 'package.json' ),
36+
JSON.stringify( appPackage, null, 2 ) + '\n'
37+
);
38+
39+
// Install latest exact version of cgb-scripts.
40+
return new Promise( async resolve => {
41+
await execa( 'npm', [
42+
'install',
43+
'cgb-scripts',
44+
'--save',
45+
'--save-exact',
46+
'--slient',
47+
] );
48+
resolve( true );
49+
} );
50+
};

‎packages/create-guten-block/app/prePrint.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Print anything in the start.
3+
*
4+
* @param {string} blockName The block name.
5+
* @param {string} blockDir The block directory.
6+
*/
7+
8+
const chalk = require( 'chalk' );
9+
10+
module.exports = ( blockName, blockDir ) => {
11+
console.log( '\n' );
12+
console.log(
13+
'📦 ',
14+
chalk.black.bgYellow(
15+
` Creating a WP Gutenberg Block plguin called: ${ chalk.bgGreen(
16+
` ${ blockName } `
17+
) }\n`
18+
),
19+
chalk.dim( `\n In the directory: ${ blockDir }\n` ),
20+
chalk.dim( 'This might take a couple of minutes.\n' )
21+
);
22+
};

‎packages/create-guten-block/app/run.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* Run the entire program.
3+
*
4+
* Runs all the functions with async/await.
5+
*/
6+
7+
const ora = require( 'ora' );
8+
const chalk = require( 'chalk' );
9+
const clearConsole = require( './consoleClear' );
10+
const cli = require( './cli' );
11+
const getBlockName = require( './getBlockName' );
12+
const getBlockDir = require( './getBlockDir' );
13+
const prePrint = require( './prePrint' );
14+
const createPluginDir = require( './createPluginDir' );
15+
const npmInstallScripts = require( './npmInstallScripts' );
16+
const initBlock = require( './initBlock' );
17+
const updateNotifier = require( './updateNotifier' );
18+
19+
module.exports = async() => {
20+
// 0. Set the CLI.
21+
cli();
22+
23+
// 0. Clear the console.
24+
clearConsole();
25+
26+
// 0. Update notifier.
27+
updateNotifier();
28+
29+
// 1. Get the block name and direcotry by sending in the third argument.
30+
const blockName = await getBlockName( process.argv[ 2 ] );
31+
const blockDir = await getBlockDir( blockName );
32+
33+
// 2. Pre print.
34+
await prePrint( blockName, blockDir );
35+
36+
// 3. Create the plugin directory.
37+
// Init the spinner.
38+
const spinner = new ora( { text: '', enabled: true } );
39+
spinner.start(
40+
`1. Creating the plugin directory called → ${ chalk.black.bgWhite(
41+
` ${ blockName } `
42+
) }`
43+
);
44+
await createPluginDir( blockName );
45+
spinner.succeed();
46+
47+
// 4. NPM install cgb-scripts.
48+
spinner.start( '2. Installing npm packages...' );
49+
await npmInstallScripts( blockName, blockDir );
50+
spinner.succeed();
51+
52+
// 5. Initialize the block.
53+
await initBlock( blockName, blockDir );
54+
};

‎packages/create-guten-block/app/updateNotifier.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* Update notifier
3+
*/
4+
5+
const updateNotifier = require( 'update-notifier' );
6+
const pkg = require( '../package.json' );
7+
8+
module.exports = () => {
9+
updateNotifier( { pkg } ).notify();
10+
};

0 commit comments

Comments
 (0)