From b9ba061f3112a789e8a037902c5186e083eacb80 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Mon, 27 Jan 2020 19:13:38 +0530
Subject: [PATCH] examples - refactor to load transformer from separate file

---
 example/src/App.js                        | 61 -----------------------
 example/src/App.tsx                       | 48 ++++++++++++++++++
 example/src/index.tsx                     |  5 +-
 example/src/transforms/index.ts           |  8 +++
 example/src/transforms/swap-expression.ts | 30 +++++++++++
 example/src/types.ts                      |  6 +++
 6 files changed, 96 insertions(+), 62 deletions(-)
 delete mode 100644 example/src/App.js
 create mode 100644 example/src/App.tsx
 create mode 100644 example/src/transforms/index.ts
 create mode 100644 example/src/transforms/swap-expression.ts
 create mode 100644 example/src/types.ts

diff --git a/example/src/App.js b/example/src/App.js
deleted file mode 100644
index 4888270..0000000
--- a/example/src/App.js
+++ /dev/null
@@ -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>
-    );
-  }
-}
diff --git a/example/src/App.tsx b/example/src/App.tsx
new file mode 100644
index 0000000..c96b8a1
--- /dev/null
+++ b/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 />;
+}
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 763f239..a727bef 100644
--- a/example/src/index.tsx
+++ b/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")
+);
diff --git a/example/src/transforms/index.ts b/example/src/transforms/index.ts
new file mode 100644
index 0000000..8004532
--- /dev/null
+++ b/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
+};
diff --git a/example/src/transforms/swap-expression.ts b/example/src/transforms/swap-expression.ts
new file mode 100644
index 0000000..d00a2e3
--- /dev/null
+++ b/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;
diff --git a/example/src/types.ts b/example/src/types.ts
new file mode 100644
index 0000000..0f161aa
--- /dev/null
+++ b/example/src/types.ts
@@ -0,0 +1,6 @@
+import * as ts from "typescript";
+
+export interface TransformModuleExport {
+  sourceCodeString: string;
+  transformer: ts.TransformerFactory<ts.SourceFile>;
+}