Babel macro: Add new Babel macro which handles block.json file transf…

…ormation

docs/manifest-devhub.json

@@ -1049,6 +1049,12 @@
 		"markdown_source": "../packages/autop/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/babel-block.macro",
+		"slug": "packages-babel-block.macro",
+		"markdown_source": "../packages/babel-block.macro/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/babel-plugin-import-jsx-pragma",
 		"slug": "packages-babel-plugin-import-jsx-pragma",

package.json

@@ -69,6 +69,7 @@
 		"@babel/runtime-corejs3": "7.4.4",
 		"@babel/traverse": "7.4.4",
 		"@octokit/rest": "16.26.0",
+		"@wordpress/babel-block.macro": "file:packages/babel-block.macro",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
 		"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
 		"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
@@ -87,6 +88,7 @@
 		"@wordpress/postcss-themes": "file:packages/postcss-themes",
 		"@wordpress/scripts": "file:packages/scripts",
 		"babel-plugin-inline-json-import": "0.3.2",
+		"babel-plugin-tester": "^6.2.1",
 		"benchmark": "2.1.4",
 		"browserslist": "4.6.2",
 		"chalk": "2.4.1",

packages/babel-block.macro/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/babel-block.macro/README.md

@@ -0,0 +1,13 @@
+# Babel Block Macro
+
+Babel block macro.
+
+## Installation
+
+Install the module to your project using [npm](https://www.npmjs.com/).
+
+```bash
+npm install @wordpress/babel-block.macro
+```
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/babel-block.macro/macro.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+const { createMacro } = require( 'babel-plugin-macros' );
+const { existsSync, readFileSync } = require( 'fs' );
+const { mapKeys, pick } = require( 'lodash' );
+const { dirname, join, relative } = require( 'path' );
+
+function getFilename( [ filenamePath ], state ) {
+	const filename = filenamePath.evaluate().value;
+
+	return join(
+		relative( process.cwd(), dirname( state.file.opts.filename ) ),
+		filename
+	);
+}
+
+function readMetadata( filename ) {
+	if ( ! existsSync( filename ) ) {
+		throw new Error( `Invalid file name provided: ${ filename }.` );
+	}
+
+	const metadataRaw = readFileSync( filename, 'utf8' );
+
+	return JSON.parse( metadataRaw );
+}
+
+function formatMetadata( metadata, types ) {
+	const aliases = {
+		styleVariations: 'styles',
+	};
+	const replaceWithAlias = ( _, key ) => {
+		return aliases[ key ] || key;
+	};
+	const whitelistedProperties = [
+		'name',
+		'title',
+		'category',
+		'parent',
+		'icon',
+		'description',
+		'keywords',
+		'attributes',
+		'styles',
+	];
+
+	const metadataFiltered = pick(
+		mapKeys( metadata, replaceWithAlias ),
+		whitelistedProperties
+	);
+
+	const metadataNode = types.valueToNode( metadataFiltered );
+	/*const translatedProperties = [
+		'title',
+		'description',
+		'keywords',
+	];*/
+
+	return metadataNode;
+}
+
+function babelBlockMacro( { references, state, babel } ) {
+	const { types } = babel;
+	references.default.forEach( ( referencePath ) => {
+		if ( referencePath.parentPath.type === 'CallExpression' ) {
+			const metadata = readMetadata(
+				getFilename( referencePath.parentPath.get( 'arguments' ), state )
+			);
+
+			referencePath.parentPath.replaceWith( formatMetadata( metadata, types ) );
+		} else {
+			throw new Error(
+				`@wordpress/babel-block.macro can only be used as function call. You tried ${ referencePath.parentPath.type }.`,
+			);
+		}
+	} );
+}
+
+module.exports = createMacro( babelBlockMacro );

packages/babel-block.macro/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@wordpress/babel-block.macro",
+	"version": "1.0.0-alpha.1",
+	"description": "Babel block macro.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"block",
+		"babel",
+		"macro"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/babel-block.macro/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/babel-block.macro"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=10"
+	},
+	"files": [
+		"index.js"
+	],
+	"main": "index.js",
+	"dependencies": {
+		"babel-plugin-macros": "^2.6.1"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/babel-block.macro/test/__snapshots__/index.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`macros valid metadata file name: valid metadata file name 1`] = `
+"
+import macro from '../macro';
+const metadata = macro( './fixtures/block.json' );
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+\\"use strict\\";
+
+var metadata = {
+  name: \\"my-plugin/notice\\",
+  title: \\"Notice\\",
+  category: \\"common\\",
+  parent: [\\"core/group\\"],
+  icon: \\"star\\",
+  description: \\"Shows warning, error or success notices  ...\\",
+  keywords: [\\"alert\\", \\"message\\"],
+  attributes: {
+    message: {
+      type: \\"string\\",
+      source: \\"html\\",
+      selector: \\".meessage\\"
+    }
+  },
+  styles: [{
+    name: \\"default\\",
+    label: \\"Default\\",
+    isDefault: true
+  }, {
+    name: \\"other\\",
+    label: \\"Other\\"
+  }]
+};
+"
+`;

packages/babel-block.macro/test/fixtures/block.json

@@ -0,0 +1,25 @@
+{
+	"name": "my-plugin/notice",
+	"title": "Notice",
+	"category": "common",
+	"parent": [ "core/group" ],
+	"icon": "star",
+	"description": "Shows warning, error or success notices  ...",
+	"keywords": [ "alert", "message" ],
+	"textDomain": "my-plugin",
+	"attributes": {
+		"message": {
+			"type": "string",
+			"source": "html",
+			"selector": ".meessage"
+		}
+	},
+	"styleVariations": [
+		{ "name": "default", "label": "Default", "isDefault": true },
+		{ "name": "other", "label": "Other" }
+	],
+	"editorScript": "build/editor.js",
+	"script": "build/main.js",
+	"editorStyle": "build/editor.css",
+	"style": "build/style.css"
+}

packages/babel-block.macro/test/index.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import plugin from 'babel-plugin-macros';
+import pluginTester from 'babel-plugin-tester';
+
+pluginTester( {
+	plugin,
+	babelOptions: {
+		babelrc: false,
+		filename: __filename,
+		presets: [ '@wordpress/babel-preset-default' ],
+	},
+	tests: {
+		'valid metadata file name': {
+			code: `
+				import macro from '../macro';
+				const metadata = macro( './fixtures/block.json' );
+			`,
+			snapshot: true,
+		},
+		'invalid metadata file name': {
+			code: `
+				import macro from '../macro';
+				const metadata = macro( './invalid-file.json' );
+			`,
+			error: 'Invalid file name provided: packages/babel-block.macro/test/invalid-file.json.',
+		},
+		'invalid usage: as function argument': {
+			code: `
+				import macro from '../macro';
+        		const metadata = doSomething( macro );
+      		`,
+			error: true,
+		},
+		'invalid usage: missing file path': {
+			code: `
+				import macro from '../macro';
+				const metadata = macro;
+			`,
+			error: true,
+		},
+	},
+} );