Set up logic to allow checking for frameworks (firefox-devtools#5186)

Author: Łukasz Sobek

assets/dictionary.txt

@@ -116,6 +116,7 @@ welcomebox
 Quickopen
 CommandBarButton
 dbg
+getFramework
 Anshul
 sourcemap
 isPaused

src/actions/ast.js

@@ -16,7 +16,7 @@ import {
   getSymbols,
   getEmptyLines,
   findOutOfScopeLocations,
-  isReactComponent
+  getFramework
 } from "../workers/parser";
 
 import type { SourceId } from "debugger-html";
@@ -34,12 +34,12 @@ export function setSourceMetaData(sourceId: SourceId) {
       return;
     }
 
-    const isReactComp = await isReactComponent(source.id);
+    const framework = await getFramework(source.id);
     dispatch({
       type: "SET_SOURCE_METADATA",
       sourceId: source.id,
       sourceMetaData: {
-        isReactComponent: isReactComp
+        framework
       }
     });
   };

src/actions/tests/ast.spec.js

@@ -85,27 +85,23 @@ describe("ast", () => {
 
       await waitForState(store, state => {
         const metaData = getSourceMetaData(state, source.id);
-        return metaData && metaData.isReactComponent;
+        return metaData && metaData.framework;
       });
 
       const sourceMetaData = getSourceMetaData(getState(), source.id);
-      expect(sourceMetaData).toEqual({ isReactComponent: true });
+      expect(sourceMetaData.framework).toBe("React");
     });
 
     it("should not give false positive on non react components", async () => {
       const store = createStore(threadClient);
       const { dispatch, getState } = store;
-      const source = makeSource("base.js");
-      await dispatch(actions.newSource(source));
+      const base = makeSource("base.js");
+      await dispatch(actions.newSource(base));
       await dispatch(actions.loadSourceText(I.Map({ id: "base.js" })));
       await dispatch(actions.setSourceMetaData("base.js"));
-      await waitForState(store, state => {
-        const metaData = getSourceMetaData(state, source.id);
-        return metaData && metaData.isReactComponent === false;
-      });
 
-      const sourceMetaData = getSourceMetaData(getState(), source.id);
-      expect(sourceMetaData).toEqual({ isReactComponent: false });
+      const sourceMetaData = getSourceMetaData(getState(), base.id);
+      expect(sourceMetaData.framework).toBe(undefined);
     });
   });
 

src/actions/types.js

@@ -324,7 +324,7 @@ type ASTAction =
       type: "SET_SOURCE_METADATA",
       sourceId: string,
       sourceMetaData: {
-        isReactComponent: boolean
+        framework: ?string
       }
     }
   | {

src/reducers/ast.js

@@ -24,7 +24,7 @@ export type SymbolsMap = Map<string, SymbolDeclarations>;
 export type EmptyLinesMap = Map<string, EmptyLinesType>;
 
 export type SourceMetaDataType = {
-  isReactComponent: boolean
+  getFramework: ?string
 };
 
 export type SourceMetaDataMap = Map<string, SourceMetaDataType>;

src/utils/tabs.js

@@ -51,9 +51,15 @@ export function getSourceAnnotation(
   const sourceId = source.get("id");
   const sourceMetaData = getMetaData(sourceId);
 
-  if (sourceMetaData && sourceMetaData.isReactComponent) {
-    return <img className="react" />;
+  const framework =
+    sourceMetaData && sourceMetaData.framework
+      ? sourceMetaData.framework
+      : false;
+
+  if (framework) {
+    return <img className={framework.toLowerCase()} />;
   }
+
   if (isPretty(source)) {
     return <img className="prettyPrint" />;
   }

src/workers/parser/frameworks.js

@@ -4,7 +4,13 @@
 
 import getSymbols from "./getSymbols";
 
-export function isReactComponent(sourceId) {
+export function getFramework(sourceId) {
+  if (isReactComponent(sourceId)) {
+    return "React";
+  }
+}
+
+function isReactComponent(sourceId) {
   const { imports, classes, callExpressions } = getSymbols(sourceId);
   return (
     (importsReact(imports) || requiresReact(callExpressions)) &&

src/workers/parser/index.js

@@ -27,7 +27,7 @@ export const hasSource = dispatcher.task("hasSource");
 export const setSource = dispatcher.task("setSource");
 export const clearSources = dispatcher.task("clearSources");
 export const hasSyntaxError = dispatcher.task("hasSyntaxError");
-export const isReactComponent = dispatcher.task("isReactComponent");
+export const getFramework = dispatcher.task("getFramework");
 export const replaceOriginalVariableName = dispatcher.task(
   "replaceOriginalVariableName"
 );

src/workers/parser/tests/framework.spec.js

@@ -1,17 +1,17 @@
-import { isReactComponent } from "../frameworks";
+import { getFramework } from "../frameworks";
 import { getSource, getOriginalSource } from "./helpers";
 import { setSource } from "../sources";
 
 describe("Parser.frameworks", () => {
   it("should be a react component", () => {
     const source = getOriginalSource("frameworks/component");
     setSource(source);
-    expect(isReactComponent(source.id)).toBe(true);
+    expect(getFramework(source.id)).toBe("React");
   });
 
   it("should handle es5 implementation of a component", () => {
     const source = getSource("frameworks/es5Component");
     setSource(source);
-    expect(isReactComponent(source.id)).toBe(true);
+    expect(getFramework(source.id)).toBe("React");
   });
 });

src/workers/parser/worker.js

@@ -12,7 +12,7 @@ import findOutOfScopeLocations from "./findOutOfScopeLocations";
 import { getNextStep } from "./steps";
 import getEmptyLines from "./getEmptyLines";
 import { hasSyntaxError } from "./validate";
-import { isReactComponent } from "./frameworks";
+import { getFramework } from "./frameworks";
 
 import { workerUtils } from "devtools-utils";
 const { workerHandler } = workerUtils;
@@ -32,5 +32,5 @@ self.onmessage = workerHandler({
   getNextStep,
   getEmptyLines,
   hasSyntaxError,
-  isReactComponent
+  getFramework
 });