examples - refactor to load transformer from separate file

example/src/App.js

@@ -1,61 +0,0 @@
-import React, { Component } from "react";
-
-import {
-  ASTVisualizer,
-  initSourceFile,
-  updateSourceFile
-} from "ts-transformer-visualizer";
-import * as ts from "typescript";
-
-const source = "x = y;\nx=1;\nx=y=z;";
-
-const mainFile = ts.createSourceFile("/test", source, ts.ScriptTarget.ES2015);
-
-const transformer = context => {
-  return sourceFile => {
-    /**
-     *
-     * @param {ts.Node} node
-     * @returns {ts.VisitResult<ts.Node>}
-     */
-    const visitor = node => {
-      if (
-        ts.isBinaryExpression(node) &&
-        node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
-        ts.isIdentifier(node.left) &&
-        ts.isIdentifier(node.right)
-      ) {
-        return ts.updateBinary(node, node.right, node.left);
-      }
-
-      return ts.visitEachChild(node, visitor, context);
-    };
-    return ts.visitNode(sourceFile, visitor);
-  };
-};
-
-// const printer = ts.createPrinter();
-// const result = ts.transform(mainFile, [transformer]);
-// const transformedSourceFile = result.transformed[0];
-// const newContent = printer.printFile(transformedSourceFile);
-// result.dispose();
-
-// console.log(newContent);
-
-export default class App extends Component {
-  componentDidMount() {
-    initSourceFile(mainFile);
-
-    setTimeout(() => {
-      const modifiedFile = ts.transform(mainFile, [transformer]).transformed[0];
-      updateSourceFile(modifiedFile);
-    }, 5000);
-  }
-  render() {
-    return (
-      <div>
-        <ASTVisualizer />
-      </div>
-    );
-  }
-}

example/src/App.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+
+import {
+  ASTVisualizer,
+  initSourceFile,
+  updateSourceFile,
+  clearSourceFile
+} from "ts-transformer-visualizer";
+import * as ts from "typescript";
+
+import { moduleMap, ModuleNames } from "./transforms";
+
+// result.dispose();
+
+export default function App({
+  moduleName,
+  timeDelayMs = 3000
+}: {
+  moduleName: ModuleNames;
+  timeDelayMs?: number;
+}) {
+  // Create sourceFile and reset on route change
+  useEffect(() => {
+    const { sourceCodeString, transformer } = moduleMap[moduleName];
+
+    // 1. Create sourceFile and pass it to visualizer
+    const mainFile = ts.createSourceFile(
+      "/test",
+      sourceCodeString,
+      ts.ScriptTarget.ES2015
+    );
+    initSourceFile(mainFile);
+
+    // 2. Set timeout to run transformer and update visualizer
+    const timeoutID = setTimeout(() => {
+      const modifiedFile = ts.transform(mainFile, [transformer]).transformed[0];
+      updateSourceFile(modifiedFile);
+    }, timeDelayMs);
+
+    return () => {
+      // 3. Clean timeout and reset visualizer
+      clearTimeout(timeoutID);
+      clearSourceFile();
+    };
+  });
+
+  return <ASTVisualizer />;
+}

example/src/index.tsx

@@ -4,4 +4,7 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(
+  <App moduleName="swap-expression" />,
+  document.getElementById("root")
+);

example/src/transforms/index.ts

@@ -0,0 +1,8 @@
+import SwapExpression from "./swap-expression";
+import { TransformModuleExport } from "src/types";
+
+export type ModuleNames = "swap-expression";
+
+export const moduleMap: { [key in ModuleNames]: TransformModuleExport } = {
+  "swap-expression": SwapExpression
+};

example/src/transforms/swap-expression.ts

@@ -0,0 +1,30 @@
+import * as ts from "typescript";
+import { TransformModuleExport } from "../types";
+
+const sourceCodeString = `x = y; a = b + c`;
+
+const transformer: ts.TransformerFactory<ts.SourceFile> = context => {
+  return sourceFile => {
+    const visitor = (node: ts.Node): ts.Node => {
+      if (
+        ts.isBinaryExpression(node) &&
+        node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
+        ts.isIdentifier(node.left) &&
+        ts.isIdentifier(node.right)
+      ) {
+        return ts.updateBinary(node, node.right, node.left);
+      }
+
+      return ts.visitEachChild(node, visitor, context);
+    };
+
+    return ts.visitNode(sourceFile, visitor);
+  };
+};
+
+const toExport: TransformModuleExport = {
+  sourceCodeString,
+  transformer
+};
+
+export default toExport;

example/src/types.ts

@@ -0,0 +1,6 @@
+import * as ts from "typescript";
+
+export interface TransformModuleExport {
+  sourceCodeString: string;
+  transformer: ts.TransformerFactory<ts.SourceFile>;
+}