Add importedFrom config option and validate config

Author: moroshko

README.md

@@ -2,7 +2,7 @@
 
 # react-scanner
 
-`react-scanner` statically analyzes the given code and extracts React components and props usage.
+`react-scanner` statically analyzes the given code (TypeScript supported) and extracts React components and props usage.
 
 First, it crawls the given directory and compiles a list of files to be scanned. Then, it scans every file by extracting rendered components and their props into a JSON report.
 
@@ -134,37 +134,52 @@ The config file can be located anywhere and it must export an object like this:
 ```js
 module.exports = {
   // [required]
+  // Type: string
   // The path of the directory to start crawling from (absolute or relative to the config file location).
   crawlFrom: "./src",
 
   // [optional]
+  // Type: function
   // Directory names to exclude from crawling.
   exclude: (dir) => {
     // Note: dir is just the directory name, not the path.
     return ["utils", "tests"].includes(dir);
   },
 
-  // [optional] defaults to: ["**/!(*.test|*.spec).@(js|ts)?(x)"]
+  // [optional]
+  // Type: array of strings (globs)
+  // Default: ["**/!(*.test|*.spec).@(js|ts)?(x)"]
   // Only files matching these globs will be scanned (see here for glob syntax: https://github.com/micromatch/picomatch#globbing-features).
   globs: ["**/*.js"],
 
   // [optional]
-  // Components to report on (omit to report on all components).
+  // Type: object where all values are true
+  // Components to report (omit to report all components).
   components: {
     Button: true,
     Footer: true,
     Text: true,
   },
 
-  // [optional] defaults to: false
-  // Whether to report on subcomponents or not.
-  // false - Footer will be reported on, but Footer.Content will not.
-  // true - Footer.Content will be reported on, as well as Footer.Content.Legal, etc.
+  // [optional]
+  // Type: boolean
+  // Default: false
+  // Whether to report subcomponents or not.
+  // false - Footer will be reported, but Footer.Content will not.
+  // true - Footer.Content will be reported, as well as Footer.Content.Legal, etc.
   includeSubComponents: true,
 
   // [optional]
+  // Type: string or RegExp.
+  // Before reporting a component, we'll check if it's imported from a module name matching importedFrom.
+  // Only if there is a match, the component will be reported.
+  // When omitted, this check is bypassed.
+  importedFrom: "basis",
+
+  // [optional]
+  // Type: function
   // Specify what to do with the report.
-  // In this example, we count how many times each component is used, sort
+  // In this example, we count how many times each component and its props is used, sort
   // by count, and write the result to a file.
   // Note, the components in the report will be nested when includeSubComponents is true.
   // To help traversing the report, we provide a convenience forEachComponent function.
@@ -181,12 +196,31 @@ module.exports = {
     forEachComponent(({ componentName, component }) => {
       const { instances } = component;
 
-      if (instances) {
-        output[componentName] = instances.length;
+      if (!instances) {
+        return;
       }
+
+      output[componentName] = {
+        instances: instances.length,
+        props: {},
+      };
+
+      instances.forEach((instance) => {
+        for (const prop in instance.props) {
+          if (output[componentName].props[prop] === undefined) {
+            output[componentName].props[prop] = 0;
+          }
+
+          output[componentName].props[prop] += 1;
+        }
+      });
+
+      output[componentName].props = sortObjectKeysByValue(
+        output[componentName].props
+      );
     });
 
-    output = sortObjectKeysByValue(output);
+    output = sortObjectKeysByValue(output, (component) => component.instances);
 
     writeFile(
       "./reports/oscar.json", // absolute or relative to the config file location
@@ -196,6 +230,33 @@ module.exports = {
 };
 ```
 
+This `processReport` would produce something like this:
+
+```json
+{
+  "Text": {
+    "instances": 17,
+    "props": {
+      "margin": 6,
+      "color": 4,
+      "textStyle": 1
+    }
+  },
+  "Button": {
+    "instances": 10,
+    "props": {
+      "width": 10,
+      "variant": 5,
+      "type": 3
+    }
+  },
+  "Footer": {
+    "instances": 1,
+    "props": {}
+  }
+}
+```
+
 ## License
 
 MIT

package-lock.json

@@ -21,6 +21,7 @@
     "dlv": "1.1.3",
     "dset": "2.0.1",
     "fdir": "3.4.3",
+    "is-plain-object": "4.1.1",
     "picomatch": "2.2.2",
     "sade": "1.7.3",
     "typescript": "3.9.7"

package.json

