fix(JSXNamespacedName): skip further transformation of namespaced directives

in order to prevent react from complaining about jsx namespaces

Author: Xiphe

src/babelPluginTransformJsxDirectives.js

@@ -18,7 +18,29 @@ export default function babelPluginTransformJsxDirectives(babel) {
   return {
     inherits: jsxSyntax,
     visitor: {
+      JSXNamespacedName(path, state) {
+        const openingElement = path.parentPath.parentPath;
+
+        if (!t.isJSXOpeningElement(openingElement)) {
+          return;
+        }
+
+        const directives = getApplicableDirectives(
+          babel,
+          openingElement,
+          normalizeDirectives(state.opts && state.opts.directives)
+        );
+        const name = path.get('name.name').node;
+
+        if (directives.filter(directive => directive.name === name).length) {
+          path.skip();
+        }
+      },
       JSXOpeningElement(path, state) {
+        if (t.isJSXNamespacedName(path.get('name'))) {
+          return;
+        }
+
         const directives = getApplicableDirectives(
           babel,
           path,

test/__snapshots__/spec.js.snap

@@ -57,6 +57,17 @@ exports[`babel-plugin-transform-jsx-directives imports directive module 1`] = `
 <_changelogDirective Elm=\\"changelog\\" props={{}} next={(_Elm, _props) => <_Elm {..._props} />} />;"
 `;
 
+exports[`babel-plugin-transform-jsx-directives namespaced/alias directives ignores namespaced elements 1`] = `
+"
+<div:foo bar:foo=\\"baz\\" />;"
+`;
+
+exports[`babel-plugin-transform-jsx-directives namespaced/alias directives provides attribute namespace to directive 1`] = `
+"import _fooDirective from \\"foo.js\\";
+
+<_fooDirective Elm=\\"div\\" props={{}} options=\\"baz\\" as=\\"bar\\" next={(_Elm, _props) => <_Elm {..._props} />} />;"
+`;
+
 exports[`babel-plugin-transform-jsx-directives prevents mutation of child options by parent directives 1`] = `
 "import _fooDirective from \\"./test/directives/foo.js\\";
 import _bazDirective from \\"./test/directives/baz.js\\";
@@ -66,12 +77,6 @@ import _bazDirective from \\"./test/directives/baz.js\\";
 }} options=\\"bar\\" next={(_Elm2, _props2) => <_bazDirective Elm={_Elm2} props={_props2} options=\\"qux\\" next={(_Elm, _props) => <_Elm {..._props} />} />} />;"
 `;
 
-exports[`babel-plugin-transform-jsx-directives provides attribute namespace to directive 1`] = `
-"import _fooDirective from \\"foo.js\\";
-
-<_fooDirective Elm=\\"div\\" props={{}} options=\\"baz\\" as=\\"bar\\" next={(_Elm, _props) => <_Elm {..._props} />} />;"
-`;
-
 exports[`babel-plugin-transform-jsx-directives provides global options to directive 1`] = `
 "import _fooDirective from \\"foo.js\\";
 

test/helpers/errorMatching.js

@@ -1,7 +1,7 @@
 export default function errorMatching(str) {
   return {
     asymmetricMatch(actual) {
-      expect(actual.constructor.name).toBe('Error');
+      expect(['Error', 'SyntaxError']).toContain(actual.constructor.name);
       expect(actual.message).toEqual(expect.stringMatching(str));
       return true;
     },

test/spec.js

@@ -237,14 +237,51 @@ describe('babel-plugin-transform-jsx-directives', () => {
     }).toThrow(errorMatching('Unexpected directive declaration'));
   });
 
-  it('provides attribute namespace to directive', () => {
-    const code = transform(
-      `
-      <div bar:foo="baz" />
-      `,
-      { directives: [{ name: 'foo', source: 'foo.js' }] }
-    );
+  describe('namespaced/alias directives', () => {
+    it('provides attribute namespace to directive', () => {
+      const code = transform(
+        `
+        <div bar:foo="baz" />
+        `,
+        { directives: [{ name: 'foo', source: 'foo.js' }] }
+      );
 
-    expect(code).toMatchSnapshot();
+      expect(code).toMatchSnapshot();
+    });
+
+    it('does not fail when used with react', () => {
+      expect(() => {
+        transform(
+          `
+          <div bar:foo="baz" />
+          `,
+          { directives: [{ name: 'foo', source: 'foo.js' }] },
+          ['react']
+        );
+      }).not.toThrowError();
+    });
+
+    it('fails on non-directive namespaced with react', () => {
+      expect(() => {
+        transform(
+          `
+          <div bar:baz="baz" />
+          `,
+          { directives: [{ name: 'foo', source: 'foo.js' }] },
+          ['react']
+        );
+      }).toThrowError(errorMatching('ReactJSX is not XML'));
+    });
+
+    it('ignores namespaced elements', () => {
+      const code = transform(
+        `
+        <div:foo bar:foo="baz" />
+        `,
+        { directives: [{ name: 'foo', source: 'foo.js' }] }
+      );
+
+      expect(code).toMatchSnapshot();
+    });
   });
 });