feat(globalOptions): add feature

so that options can be provided globally to all directives

in order to reduce boilerplate code

ref Xiphe/patternson-project#18

Author: Xiphe

package-lock.json

@@ -64,6 +64,7 @@
     "semantic-release": "8.0.3"
   },
   "dependencies": {
-    "babel-plugin-syntax-jsx": "^6.18.0"
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-template": "6.26.0"
   }
 }

package.json

@@ -38,7 +38,12 @@ export default function babelPluginTransformJsxDirectives(babel) {
 
         const { inner } = directives.reduce((
           memo,
-          { name: directiveName, source, options },
+          {
+            name: directiveName,
+            source,
+            options,
+            globalOptions,
+          },
           i
         ) => {
           const localName = importDirective(babel, path, directiveName, source);
@@ -57,7 +62,8 @@ export default function babelPluginTransformJsxDirectives(babel) {
                 memo,
                 t.jSXExpressionContainer(newElm),
                 newProps,
-                options
+                options,
+                globalOptions
               ),
               Elm: newElm,
               props: newProps,
@@ -73,7 +79,8 @@ export default function babelPluginTransformJsxDirectives(babel) {
                 ? t.jSXExpressionContainer(t.identifier(name))
                 : t.stringLiteral(name),
               attributes,
-              options
+              options,
+              globalOptions
             ),
           };
         }, {

src/babelPluginTransformJsxDirectives.js

@@ -1,10 +1,13 @@
+import template from 'babel-template';
+
 export default function createDirective(
   t,
   directiveName,
   inner,
   Elm,
   props,
-  options
+  options,
+  globalOptions
 ) {
   const targetAttributes = [
     t.jSXAttribute(
@@ -24,6 +27,16 @@ export default function createDirective(
     ));
   }
 
+  if (globalOptions) {
+    const buildGlobalOptionsNode = template(`var x = ${JSON.stringify(globalOptions)};`);
+    const globalOptionsNode = buildGlobalOptionsNode().declarations[0].init;
+
+    targetAttributes.push(t.jSXAttribute(
+      t.jSXIdentifier('globalOptions'),
+      t.JSXExpressionContainer(globalOptionsNode)
+    ));
+  }
+
   targetAttributes.push(t.jSXAttribute(
     t.jSXIdentifier('next'),
     t.jSXExpressionContainer(t.arrowFunctionExpression(

src/createDirective.js

@@ -21,6 +21,7 @@ export default function getApplicableDirectives(babel, path, directives) {
         type,
         source,
         transformOptions,
+        globalOptions,
       }
     ) => {
       const viaAttribute = type === 'attribute';
@@ -36,6 +37,7 @@ export default function getApplicableDirectives(babel, path, directives) {
       ) {
         const directive = {
           name: directiveName,
+          globalOptions,
           type,
           source,
         };

src/getApplicableDirectives.js

@@ -46,17 +46,35 @@ function resolveSource(file, source) {
   return path.resolve(path.dirname(file), source);
 }
 
-function prepare(someDirectives) {
-  if (typeof someDirectives === 'string') {
-    const { file, directives } = load(someDirectives);
+function getGlobalOptions(directive) {
+  if (Array.isArray(directive)) {
+    if (directive.length > 2) {
+      throw new Error(`Unexpected directive declaration ${JSON.stringify(directive)}`);
+    }
+
+    return {
+      directive: directive[0],
+      globalOptions: directive[1],
+    };
+  }
+
+  return { directive };
+}
+
+function prepare(directiveWithOptions) {
+  const { directive: someDirective, globalOptions } = getGlobalOptions(directiveWithOptions);
+
+  if (typeof someDirective === 'string') {
+    const { file, directives } = load(someDirective);
     return toArray(directives).map((directive) => {
       return Object.assign({}, directive, {
         source: resolveSource(file, directive.source),
+        globalOptions,
       });
     });
   }
 
-  return toArray(someDirectives);
+  return [Object.assign({}, { globalOptions }, someDirective)];
 }
 
 function addDefaults(directive) {
@@ -71,8 +89,8 @@ export default function normalizeDirectives(directives) {
     return [];
   }
 
-  return directives.reduce((memo, someDirectives) => {
-    return memo.concat(prepare(someDirectives).map(addDefaults));
+  return directives.reduce((memo, directive) => {
+    return memo.concat(prepare(directive).map(addDefaults));
   }, []).sort(({ priority }, { priority: otherPriority }) => {
     return priority - otherPriority;
   });

src/normalizeDirectives.js

@@ -66,6 +66,21 @@ 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 global options to directive 1`] = `
+"import _fooDirective from \\"foo.js\\";
+
+<_fooDirective Elm=\\"div\\" props={{}} options=\\"Bar\\" globalOptions={{
+      \\"baz\\": \\"qux\\"
+}} next={(_Elm, _props) => <_Elm {..._props} />} />;"
+`;
+
+exports[`babel-plugin-transform-jsx-directives provides global options to directive imported from string 1`] = `
+"import _changelogDirective from \\"conventional-changelog-core/conventionalChangelogDirective.js\\";
+<_changelogDirective Elm=\\"changelog\\" props={{}} globalOptions={{
+  \\"foo\\": true
+}} next={(_Elm, _props) => <_Elm {..._props} />} />;"
+`;
+
 exports[`babel-plugin-transform-jsx-directives transforms an atrribute directive 1`] = `
 "import _actionDirective from \\"./test/directives/action.js\\";
 <_actionDirective Elm={Button} props={{