refactor: use AST literals to generate AST

Author: andreypopp

package.json

@@ -4,6 +4,9 @@
   "description": "Define styled React components using CSS based module format",
   "main": "lib/index.js",
   "babel": {
+    "plugins": [
+      "ast-literal"
+    ],
     "presets": [
       "prometheusresearch"
     ]
@@ -39,14 +42,16 @@
   "dependencies": {
     "babel-types": "^6.7.2",
     "loader-utils": "^0.2.14",
-    "postcss": "^5.0.19"
+    "postcss": "^5.0.19",
+    "babel-plugin-ast-literal": "^0.4.0"
   },
   "devDependencies": {
     "babel-cli": "^6.7.5",
     "babel-core": "^6.7.6",
     "babel-preset-prometheusresearch": "^0.1.0",
     "eslint": "^2.7.0",
     "eslint-config-prometheusresearch": "^0.2.0",
-    "mocha": "^2.4.5"
+    "mocha": "^2.4.5",
+    "babel-generator": "^6.7.5"
   }
 }

src/__tests__/fixtures/imported-base.js

@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "css";
-import Label__Base from "somelib/Label";
+import { default as Label__Base } from "somelib/Label";
 export function Label(props) {
   return React.createElement(Label__Base, { ...props, className: styles.Label
   });

src/index.js

@@ -4,6 +4,7 @@
  */
 
 import * as types from 'babel-types';
+import {identifier, stringLiteral} from 'babel-types';
 import * as postcss from 'postcss';
 import * as LoaderUtils from 'loader-utils';
 import generate from 'babel-generator';
@@ -55,59 +56,39 @@ function renderToCSS(source: string, _config: RenderConfig): string {
 
 function renderToJS(source: string, config: RenderConfig): string {
   let root = postcss.parse(source);
+  let imports = stmt`
+      import React from "react";
+      import styles from "${stringLiteral(config.requestCSS)}";
+  `;
   let statements = [];
-  let component = types.stringLiteral('div');
+  let component = stringLiteral('div');
   root.walkRules(node => {
     if (!Syntax.isComponent(node)) {
       return;
     }
     node.walkDecls(decl => {
       if (decl.prop === 'base') {
         if (HTMLTagList[decl.value]) {
-          component = types.stringLiteral(decl.value);
+          component = stringLiteral(decl.value);
         } else {
-          component = types.identifier(node.selector + '__Base');
-          statements.unshift(
-            ComponentRef.importDeclaration(component, decl.value)
-          );
+          component = identifier(node.selector + '__Base');
+          let ref = ComponentRef.parse(decl.value);
+          imports.push(stmt`
+            import {
+              ${identifier(ref.name)} as ${component}
+            } from "${stringLiteral(ref.source)}";
+          `);
         }
       }
     });
-    statements.push(exportComponent(node.selector, component, node.selector));
+    statements.push(stmt`
+      export function ${identifier(node.selector)}(props) {
+        return React.createElement(
+          ${component},
+          {...props, className: styles.${identifier(node.selector)}}
+        );
+      }
+    `);
   });
-  statements.unshift(
-    types.importDeclaration(
-      [types.importDefaultSpecifier(types.identifier('styles'))],
-      types.stringLiteral(config.requestCSS)
-    )
-  );
-  statements.unshift(
-    types.importDeclaration(
-      [types.importDefaultSpecifier(types.identifier('React'))],
-      types.stringLiteral('react')
-    )
-  );
-  return generate(types.program(statements)).code;
-}
-
-function exportComponent(name: string, component: string, className: string) {
-  let propsNode = types.objectExpression([
-    types.spreadProperty(types.identifier('props')),
-    types.objectProperty(
-      types.identifier('className'),
-      types.memberExpression(types.identifier('styles'), types.identifier(className))
-    )
-  ]);
-  let elementNode = types.callExpression(
-    types.memberExpression(
-      types.identifier('React'),
-      types.identifier('createElement')),
-    [component, propsNode]
-  );
-  let componentNode = types.functionDeclaration(
-    types.identifier(name),
-    [types.identifier('props')],
-    types.blockStatement([types.returnStatement(elementNode)])
-  );
-  return types.exportNamedDeclaration(componentNode, [], null);
+  return generate(types.program(imports.concat(statements))).code;
 }