feat(transformOptions): support directive specific transformations

a directive can now specify a transformOptions method to prepare its own options

in order to move logic from runtime into the compiler

Author: Xiphe

src/getApplicableDirectives.js

@@ -14,7 +14,7 @@ export default function getApplicableDirectives(babel, path, directives) {
   }).filter(a => a);
 
   return directives.reduce(
-    (memo, { name: directiveName, type, source }) => {
+    (memo, { name: directiveName, type, source, transformOptions }) => {
       const viaAttribute = type === 'attribute';
 
       if (
@@ -33,10 +33,14 @@ export default function getApplicableDirectives(babel, path, directives) {
         };
 
         if (viaAttribute) {
-          directive.options = path.get('attributes').find((attribute) => {
+          const options = path.get('attributes').find((attribute) => {
             return !t.isJSXSpreadAttribute(attribute.node) &&
               attribute.get('name.name').node === directiveName;
           }).get('value').node;
+
+          directive.options = transformOptions
+            ? transformOptions(babel, options)
+            : options;
         }
 
         memo.push(directive);

test/__snapshots__/spec.js.snap

@@ -22,6 +22,14 @@ import _actionDirective from \\"./test/directives/action.js\\";
 <_htmlDirective Elm=\\"html\\" props={{}} next={(_Elm2, _props2) => <_actionDirective Elm={_Elm2} props={_props2} options={woosa} next={(_Elm, _props) => <_Elm {..._props} />} />} />;"
 `;
 
+exports[`babel-plugin-transform-jsx-directives applies transformOptions 1`] = `
+"import _fooDirective from \\"foo.js\\";
+
+<_fooDirective Elm=\\"div\\" props={{}} options={{
+      value: \\"Bar\\"
+}} next={(_Elm, _props) => <_Elm {..._props} />} />;"
+`;
+
 exports[`babel-plugin-transform-jsx-directives converts jsx spread operators to object spread 1`] = `
 "import _htmlDirective from \\"./test/directives/html.js\\";
 

test/spec.js

@@ -154,4 +154,32 @@ describe('babel-plugin-transform-jsx-directives', () => {
       transform('<foo />', { directives: ['foo-module'] });
     }).toThrow(errorMatching('Cannot find module'));
   });
+
+  it('applies transformOptions', () => {
+    const code = transform(
+      `
+      <div foo="Bar" />
+      `,
+      {
+        directives: [
+          {
+            name: 'foo',
+            transformOptions({ types: t }, node) {
+              return t.jSXExpressionContainer(
+                t.objectExpression([
+                  t.objectProperty(
+                    t.identifier('value'),
+                    node
+                  ),
+                ])
+              );
+            },
+            source: 'foo.js',
+          },
+        ],
+      }
+    );
+
+    expect(code).toMatchSnapshot();
+  });
 });