add linting slide and lateral composition

iammerrick · Mar 8, 2017 · 1b57c0f · 1b57c0f
1 parent 6e7b8db
commit 1b57c0f
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 22 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["es2015", "react"],
+  "plugins": ["transform-class-properties"]
 }
diff --git a/modules/Match.js b/modules/Match.js
@@ -1,30 +1,50 @@
 import React from 'react';
 import traverse from 'babel-traverse';
 
+const isMatching = ({match, ast}, context) => {
+  const matches = [];
+
+  const walk = {
+    enter(path) {
+      const isMatch = match(path);
+
+      if (isMatch) {
+        matches.push(
+          path
+        );
+      }
+    },
+  };
+
+  if (ast) {
+    ast.traverse(walk);
+  } else {
+    traverse(context.ast, walk);
+  }
+
+  return matches;
+};
+
 class Match extends React.Component {
-  render() {
-    const matches = [];
-    const matchTest = this.props.match;
-
-    const walk = {
-      enter(path) {
-        const isMatch = matchTest(path);
-
-        if (isMatch) {
-          matches.push(
-            path
-          );
-        }
-      },
-    };
-
-    if (this.props.ast) {
-      this.props.ast.traverse(walk);
-    } else {
-      traverse(this.context.ast, walk);
+
+  state = {
+    matches: isMatching(this.props, this.context),
+  }
+
+  componentDidUpdate(_, prev) {
+    if (prev.matches !== this.state.matches) {
+      this.props.onMatch && this.props.onMatch(this.state.matches);
     }
+  }
 
-    return React.Children.only(this.props.children(matches));
+  componentDidMount() {
+    this.props.onMatch && this.props.onMatch(this.state.matches);
+  }
+
+  render() {
+    return this.props.children 
+      ? React.Children.only(this.props.children(this.state.matches))
+      : null;
   }
 }
 

diff --git a/modules/__tests__/MatchTest.js b/modules/__tests__/MatchTest.js
@@ -1,6 +1,8 @@
 import ASTProvider from '../ASTProvider';
 import React from 'react';
 import Match  from '../Match';
+import Import from '../matchers/Import';
+import Variable from '../matchers/Variable';
 import * as t from 'babel-types';
 
 import renderer from 'react-test-renderer';
@@ -58,6 +60,52 @@ describe('Match', () => {
     expect(output.toJSON()).toMatchSnapshot(); 
   });
 
+  it('should support callbacks for lateral composition', () => {
+    class JQueryAndName extends React.Component {
+      state = {
+        jquery: false,
+        name: false,
+      };
+
+      handleImportMatch = (matches) => {
+        if (matches.length >= 1) {
+          this.setState({
+            jquery: true,
+          });
+        }
+      };
+
+      handleVariableMatch = (matches) => {
+        if (matches.length >= 1) {
+          this.setState({
+            name: true,
+          });
+        }
+      };
+
+      render() {
+        return (
+          <div>
+            <Import from='jquery' onMatch={this.handleImportMatch} />
+            <Variable name='name' onMatch={this.handleVariableMatch} />
+            { this.state.jquery && this.state.name 
+              ? 'Yes'
+              : 'Nope' }
+          </div>
+        );
+      }
+    }
+
+    const output = renderer.create(<ASTProvider source={`
+      import $ from 'jquery';
+      const name = $('Merrick');
+    `}>
+      <JQueryAndName />
+    </ASTProvider>);
+
+    expect(output.toJSON()).toMatchSnapshot(); 
+  });
+
   it('should allow match nesting', () => {
     const output = renderer.create(<ASTProvider source={`
       const name = 'Merrick';

diff --git a/modules/__tests__/__snapshots__/MatchTest.js.snap b/modules/__tests__/__snapshots__/MatchTest.js.snap
@@ -19,3 +19,9 @@ exports[`Match should match a variable 1`] = `
   VariableDeclarator
 </div>
 `;
+
+exports[`Match should support callbacks for lateral composition 1`] = `
+<div>
+  Yes
+</div>
+`;
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "babel-cli": "^6.18.0",
     "babel-loader": "^6.3.2",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",

diff --git a/resources/Slides.key b/resources/Slides.key
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,3 +19,9 @@ exports[`Match should match a variable 1`] = ` @@
       VariableDeclarator
     </div>
     `;
+    exports[`Match should support callbacks for lateral composition 1`] = `
+    <div>
+      Yes
+    </div>
+    `;