improve dev experience, automate all rebuilds

lib/dev-bundler.ts

@@ -66,12 +66,34 @@ const bundler = async ({ outputDir }: { outputDir: string }) => {
       },
       sourceMaps: true,
     });
-    await bundler.watch((err: Error) => {
+    const { unsubscribe } = await bundler.watch((err: Error) => {
       if (err) {
         throw err;
       }
     });
     await openInBrowser(`http://localhost:${port}`, "chrome");
+    let isExiting: boolean;
+    const exit = async () => {
+      if (isExiting) {
+        return;
+      }
+      isExiting = true;
+      await unsubscribe();
+      process.exit();
+    };
+
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(true);
+      require("readline").emitKeypressEvents(process.stdin);
+
+      process.stdin.on("keypress", async (_, key) => {
+        if (key.ctrl && key.name === "c") {
+          await exit();
+        }
+      });
+    }
+    process.on("SIGINT", exit);
+    process.on("SIGTERM", exit);
   } catch (e) {
     console.error(e);
   }

lib/serve.ts

@@ -29,7 +29,22 @@ const updateList = async (entries: string[]) => {
 
 (async () => {
   await makeDir(cachePath);
-  await cpy([`${__dirname}/app/**/*.{html,tsx,ts,js,jsx}`], cachePath);
+  await cpy([`${__dirname}/app/**/*.{html,tsx,ts,js,jsx}`], cachePath, {
+    // don't copy files that are same, prevents cache busting
+    filter: async (file) => {
+      try {
+        const toCode = await fs.readFile(
+          file.path.replace(`${__dirname}/app`, cachePath),
+          "utf8"
+        );
+        const fromCode = await fs.readFile(file.path, "utf8");
+        if (toCode !== fromCode) return true;
+      } catch (e) {
+        return true;
+      }
+      return false;
+    },
+  });
   chokidar
     .watch(storyGlob)
     .on("add", async (path) => {

package.json

@@ -5,10 +5,9 @@
   "author": "[email protected]",
   "license": "MIT",
   "scripts": {
-    "clean": "rm -rf dist && rm tsconfig.tsbuildinfo",
-    "copy-index": "cp ./lib/app/index.html ./dist/app/index.html",
-    "serve": "yarn copy-index && node ./dist/serve",
-    "dev": "tsc && tsc -w"
+    "clean": "rimraf dist && rimraf .fastbook && rimraf dist-fastbook && rimraf tsconfig.tsbuildinfo",
+    "serve": "node ./dist/serve",
+    "dev": "node scripts/dev-watch"
   },
   "dependencies": {
     "@babel/generator": "^7.10.5",
@@ -38,7 +37,6 @@
     "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "tsc-watch": "^4.2.9",
     "typescript": "^3.9.7",
     "v8-compile-cache": "^2.1.1"
   },

scripts/dev-watch.js

@@ -0,0 +1,69 @@
+const chokidar = require("chokidar");
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
+const cpy = require("cpy");
+const { promises: fs } = require("fs");
+
+let initialScanComplete = false;
+
+const cachePath = `${process.cwd()}/.fastbook/app`;
+
+const update = async () => {
+  console.log("tsc: start");
+
+  // tsc compile
+  try {
+    const { stdout, stderr } = await exec("yarn tsc");
+    stderr && console.error(stderr);
+    console.log("tsc: done");
+  } catch (e) {
+    console.error(e.stdout);
+  }
+
+  // copy other lib/app files over to dist/app
+  await cpy(
+    [`${process.cwd()}/lib/app/**/*.html`],
+    `${process.cwd()}/dist/app`
+  );
+
+  // copy app into cache
+  await cpy(
+    [`${process.cwd()}/dist/app/**/*.{html,tsx,ts,js,jsx}`],
+    cachePath,
+    {
+      // don't copy files that are same, prevents cache busting
+      filter: async (file) => {
+        const toPath = file.path.replace(
+          `${process.cwd()}/dist/app`,
+          cachePath
+        );
+        try {
+          const toCode = await fs.readFile(toPath, "utf8");
+          const fromCode = await fs.readFile(file.path, "utf8");
+          if (toCode !== fromCode) {
+            console.log(`update: ${toPath}`);
+            return true;
+          }
+        } catch (e) {
+          console.log(`update: ${toPath}`);
+          return true;
+        }
+        return false;
+      },
+    }
+  );
+};
+
+chokidar
+  .watch("lib/**/*.{ts,tsx,html}")
+  .on("add", async (path) => {
+    if (!initialScanComplete) return;
+    await update();
+  })
+  .on("change", async (path) => {
+    await update();
+  })
+  .on("ready", async () => {
+    initialScanComplete = true;
+    await update();
+  });

src/a1.stories.tsx

@@ -4,7 +4,8 @@ export const Haha: React.FC = () => {
   const [val, setVal] = React.useState("");
   return (
     <div>
-      <h1>This is a new age of component developmasdent</h1>
+      <h1>This is a new component asd</h1>
+      And it stays here so I can just keep typing :)
       <input onChange={(e) => setVal(e.target.value)} value={val} />
     </div>
   );

tsconfig.json

@@ -27,5 +27,5 @@
     "skipLibCheck": false,
     "forceConsistentCasingInFileNames": true
   },
-  "exclude": ["node_modules", "src", "dist", "dist-fastbook"]
+  "exclude": ["node_modules", "src", "dist", "dist-fastbook", "scripts"]
 }

yarn.lock

@@ -2771,7 +2771,7 @@ cross-spawn@^6.0.4:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -3153,11 +3153,6 @@ dotenv@^7.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-7.0.0.tgz#a2be3cd52736673206e8a85fb5210eea29628e7c"
   integrity sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==
 
-duplexer@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
-  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
-
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -3327,19 +3322,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-event-stream@=3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
-  integrity sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=
-  dependencies:
-    duplexer "~0.1.1"
-    from "~0"
-    map-stream "~0.1.0"
-    pause-stream "0.0.11"
-    split "0.3"
-    stream-combiner "~0.0.4"
-    through "~2.3.1"
-
 eventemitter3@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
@@ -3596,11 +3578,6 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-from@~0:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
-  integrity sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -4631,11 +4608,6 @@ map-cache@^0.2.2:
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
   integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 
-map-stream@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
-  integrity sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=
-
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -4835,11 +4807,6 @@ node-addon-api@^3.0.0:
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.1.tgz#990544a2607ec3f538443df4858f8c40089b7783"
   integrity sha512-YUpjl57P55u2yUaKX5Bgy4t5s6SCNYMg+62XNg+k41aYbBL1NgWrZfcgljR5MxDxHDjzl0qHDNtH6SkW4DXNCA==
 
-node-cleanup@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/node-cleanup/-/node-cleanup-2.1.2.tgz#7ac19abd297e09a7f72a71545d951b517e4dde2c"
-  integrity sha1-esGavSl+Caf3KnFUXZUbUX5N3iw=
-
 node-forge@^0.8.1:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.8.5.tgz#57906f07614dc72762c84cef442f427c0e1b86ee"
@@ -5246,13 +5213,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-[email protected]:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
-  integrity sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=
-  dependencies:
-    through "~2.3"
-
 pbkdf2@^3.0.3:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
@@ -5686,13 +5646,6 @@ prop-types@^15.6.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-ps-tree@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.2.0.tgz#5e7425b89508736cdd4f2224d028f7bb3f722ebd"
-  integrity sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA==
-  dependencies:
-    event-stream "=3.3.4"
-
 psl@^1.1.28:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -6039,6 +5992,13 @@ rimraf@^2.6.2:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -6346,13 +6306,6 @@ split2@^3.1.1:
   dependencies:
     readable-stream "^3.0.0"
 
-[email protected]:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
-  integrity sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=
-  dependencies:
-    through "2"
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -6396,13 +6349,6 @@ stealthy-require@^1.1.1:
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
-stream-combiner@~0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.0.4.tgz#4d5e433c185261dde623ca3f44c586bcf5c4ad14"
-  integrity sha1-TV5DPBhSYd3mI8o/RMWGvPXErRQ=
-  dependencies:
-    duplexer "~0.1.1"
-
 stream-http@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-3.1.1.tgz#0370a8017cf8d050b9a8554afe608f043eaff564"
@@ -6423,11 +6369,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
   integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
 
-string-argv@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.1.2.tgz#c5b7bc03fb2b11983ba3a72333dd0559e77e4738"
-  integrity sha512-mBqPGEOMNJKXRo7z0keX0wlAhbBAjilUdPW13nN0PecVryZxdHIeM7TqbsSUA7VYuS00HGC6mojP7DlQzfa9ZA==
-
 string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -6600,7 +6541,7 @@ terser@^4.3.0, terser@^4.3.9:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-through@2, through@^2.3.8, through@~2.3, through@~2.3.1:
+through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -6674,17 +6615,6 @@ tree-kill@^1.2.2:
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
   integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
 
-tsc-watch@^4.2.9:
-  version "4.2.9"
-  resolved "https://registry.yarnpkg.com/tsc-watch/-/tsc-watch-4.2.9.tgz#d93fc74233ca4ef7ee6b12d08c0fe6aca3e19044"
-  integrity sha512-DlTaoDs74+KUpyWr7dCGhuscAUKCz6CiFduBN7R9RbLJSSN1moWdwoCLASE7+zLgGvV5AwXfYDiEMAsPGaO+Vw==
-  dependencies:
-    cross-spawn "^7.0.3"
-    node-cleanup "^2.1.2"
-    ps-tree "^1.2.0"
-    string-argv "^0.1.1"
-    strip-ansi "^6.0.0"
-
 tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"