feat(as): pass jsx namespace as "as" to directive

in order to support aliased directives

ref Xiphe/patternson-project#18

Author: Xiphe

src/attributesToObject.js

@@ -16,8 +16,15 @@ export default function attributesToObject(t, someAttributes, directives) {
 
   const attributes = someAttributes
     .filter((attribute) => {
-      return t.isJSXSpreadAttribute(attribute.node) ||
-        attributeDirectives.indexOf(attribute.get('name.name').node) === -1;
+      if (t.isJSXSpreadAttribute(attribute.node)) {
+        return true;
+      }
+
+      const name = t.isJSXNamespacedName(attribute.get('name'))
+        ? attribute.get('name.name.name').node
+        : attribute.get('name.name').node;
+
+      return attributeDirectives.indexOf(name) === -1;
     })
     .map((attribute) => {
       if (t.isJSXSpreadAttribute(attribute.node)) {

src/babelPluginTransformJsxDirectives.js

@@ -40,6 +40,7 @@ export default function babelPluginTransformJsxDirectives(babel) {
           memo,
           {
             name: directiveName,
+            as,
             source,
             options,
             globalOptions,
@@ -63,7 +64,8 @@ export default function babelPluginTransformJsxDirectives(babel) {
                 t.jSXExpressionContainer(newElm),
                 newProps,
                 options,
-                globalOptions
+                globalOptions,
+                as
               ),
               Elm: newElm,
               props: newProps,
@@ -80,7 +82,8 @@ export default function babelPluginTransformJsxDirectives(babel) {
                 : t.stringLiteral(name),
               attributes,
               options,
-              globalOptions
+              globalOptions,
+              as
             ),
           };
         }, {

src/createDirective.js

@@ -7,7 +7,8 @@ export default function createDirective(
   Elm,
   props,
   options,
-  globalOptions
+  globalOptions,
+  as
 ) {
   const targetAttributes = [
     t.jSXAttribute(
@@ -27,6 +28,13 @@ export default function createDirective(
     ));
   }
 
+  if (as) {
+    targetAttributes.push(t.jSXAttribute(
+      t.jSXIdentifier('as'),
+      t.StringLiteral(as)
+    ));
+  }
+
   if (globalOptions) {
     const buildGlobalOptionsNode = template(`var x = ${JSON.stringify(globalOptions)};`);
     const globalOptionsNode = buildGlobalOptionsNode().declarations[0].init;

src/getApplicableDirectives.js

@@ -10,7 +10,19 @@ export default function getApplicableDirectives(babel, path, directives) {
     if (t.isJSXSpreadAttribute(attribute.node)) {
       return null;
     }
-    return attribute.get('name.name').node;
+
+    if (t.isJSXNamespacedName(attribute.get('name'))) {
+      return {
+        name: attribute.get('name.name.name').node,
+        as: attribute.get('name.namespace.name').node,
+        value: attribute.get('value').node,
+      };
+    }
+
+    return {
+      name: attribute.get('name.name').node,
+      value: attribute.get('value').node,
+    };
   }).filter(a => a);
 
   return directives.reduce(
@@ -32,7 +44,7 @@ export default function getApplicableDirectives(babel, path, directives) {
           name === directiveName
         ) || (
           viaAttribute &&
-          attributes.indexOf(directiveName) !== -1
+          attributes.map(({ name: n }) => n).indexOf(directiveName) !== -1
         )
       ) {
         const directive = {
@@ -43,11 +55,9 @@ export default function getApplicableDirectives(babel, path, directives) {
         };
 
         if (viaAttribute) {
-          const options = path.get('attributes').find((attribute) => {
-            return !t.isJSXSpreadAttribute(attribute.node) &&
-              attribute.get('name.name').node === directiveName;
-          }).get('value').node;
+          const { value: options, as } = attributes.find(({ name: n }) => n === directiveName);
 
+          directive.as = as;
           directive.options = transformOptions
             ? transformOptions(babel, options)
             : options;

test/__snapshots__/spec.js.snap

@@ -66,6 +66,12 @@ 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/spec.js

@@ -236,4 +236,15 @@ describe('babel-plugin-transform-jsx-directives', () => {
       transform('<foo />', { directives: [['conventional-changelog-core', { foo: true }, 'extra']] });
     }).toThrow(errorMatching('Unexpected directive declaration'));
   });
+
+  it('provides attribute namespace to directive', () => {
+    const code = transform(
+      `
+      <div bar:foo="baz" />
+      `,
+      { directives: [{ name: 'foo', source: 'foo.js' }] }
+    );
+
+    expect(code).toMatchSnapshot();
+  });
 });