Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding SDK POT file generation for Gutenberg blocks. #30303

Closed
wants to merge 4 commits into from
Closed

Adding SDK POT file generation for Gutenberg blocks. #30303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
91ec6ad
Added the babel-plugin-makepot for Gutenberg blocks when they are gen…
zinigor Jan 21, 2019
c5abed1
Added plurals header because it seems to have helped with POT generat…
zinigor Jan 22, 2019
0d13351
Separated the override for POT file generation to be used only in cas…
zinigor Jan 23, 2019
fe27339
Use path.join
simison Jan 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 34 additions & 16 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const path = require( 'path' );

const isCalypsoClient = process.env.CALYPSO_CLIENT === 'true';
const isBrowser = isCalypsoClient || 'true' === process.env.TARGET_BROWSER;
const outputDir = process.env.CALYPSO_SDK_OUTPUT_DIR || false;

const modules = isBrowser ? false : 'commonjs'; // Use commonjs for Node
const codeSplit = require( './server/config' ).isEnabled( 'code-splitting' );
Expand All @@ -12,6 +13,38 @@ const targets = isBrowser
? { browsers: [ 'last 2 versions', 'Safari >= 10', 'iOS >= 10', 'ie >= 11' ] }
: { node: 'current' };

const extensionOverrides = [
[
'@wordpress/import-jsx-pragma',
{
scopeVariable: 'createElement',
source: '@wordpress/element',
isDefault: false,
},
],
[
'@babel/transform-react-jsx',
{
pragma: 'createElement',
},
],
];

// The output directory is set when SDK runs, so we only set the POT generator override in that case.
if ( outputDir ) {
Copy link
Member

@simison simison Jan 24, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even with the comment, I would still prefer the code to tell this story better by renaming the variable something less generic. Not a biggie tho if you decide to leave it like this!

Consider someone who doesn't know anything about SDK reading this line.

Maybe hasSdkOutputDir ?

Copy link
Member

@simison simison Jan 24, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another (maybe easier to read since code stays in one place?) way to structure this would be by using lodash.compact:

plugins: compact( [
	outputDir && [
		'@wordpress/babel-plugin-makepot',
		{
        ...
        }
	],
	[
		'@wordpress/import-jsx-pragma',
		{
			scopeVariable: 'createElement',
			source: '@wordpress/element',
			isDefault: false,
		},
	],
	[
		'@babel/transform-react-jsx',
		{
			pragma: 'createElement',
		},
	],
] )

You can see similar pattern here:

wp-calypso/webpack.config.js

Lines 312 to 313 in ecf929d

plugins: _.compact( [
! codeSplit && new webpack.optimize.LimitChunkCountPlugin( { maxChunks: 1 } ),

...but that's just up to code-stylistic choices. :-)

extensionOverrides.unshift( [
'@wordpress/babel-plugin-makepot',
{
output: path.join( outputDir, 'extensions.pot' ),
headers: {
'content-type': 'text/plain; charset=UTF-8',
'x-generator': 'calypso',
'plural-forms': 'nplurals=2; plural=n == 1 ? 0 : 1;',
},
},
] );
}

const config = {
presets: [
[
Expand Down Expand Up @@ -54,22 +87,7 @@ const config = {
overrides: [
{
test: './client/gutenberg/extensions',
plugins: [
[
'@wordpress/import-jsx-pragma',
{
scopeVariable: 'createElement',
source: '@wordpress/element',
isDefault: false,
},
],
[
'@babel/transform-react-jsx',
{
pragma: 'createElement',
},
],
],
plugins: extensionOverrides,
},
],
env: {
Expand Down
3 changes: 3 additions & 0 deletions bin/sdk-cli.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ const path = require( 'path' );
const yargsModule = require( 'yargs' );
const webpack = require( 'webpack' );

// This environment variable will be used by the Babel plugin that makes POT files, see babel.config.js.
process.env.CALYPSO_SDK_OUTPUT_DIR = yargsModule.argv.outputDir;
Copy link
Member

@simison simison Jan 24, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To express #30303 (comment) in a bit more compact way, how about we move this to bin/sdk/gutenberg.js and change it to:

const output = outputDir || path.join( inputDir, 'build' );
process.env.CALYPSO_SDK_OUTPUT_DIR = output;


/**
* Internal dependencies
*/
Expand Down