@@ -5,6 +5,7 @@
   "packageRules": [
     {
       "packagePatterns": ["*"],
+      "depTypeList": ["dependencies", "devDependencies"],
       "minor": {
         "groupName": "all non-major dependencies",
         "groupSlug": "all-minor-patch"

renovate.json

@@ -20,7 +20,7 @@ function run({ config, configDir, crawlFrom, startTime }) {
     .sync();
 
   let report = {};
-  const { components, includeSubComponents } = config;
+  const { components, includeSubComponents, importedFrom } = config;
 
   for (let i = 0, len = files.length; i < len; i++) {
     const filePath = files[i];
@@ -31,10 +31,22 @@ function run({ config, configDir, crawlFrom, startTime }) {
       filePath,
       components,
       includeSubComponents,
+      importedFrom,
       report,
     });
   }
 
+  const logSummary = () => {
+    const endTime = process.hrtime.bigint();
+
+    // eslint-disable-next-line no-console
+    console.log(
+      `Scanned ${pluralize(files.length, "file")} in ${
+        Number(endTime - startTime) / 1e9
+      } seconds`
+    );
+  };
+
   if (typeof config.processReport === "function") {
     config.processReport({
       report,
@@ -47,23 +59,18 @@ function run({ config, configDir, crawlFrom, startTime }) {
         fs.mkdirSync(path.dirname(filePath), { recursive: true });
         fs.writeFileSync(filePath, data);
 
+        logSummary();
+
         // eslint-disable-next-line no-console
         console.log(`See: ${filePath}`);
       },
     });
   } else {
+    logSummary();
+
     // eslint-disable-next-line no-console
     console.log(JSON.stringify(report, null, 2));
   }
-
-  const endTime = process.hrtime.bigint();
-
-  // eslint-disable-next-line no-console
-  console.log(
-    `Scanned ${pluralize(files.length, "file")} in ${
-      Number(endTime - startTime) / 1e9
-    } seconds`
-  );
 }
 
 module.exports = run;

src/run.js

@@ -81,6 +81,7 @@ function scan({
   filePath,
   components,
   includeSubComponents = false,
+  importedFrom,
   report,
 }) {
   let ast;
@@ -92,40 +93,89 @@ function scan({
     return;
   }
 
-  astray.walk(
-    ast,
-    {
-      JSXOpeningElement(node, report) {
-        const name = getComponentName(node.name);
-        const nameParts = name.split(".");
-        const shouldScanComponent =
-          !components ||
-          (components[nameParts[0]] &&
-            (nameParts.length === 1 || includeSubComponents));
-
-        if (!shouldScanComponent) {
-          return astray.SKIP;
+  const importsMap = {};
+
+  astray.walk(ast, {
+    ImportDeclaration(node) {
+      const { source, specifiers } = node;
+      const moduleName = source.value;
+      const specifiersCount = specifiers.length;
+
+      for (let i = 0; i < specifiersCount; i++) {
+        switch (specifiers[i].type) {
+          case "ImportDefaultSpecifier":
+          case "ImportSpecifier":
+          case "ImportNamespaceSpecifier": {
+            const imported = specifiers[i].local.name;
+
+            importsMap[imported] = moduleName;
+            break;
+          }
+
+          /* c8 ignore next 5 */
+          default: {
+            throw new Error(
+              `Unknown import specifier type: ${specifiers[i].type}`
+            );
+          }
+        }
+      }
+    },
+    JSXOpeningElement(node) {
+      const name = getComponentName(node.name);
+      const nameParts = name.split(".");
+      const shouldReportComponent = () => {
+        if (components) {
+          if (
+            components[name] === undefined &&
+            components[nameParts[0]] === undefined
+          ) {
+            return false;
+          }
         }
 
-        const componentPath = nameParts.join(".components.");
-        let componentInfo = getObjectPath(report, componentPath);
-
-        if (!componentInfo) {
-          componentInfo = {};
-          setObjectPath(report, componentPath, componentInfo);
+        if (includeSubComponents === false) {
+          if (nameParts.length > 1) {
+            return false;
+          }
         }
 
-        if (!componentInfo.instances) {
-          componentInfo.instances = [];
+        if (importedFrom) {
+          const actualImportedFrom = importsMap[nameParts[0]];
+
+          if (importedFrom instanceof RegExp) {
+            if (importedFrom.test(actualImportedFrom) === false) {
+              return false;
+            }
+          } else if (actualImportedFrom !== importedFrom) {
+            return false;
+          }
         }
 
-        const info = getInstanceInfo(node, filePath);
+        return true;
+      };
+
+      if (!shouldReportComponent()) {
+        return astray.SKIP;
+      }
+
+      const componentPath = nameParts.join(".components.");
+      let componentInfo = getObjectPath(report, componentPath);
+
+      if (!componentInfo) {
+        componentInfo = {};
+        setObjectPath(report, componentPath, componentInfo);
+      }
+
+      if (!componentInfo.instances) {
+        componentInfo.instances = [];
+      }
+
+      const info = getInstanceInfo(node, filePath);
 
-        componentInfo.instances.push(info);
-      },
+      componentInfo.instances.push(info);
     },
-    report
-  );
+  });
 }
 
 module.exports = scan;