Reorganize transformer into a factory

- factory accepts options
- add index that exports the factory as default
- update test runner

Author: Igorbek

src/__tests__/baselines.test.ts

@@ -1,9 +1,10 @@
 import 'jest';
 import * as ts from 'typescript';
 import * as fs from 'fs';
-import transformer from '../transformer';
+import createTransformer from '../';
 
 const printer = ts.createPrinter();
+const transformer = createTransformer();
 
 interface TransformBaseline {
     type: 'transform-baseline';
@@ -32,6 +33,7 @@ ${indent(obj.transformed)}
 `
 });
 
+
 function expectTransform(filename: string) {
     const content = fs.readFileSync(__dirname + '/baselines/' + filename).toString();
     const sourceFile = ts.createSourceFile(filename, content, ts.ScriptTarget.Latest);

src/createTransformer.ts

@@ -0,0 +1,123 @@
+import * as ts from 'typescript';
+
+import {Options} from './models/Options';
+
+/** Detects that a node represents a styled function
+ * Recognizes the following patterns:
+ * 
+ * styled.tag
+ * Component.extend
+ * styled(Component)
+ * styledFunction.attrs(attributes)
+*/
+function isStyledFunction(node: ts.Node): boolean {
+    if (node.kind === ts.SyntaxKind.PropertyAccessExpression) {
+        if (isStyledObject((node as ts.PropertyAccessExpression).expression)) {
+            return true;
+        }
+
+        if ((node as ts.PropertyAccessExpression).name.text === 'extend'
+            && isValidComponent((node as ts.PropertyAccessExpression).expression)) {
+
+            return true;
+        }
+
+        return false;
+    }
+
+    if (node.kind === ts.SyntaxKind.CallExpression
+        && (node as ts.CallExpression).arguments.length === 1) {
+
+        if (isStyledObject((node as ts.CallExpression).expression)) {
+            return true;
+        }
+
+        if (isStyledAttrs((node as ts.CallExpression).expression)) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function isStyledObject(node: ts.Node) {
+    return node && node.kind === ts.SyntaxKind.Identifier && (node as ts.Identifier).text === 'styled';
+}
+
+function isValidComponent(node: ts.Node) {
+    return node && node.kind === ts.SyntaxKind.Identifier && isValidComponentName((node as ts.Identifier).text);
+}
+
+function isValidTagName(name: string) {
+    return name[0] === name[0].toLowerCase();
+}
+
+function isValidComponentName(name: string) {
+    return name[0] === name[0].toUpperCase();
+}
+
+function isStyledAttrs(node: ts.Node) {
+    return node && node.kind === ts.SyntaxKind.PropertyAccessExpression
+        && (node as ts.PropertyAccessExpression).name.text === 'attrs'
+        && isStyledFunction((node as ts.PropertyAccessExpression).expression);
+}
+
+function defaultGetDisplayName(filename: string, bindingName: string | undefined): string | undefined {
+    return bindingName;
+}
+
+export function createTransformer({ getDisplayName = defaultGetDisplayName }: Partial<Options> = {}) {
+    /**
+     * Infers display name of a styled component.
+     * Recognizes the following patterns:
+     *
+     * (const|var|let) ComponentName = styled...
+     * export default styled...
+    */
+    function getDisplayNameFromNode(node: ts.Node): string | undefined {
+        if (node.kind === ts.SyntaxKind.VariableDeclaration
+            && (node as ts.VariableDeclaration).name.kind === ts.SyntaxKind.Identifier) {
+            return getDisplayName(node.getSourceFile().fileName, ((node as ts.VariableDeclaration).name as ts.Identifier).text);
+        }
+
+        if (node.kind === ts.SyntaxKind.ExportAssignment) {
+            return getDisplayName(node.getSourceFile().fileName, undefined);
+        }
+
+        return undefined;
+    }
+
+    const transformer: ts.TransformerFactory<ts.SourceFile> = (context) => {
+        const visitor: ts.Visitor = (node) => {
+            if (node.parent
+                && node.parent.kind === ts.SyntaxKind.TaggedTemplateExpression
+                && (node.parent as ts.TaggedTemplateExpression).tag === node
+                && node.parent.parent
+                && node.parent.parent.kind === ts.SyntaxKind.VariableDeclaration
+                && isStyledFunction(node)) {
+
+                const displayName = getDisplayNameFromNode(node.parent.parent);
+
+                if (displayName) {
+                    return ts.createCall(
+                        ts.createPropertyAccess(node as ts.Expression, 'withConfig'),
+                        undefined,
+                        [ts.createObjectLiteral([ts.createPropertyAssignment('displayName', ts.createLiteral(displayName))])]);
+                }
+            }
+
+            ts.forEachChild(node, n => {
+                if (!n.parent)
+                    n.parent = node;
+            });
+
+            return ts.visitEachChild(node, visitor, context);
+        }
+
+        return (node) => ts.visitNode(node, visitor);
+    };
+
+    return transformer;
+}
+
+export default createTransformer;

src/index.ts

@@ -0,0 +1,4 @@
+import createTransformer from './createTransformer';
+
+export { createTransformer };
+export default createTransformer;

src/models/Options.ts

@@ -0,0 +1,8 @@
+export interface Options {
+    /**
+     * This method is used to determine component display name from filename and its binding name.
+     * 
+     * Default strategy is to use bindingName if it's defined and use inference algorithm from filename otherwise.
+     */
+    getDisplayName(filename: string, bindingName: string | undefined): string | undefined;
+}

src/runner.ts

@@ -1,6 +1,8 @@
 import * as ts from 'typescript';
 
-import sampleTransformer from './transformer';
+import createTransformer from './';
+
+const sampleTransformer = createTransformer();
 
 function main(files: string[]) {
   // Normally these would be parsed from tsconfig.json