feat(watch): add support for watching files

Author: skovy

__tests__/typescript/get-type-definition-path.test.ts

@@ -0,0 +1,9 @@
+import { getTypeDefinitionPath } from "../../lib/typescript";
+
+describe("getTypeDefinitionPath", () => {
+  it("returns the type definition path", () => {
+    const path = getTypeDefinitionPath("/some/path/style.scss");
+
+    expect(path).toEqual("/some/path/style.scss.d.ts");
+  });
+});

lib/cli.ts

@@ -9,7 +9,7 @@ import { main } from "./main";
 const nameFormatDefault: NameFormat = "camel";
 const exportTypeDefault: ExportType = "named";
 
-const { _: patterns, includePaths, aliases, nameFormat, exportType } = yargs
+const { _: patterns, ...rest } = yargs
   .usage(
     "Generate .scss.d.ts from CSS module .scss files.\nUsage: $0 <glob pattern> [options]"
   )
@@ -18,6 +18,10 @@ const { _: patterns, includePaths, aliases, nameFormat, exportType } = yargs
     "$0 src/**/*.scss",
     "All .scss files at any level in the src directoy"
   )
+  .example(
+    "$0 src/**/*.scss --watch",
+    "Watch all .scss files at any level in the src directoy that are added or changed"
+  )
   .example(
     "$0 src/**/*.scss --includePaths src/core src/variables",
     'Search the "core" and "variables" directory when resolving imports'
@@ -44,11 +48,18 @@ const { _: patterns, includePaths, aliases, nameFormat, exportType } = yargs
     alias: "e",
     describe: "The type of export used for defining the type defintions."
   })
+  .option("watch", {
+    boolean: true,
+    default: false,
+    alias: "w",
+    describe:
+      "Watch for added or changed files and (re-)generate the type definitions."
+  })
   .option("includePaths", {
     array: true,
     string: true,
     alias: "i",
     describe: "Additional paths to include when trying to resolve imports."
   }).argv;
 
-main(patterns[0], { includePaths, aliases, nameFormat, exportType });
+main(patterns[0], { ...rest });

lib/main.ts

@@ -3,17 +3,24 @@ import fs from "fs";
 import path from "path";
 import glob from "glob";
 import chalk from "chalk";
+import chokidar from "chokidar";
 
 import { Options, fileToClassNames } from "./sass";
-import { classNamesToTypeDefinitions, ExportType } from "./typescript";
+import {
+  classNamesToTypeDefinitions,
+  ExportType,
+  getTypeDefinitionPath
+} from "./typescript";
 
 interface MainOptions extends Options {
   exportType: ExportType;
+  watch: boolean;
 }
 
 const error = (message: string) => console.log(chalk.red(`[ERROR] ${message}`));
 const warn = (message: string) => console.log(chalk.yellowBright(`${message}`));
 const notice = (message: string) => console.log(chalk.gray(`${message}`));
+const info = (message: string) => console.log(chalk.blueBright(`${message}`));
 const success = (message: string) => console.log(chalk.green(message));
 
 export const main = (pattern: string, options: MainOptions): void => {
@@ -32,6 +39,41 @@ export const main = (pattern: string, options: MainOptions): void => {
     pattern = path.resolve(pattern, "**/*.scss");
   }
 
+  if (options.watch) {
+    watch(pattern, options);
+  } else {
+    generate(pattern, options);
+  }
+};
+
+/**
+ * Watch a file glob and generate the corresponding types.
+ *
+ * @param pattern the file pattern to watch for file changes or additions
+ * @param options the CLI options
+ */
+const watch = (pattern: string, options: MainOptions): void => {
+  success("Watching files...");
+
+  chokidar
+    .watch(pattern)
+    .on("change", path => {
+      info(`[CHANGED] ${path}`);
+      writeFile(path, options);
+    })
+    .on("add", path => {
+      info(`[ADDED] ${path}`);
+      writeFile(path, options);
+    });
+};
+
+/**
+ * Given a file glob generate the corresponding types once.
+ *
+ * @param pattern the file pattern to generate type definitions for
+ * @param options the CLI options
+ */
+const generate = (pattern: string, options: MainOptions): void => {
   // Find all the files that match the provied pattern.
   const files = glob.sync(pattern);
 
@@ -50,28 +92,35 @@ export const main = (pattern: string, options: MainOptions): void => {
 
   success(`Found ${files.length} files. Generating type defintions...`);
 
-  for (let index in files) {
-    const file = files[index];
-
-    fileToClassNames(file, options)
-      .then(classNames => {
-        const typeDefinition = classNamesToTypeDefinitions(
-          classNames,
-          options.exportType
-        );
-        const path = `${file}.d.ts`;
-
-        if (!typeDefinition) {
-          notice(`No types generated for ${file}`);
-          return null;
-        }
-
-        fs.writeFileSync(path, typeDefinition);
-        success(`Generated type defintions: ${path}`);
-      })
-      .catch(({ message, file, line, column }: SassError) => {
-        const location = file ? `(${file}[${line}:${column}])` : "";
-        error(`${message} ${location}`);
-      });
-  }
+  files.map(file => writeFile(file, options));
+};
+
+/**
+ * Given a single file generate the proper types.
+ *
+ * @param file the SCSS file to generate types for
+ * @param options the CLI options
+ */
+const writeFile = (file: string, options: MainOptions): void => {
+  fileToClassNames(file, options)
+    .then(classNames => {
+      const typeDefinition = classNamesToTypeDefinitions(
+        classNames,
+        options.exportType
+      );
+
+      if (!typeDefinition) {
+        notice(`[NO GENERATED TYPES] ${file}`);
+        return null;
+      }
+
+      const path = getTypeDefinitionPath(file);
+
+      fs.writeFileSync(path, typeDefinition);
+      success(`[GENERATED TYPES] ${path}`);
+    })
+    .catch(({ message, file, line, column }: SassError) => {
+      const location = file ? `(${file}[${line}:${column}])` : "";
+      error(`${message} ${location}`);
+    });
 };

lib/typescript/get-type-definition-path.ts

@@ -0,0 +1,7 @@
+/**
+ * Given a file path to a SCSS file, generate the corresponding type defintion
+ * fjle path.
+ *
+ * @param file the SCSS file path
+ */
+export const getTypeDefinitionPath = (file: string): string => `${file}.d.ts`;

lib/typescript/index.ts

@@ -3,3 +3,4 @@ export {
   ExportType,
   EXPORT_TYPES
 } from "./class-names-to-type-definition";
+export { getTypeDefinitionPath } from "./get-type-definition-path";

package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@types/camelcase": "^4.1.0",
+    "@types/chokidar": "^1.7.5",
     "@types/glob": "^7.1.1",
     "@types/jest": "^24.0.0",
     "@types/node-sass": "^3.10.32",
@@ -45,6 +46,7 @@
   },
   "dependencies": {
     "chalk": "^2.4.2",
+    "chokidar": "^2.1.1",
     "css-modules-loader-core": "^1.1.0",
     "fs": "^0.0.1-security",
     "glob": "^7.1.3",