Tools: Improve and simplify how to build the apps (#2538)

* Improving CLI build

* Improving CLI build

* Remove requirement to build the tools

* Moved Electron app one level down

* Clean up Electron build

* Moved tools to sub-dir

* Updated root script

* update root

* update root

* update root

* update root

* update root

* update root

* Updated build

* Added doc

* Update CI config

* Should not lint index.js

* Fixing jetify

* Fixed linter errors

* Fixed pod build

* Fixed Windows build

ReactNativeClient/gulpfile.js

@@ -0,0 +1,37 @@
+const gulp = require('gulp');
+// const execa = require('execa');
+const utils = require('../Tools/gulp/utils');
+
+const tasks = {
+	encodeAssets: {
+		fn: require('./tools/encodeAssets'),
+	},
+	buildReactNativeInjectedJs: {
+		fn: require('./tools/buildReactNativeInjectedJs'),
+	},
+	podInstall: {
+		fn: require('./tools/podInstall'),
+	},
+};
+
+// tasks.jetify = {
+// 	fn: async () => {
+// 		try {
+// 			const promise = execa('npx', ['jetify']);
+// 			promise.stdout.pipe(process.stdout);
+// 			await promise;
+// 		} catch (error) {
+// 			console.warn('Jetify failed:', error);
+// 		}
+// 		return Promise.resolve();
+// 	},
+// };
+
+utils.registerGulpTasks(gulp, tasks);
+
+gulp.task('build', gulp.series(
+	'buildReactNativeInjectedJs',
+	// 'jetify',
+	'encodeAssets',
+	'podInstall',
+));

ReactNativeClient/ios/Podfile.lock

@@ -200,7 +200,7 @@ PODS:
     - React
   - react-native-sqlite-storage (4.1.0):
     - React
-  - react-native-version-info (0.5.1):
+  - react-native-version-info (1.0.1):
     - React
   - react-native-webview (5.12.0):
     - React
@@ -413,7 +413,7 @@ SPEC CHECKSUMS:
   react-native-image-resizer: aa1600566fd336a044daf9273dcec5033c1d41ca
   react-native-slider: b2f361499888302147205f17f6fffa921a7bda70
   react-native-sqlite-storage: bb10beb2407e5fc21f3f1bcd86bacbfd6edcc818
-  react-native-version-info: 8905d01e64f8444ab6842b3fff89886b3191e732
+  react-native-version-info: daadd78b8fc93cf2764cb5aa52ec995961b62201
   react-native-webview: 26d8993b090ca5d59eb9a9466dcb8291baa3223e
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360

ReactNativeClient/package.json

@@ -5,9 +5,10 @@
   "version": "0.8.0",
   "private": true,
   "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start",
-    "postinstall": "node ../Tools/buildReactNativeInjectedJs.js && npx jetify && npm run encodeAssets",
-    "encodeAssets": "node encodeAssets.js",
+    "start-ios": "react-native run-ios",
+    "start-android": "react-native run-android",
+    "postinstall": "jetify && npm run build",
+    "build": "gulp build",
     "log-ios": "react-native-log-ios \"Joplin\"",
     "log-android": "adb logcat *:S ReactNative:V ReactNativeJS:V"
   },
@@ -94,8 +95,10 @@
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",
     "app-module-path": "^2.2.0",
+    "execa": "^4.0.0",
     "fs-extra": "^8.1.0",
-    "jetifier": "^1.6.4",
+    "gulp": "^4.0.2",
+    "jetifier": "^1.6.5",
     "metro-react-native-babel-preset": "^0.54.1",
     "react-test-renderer": "^16.8.3"
   }

ReactNativeClient/tools/buildReactNativeInjectedJs.js

@@ -0,0 +1,23 @@
+// React Native WebView cannot load external JS files, however it can load
+// arbitrary JS via the injectedJavaScript property. So we use this to load external
+// files: First here we convert the JS file to a plain string, and that string
+// is then loaded by eg. the Mermaid plugin, and finally injected in the WebView.
+
+const fs = require('fs-extra');
+
+const rnDir = `${__dirname}/..`;
+const outputDir = `${rnDir}/lib/rnInjectedJs`;
+
+async function copyJs(name, filePath) {
+	const js = await fs.readFile(filePath, 'utf-8');
+	const json = `module.exports = ${JSON.stringify(js)};`;
+	const outputPath = `${outputDir}/${name}.js`;
+	await fs.writeFile(outputPath, json);
+}
+
+async function main() {
+	await fs.mkdirp(outputDir);
+	await copyJs('webviewLib', `${rnDir}/lib/renderers/webviewLib.js`);
+}
+
+module.exports = main;

ReactNativeClient/tools/encodeAssets.js

@@ -1,10 +1,8 @@
-require('app-module-path').addPath(`${__dirname}`);
-
+const utils = require('../../Tools/gulp/utils');
 const fs = require('fs-extra');
-const { dirname, fileExtension } = require('lib/path-utils');
 const md5 = require('md5');
 
-const rootDir = __dirname;
+const rootDir = `${__dirname}/..`;
 const outputDir = `${rootDir}/pluginAssets`;
 
 var walk = function(dir) {
@@ -27,10 +25,10 @@ async function encodeFile(sourcePath, destPath) {
 	const hash = md5(buffer.toString('base64'));
 	const js = `module.exports = \`${buffer.toString('base64')}\`;`;
 	const outputPath = `${outputDir}/${destPath}.base64.js`;
-	await fs.mkdirp(dirname(outputPath));
+	await fs.mkdirp(utils.dirname(outputPath));
 	await fs.writeFile(outputPath, js);
 
-	const ext = fileExtension(sourcePath).toLowerCase();
+	const ext = utils.fileExtension(sourcePath).toLowerCase();
 	let mime = 'application/octet-stream';
 	if (ext === 'js') mime = 'application/javascript';
 	if (ext === 'css') mime = 'text/css';
@@ -69,7 +67,4 @@ async function main() {
 	await fs.writeFile(`${outputDir}/index.js`, `module.exports = {\nhash:"${hash}", files: {\n${indexJs.join('\n')}\n}\n};`);
 }
 
-main().catch((error) => {
-	console.error(error);
-	process.exit(1);
-});
+module.exports = main;

ReactNativeClient/tools/podInstall.js

@@ -0,0 +1,15 @@
+const execa = require('execa');
+
+module.exports = async function() {
+	if (process.platform !== 'darwin') return Promise.resolve();
+
+	try {
+		const promise = execa('pod', ['install'], { cwd: `${__dirname}/../ios` });
+		promise.stdout.pipe(process.stdout);
+		await promise;
+	} catch (error) {
+		console.warn('Could not run pod install', error);
+	}
+
+	return Promise.resolve();
+};