Add source extensions to app.json for Expo apps (default metro source…

… exts + vue extensions) Fixes #23 Addresses - GeekyAnts/vue-native-core#183 - GeekyAnts/vue-native-core#194
GeekyAnts · Aug 19, 2019 · b71d06d · b71d06d
1 parent 58df4ef
commit b71d06d
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
   "dependencies": {
     "chalk": "^2.4.2",
     "commander": "^2.20.0",
+    "lodash.union": "^4.6.0",
     "ora": "^3.4.0",
     "prompt": "^1.0.0",
     "semver-regex": "^3.1.0"

diff --git a/src/index.js b/src/index.js
@@ -7,6 +7,7 @@ const spawnSync = require("child_process").spawnSync;
 const program = require("commander");
 const prompt = require("prompt");
 const ora = require("ora");
+const union = require("lodash.union")
 
 const promptModule = require("./prompt/index");
 const constantObjects = require("./utils/constants");
@@ -101,26 +102,26 @@ function init(projectName, cmd, useExpo) {
   }
 }
 
-function createReactNativeCLIProject(projectName, cmd) {
+async function createReactNativeCLIProject(projectName, cmd) {
   const root = path.resolve(projectName);
   if (fs.existsSync(projectName)) {
     removeExistingDirectory(projectName);
   }
   console.log(chalk.green(`Creating Vue Native project ${chalk.bold(projectName)}\n`));
   createRNProjectSync(projectName, cmd);
   installPackages(projectName, cmd);
-  setupVueNativeApp(projectName, cmd);
+  await setupVueNativeApp(projectName, cmd);
 }
 
-function createExpoProject(projectName, cmd) {
+async function createExpoProject(projectName, cmd) {
   const root = path.resolve(projectName);
   if (fs.existsSync(projectName)) {
     removeExistingDirectory(projectName);
   }
   console.log(chalk.green(`Creating Vue Native project ${chalk.bold(projectName)}\n`));
   createCrnaProjectSync(projectName, cmd);
   installPackages(projectName, cmd);
-  setupVueNativeApp(projectName, cmd, true);
+  await setupVueNativeApp(projectName, cmd, true);
 }
 
 function createCrnaProjectSync(projectName, cmd) {
@@ -163,6 +164,17 @@ function removeExistingDirectory(directoryName) {
   );
 }
 
+async function getSourceFileExtensions() {
+  const { getDefaultConfig } = require(`${process.cwd()}/node_modules/metro-config/src/index.js`);
+  const {
+    resolver: { sourceExts: defaultSourceExts }
+  } = await getDefaultConfig();
+
+  const sourceExts = union(defaultSourceExts, constantObjects.vueFileExtensions);
+
+  return sourceExts;
+}
+
 function installPackages(projectName, cmd) {
   process.chdir(projectName);
   installVueNativeDependency();
@@ -253,7 +265,7 @@ function getVueNativeDevDependencyPackageInstallationCommand() {
   return vueNativePkgInstallationCommand;
 }
 
-function setupVueNativeApp(projectName, cmd, isCrna = false) {
+async function setupVueNativeApp(projectName, cmd, isCrna = false) {
   // process.chdir(projectName);
   const rnCliFile = fs.readFileSync(
     path.resolve(__dirname, "./utils/metro.config.js")
@@ -278,7 +290,14 @@ function setupVueNativeApp(projectName, cmd, isCrna = false) {
   //
   if (isCrna) {
     const expoObj = JSON.parse(fs.readFileSync(path.join(constantObjects.appJsonPath), 'utf8'));
-    expoObj.expo.packagerOpts = { config: 'metro.config.js' };
+
+    const sourceExts = await getSourceFileExtensions();
+
+    expoObj.expo.packagerOpts = {
+      config: 'metro.config.js',
+      sourceExts: sourceExts,
+    };
+
     fs.writeFileSync(
       path.join(constantObjects.appJsonPath),
       JSON.stringify(expoObj, null, 2)

diff --git a/src/prompt/index.js b/src/prompt/index.js
@@ -27,7 +27,7 @@ function promptForInvalidProjectName(
   });
 }
 
-function createVueProjectAfterConfirmation(
+async function createVueProjectAfterConfirmation(
   promptObj,
   onSuccessAnswer,
   onFailedAnswer,
@@ -44,11 +44,11 @@ function createVueProjectAfterConfirmation(
     default: "no"
   };
 
-  promptObj.get(property, function(err, result) {
+  promptObj.get(property, async function(err, result) {
     if (result.directoryExistAndContinue[0] === "y") {
-      onSuccessAnswer(name, cmd);
+      await onSuccessAnswer(name, cmd);
     } else {
-      onFailedAnswer();
+      await onFailedAnswer();
     }
   });
 }

diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -13,7 +13,9 @@ const constantObject = {
   rnPkgCliFileName: "rn-cli.config.js",
   metroConfigFile: "metro.config.js",
   vueTransformerFileName: "vueTransformerPlugin.js",
-  appVueFileName: "App.vue"
+  appVueFileName: "App.vue",
+  expoAppJSONSourceExtsPath: "expo.packagerOpts.sourceExts",
+  vueFileExtensions: ["vue"],
 };
 
 module.exports = constantObject;
diff --git a/src/utils/validation.js b/src/utils/validation.js
@@ -80,7 +80,7 @@ function getReactNativeCLIifAvailable() {
     ? `${constantObjects.rnPackageName} --version`
     : `${constantObjects.rnPackageName} --version 2>/dev/null`
 
-    try {
+  try {
     // execSync returns a Buffer -> convert to string
     const commandResult = (execSync(processCommand).toString() || "").trim();
     const regexMatches = commandResult.match(semverRegex());