CLI: "simplify" build step w/ build.js

also use react's JSX transform/automatic runtime: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

cli/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
+tmp/
 dist/

cli/build.js

@@ -0,0 +1,52 @@
+const path = require("path");
+const fs = require("fs-extra");
+const babel = require("@babel/core");
+const ncc = require("@vercel/ncc");
+const prettyBytes = require("pretty-bytes");
+
+(async () => {
+  // prepare some paths
+  const tempDir = path.join(__dirname, "tmp");
+  const distDir = path.join(__dirname, "dist");
+
+  // remove anything leftover from previous builds
+  fs.removeSync(tempDir);
+  fs.removeSync(distDir);
+
+  // run code through babel
+  const { code: babelCode } = babel.transformFileSync(path.join(__dirname, "index.js"), {
+    presets: [
+      [
+        "@babel/preset-react",
+        {
+          runtime: "automatic",
+        },
+      ],
+    ],
+  });
+
+  // save babelified code to a file -- unfortunately, we can't pipe this code directly to ncc below
+  fs.outputFileSync(path.join(tempDir, "babel.js"), babelCode);
+
+  // compile for distribution with ncc
+  const { code, assets } = await ncc(path.join(tempDir, "babel.js"), {
+    cache: false,
+    sourceMap: false,
+    minify: true,
+    debugLog: true,
+  });
+
+  // write final build to ./dist and make executable
+  fs.outputFileSync(path.join(distDir, "index.js"), code);
+  fs.outputFileSync(path.join(distDir, "xdg-open"), assets["xdg-open"].source); // TODO: external script from 'open' module
+  fs.chmodSync(path.join(distDir, "index.js"), 0o775);
+  fs.chmodSync(path.join(distDir, "xdg-open"), 0o775);
+
+  // quick logging of resulting filesize
+  console.log("✅ Success!");
+  console.log(`dist/index.js\t${prettyBytes(fs.statSync(path.join(distDir, "index.js")).size)}`);
+  console.log(`dist/xdg-open\t${prettyBytes(fs.statSync(path.join(distDir, "xdg-open")).size)}`);
+
+  // clean up temp files
+  fs.removeSync(tempDir);
+})();

cli/index.js

@@ -2,7 +2,6 @@
 
 "use strict";
 
-const React = require("react");
 const { render, Box, Text } = require("ink");
 const BigText = require("ink-big-text");
 const Gradient = require("ink-gradient");

cli/package.json

@@ -31,44 +31,34 @@
     "jakejarvis": "./dist/index.js"
   },
   "scripts": {
-    "clean": "rimraf dist",
-    "babel": "babel index.js -o dist/unbundled.js",
-    "ncc": "ncc build dist/unbundled.js -m -o dist",
-    "build": "run-s clean babel ncc",
+    "build": "node build.js",
     "run": "yarn build && node dist/index.js",
-    "lint": "eslint .",
-    "prepublishOnly": "run-s lint build"
+    "prepublishOnly": "yarn build",
+    "lint": "eslint ."
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.4",
-    "@babel/preset-env": "^7.15.4",
+    "@babel/core": "^7.15.5",
     "@babel/preset-react": "^7.14.5",
     "@jakejarvis/eslint-config": "*",
     "@vercel/ncc": "^0.30.0",
     "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "fs-extra": "^10.0.0",
     "ink": "^3.0.9",
     "ink-big-text": "^1.2.0",
     "ink-gradient": "^2.0.0",
     "ink-select-input": "^4.2.0",
-    "npm-run-all": "^4.1.5",
     "open": "^8.2.1",
-    "react": "^16.x",
-    "rimraf": "^3.0.2"
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ]
+    "pretty-bytes": "^5.6.0",
+    "react": "^17.0.2"
   },
   "eslintConfig": {
     "extends": [
       "@jakejarvis/eslint-config",
       "plugin:react/recommended",
+      "plugin:react/jsx-runtime",
       "plugin:react-hooks/recommended"
     ],
     "parserOptions": {
@@ -85,6 +75,7 @@
       }
     },
     "ignorePatterns": [
+      "tmp/**",
       "dist/**"
     ]
   }