From b71d06d8ad9fd45912bdec49bd55a76833f50eda Mon Sep 17 00:00:00 2001 From: Rishabh Karnad Date: Mon, 19 Aug 2019 19:40:04 +0530 Subject: [PATCH] Add source extensions to app.json for Expo apps (default metro source exts + vue extensions) Fixes #23 Addresses - https://github.com/GeekyAnts/vue-native-core/issues/183 - https://github.com/GeekyAnts/vue-native-core/issues/194 --- package-lock.json | 10 ++++++++++ package.json | 1 + src/index.js | 31 +++++++++++++++++++++++++------ src/prompt/index.js | 8 ++++---- src/utils/constants.js | 4 +++- src/utils/validation.js | 2 +- 6 files changed, 44 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index e38bb48..5a15ff1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -167,6 +167,11 @@ "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" }, + "lodash.union": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz", + "integrity": "sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=" + }, "log-symbols": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", @@ -293,6 +298,11 @@ "glob": "^7.1.3" } }, + "semver-regex": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.0.tgz", + "integrity": "sha512-xJqZonbAohJmpogzq1Mx7DB4DT3LO+sG5J4i/rcRyZ527dcUqsTVb5T0vM5gwOBf3KO0v7i94EpbdvwSukJyAQ==" + }, "signal-exit": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", diff --git a/package.json b/package.json index 9aa2118..ea00792 100644 --- 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 index 370242c..cf1c98c 100755 --- 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,7 +102,7 @@ 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); @@ -109,10 +110,10 @@ function createReactNativeCLIProject(projectName, cmd) { 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); @@ -120,7 +121,7 @@ function createExpoProject(projectName, cmd) { 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 index 95c92e0..5337145 100644 --- 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 index c167709..ec7d981 100644 --- 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 index 03efce3..402bc6c 100644 --- 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());