Separate rn-cli config for running from inside GB

Author: hypest

extra-node-modules.config.js

@@ -0,0 +1,7 @@
+/** @format */
+const enm = require( 'node-libs-react-native' );
+enm.fs = __dirname + '/__mocks__/nodejsMock.js';
+enm.net = __dirname + '/__mocks__/nodejsMock.js';
+enm.canvas = __dirname + '/__mocks__/nodejsMock.js';
+
+module.exports = enm;

package.json

@@ -42,8 +42,11 @@
   },
   "scripts": {
     "start": "yarn react-native start",
+    "start:inside-gb": "yarn react-native start --config `pwd`/rn-cli-inside-gb.config.js",
     "start:reset": "yarn clean:runtime && yarn start --reset-cache",
+    "start:inside-gb:reset": "yarn clean:runtime && yarn start:inside-gb --reset-cache",
     "start:debug": "node --inspect-brk node_modules/.bin/react-native start",
+    "start:inside-gb:debug": "node --inspect-brk node_modules/.bin/react-native start:inside-gb",
     "android": "react-native run-android",
     "preios": "yarn preios:carthage",
     "preios:carthage": "pushd react-native-aztec && (yarn install-aztec-ios; popd)",

rn-cli-inside-gb.config.js

@@ -0,0 +1,36 @@
+/** @format */
+const path = require( 'path' );
+
+const enm = require( './extra-node-modules.config.js' );
+
+const { lstatSync, readdirSync } = require( 'fs' );
+const getDirectoryNames = dir =>
+	readdirSync( dir ).filter( name => lstatSync( path.resolve( dir, name ) ).isDirectory() );
+
+const wppackagenames = getDirectoryNames( path.resolve( __dirname, '../packages/' ) );
+
+const mapper = function( accu, v ) {
+	accu[ '@wordpress/' + v ] = path.resolve( __dirname, '../packages/' + v );
+	return accu;
+};
+
+const wppackages = wppackagenames.reduce( mapper, {} );
+
+module.exports = {
+	extraNodeModules: Object.assign( enm, wppackages ),
+	getProjectRoots() {
+		const roots = [ __dirname, path.resolve( __dirname, '../node_modules' ) ].concat(
+			Object.values( wppackages )
+		);
+		return roots;
+	},
+	getTransformModulePath() {
+		return require.resolve( './sass-transformer-inside-gb.js' );
+	},
+	getSourceExts() {
+		return [ 'js', 'json', 'scss', 'sass' ];
+	},
+	getProvidesModuleNodeModules() {
+		return [ 'react-native-svg', 'react-native' ];
+	},
+};

rn-cli.config.js

@@ -1,39 +1,21 @@
 /** @format */
-const path = require( 'path' );
-
-const enm = require( 'node-libs-react-native' );
-enm.fs = __dirname + '/__mocks__/nodejsMock.js';
-enm.net = __dirname + '/__mocks__/nodejsMock.js';
-enm.canvas = __dirname + '/__mocks__/nodejsMock.js';
-
-const { lstatSync, readdirSync } = require( 'fs' );
-const getDirectoryNames = dir =>
-	readdirSync( dir ).filter( name => lstatSync( path.resolve( dir, name ) ).isDirectory() );
-
-const wppackagenames = getDirectoryNames( path.resolve( __dirname, '../packages/' ) );
-
-const mapper = function( accu, v ) {
-	accu[ '@wordpress/' + v ] = path.resolve( __dirname, '../packages/' + v );
-	return accu;
-};
-
-const wppackages = wppackagenames.reduce( mapper, {} );
+const blacklist = require( 'metro' ).createBlacklist;
+const enm = require( './extra-node-modules.config.js' );
 
 module.exports = {
-	extraNodeModules: Object.assign( enm, wppackages ),
-	getProjectRoots() {
-		const roots = [ __dirname, path.resolve( __dirname, '../node_modules' ) ].concat(
-			Object.values( wppackages )
-		);
-		return roots;
+	extraNodeModules: enm,
+	getBlacklistRE: function() {
+		// Blacklist the GB packages we want to consume from NPM (online) directly.
+		// On the other hand, GB packages that are loaded from the source tree directly
+		// are automagically resolved by Metro so, there is no list of them anywhere.
+		return blacklist( [
+			/gutenberg\/packages\/(autop|compose|deprecated|hooks|i18n|is-shallow-equal)\/.*/,
+		] );
 	},
 	getTransformModulePath() {
-		return require.resolve( './sass-transformer-inside-gb.js' );
+		return require.resolve( './sass-transformer.js' );
 	},
 	getSourceExts() {
 		return [ 'js', 'json', 'scss', 'sass' ];
 	},
-	getProvidesModuleNodeModules() {
-		return [ 'react-native-svg', 'react-native' ];
-	},
 };