changed javascript to typescript

Author: ash-t-luu

package.json

@@ -28,11 +28,6 @@
   "main": "./build/extension.js",
   "contributes": {
     "commands": [
-      {
-        "command": "react-labyrinth.helloWorld",
-        "title": "Hello World",
-        "category": "React Labyrinth"
-      },
       {
         "command": "myExtension.showPanel",
         "title": "Show Panel",

postcss.config.cjs

@@ -1,5 +1,4 @@
 const tailwindcss = require('tailwindcss');
-// import * as tailwindcss from 'tailwindcss';
 
 module.exports = {
     plugins: [

src/extension.ts

@@ -1,7 +1,5 @@
 import * as vscode from 'vscode';
 import {createPanel} from './panel';
-// const { createPanel } = require('./src/panel');
-// const { Parser } = require('./src/parser');
 import { Parser } from './parser';
 
 // This method is called when your extension is activated

src/getNonce.ts

@@ -8,4 +8,3 @@ export function getNonce() {
     return text;
   }
 
-// module.exports = { getNonce }

src/panel.ts

@@ -1,4 +1,3 @@
-// const vscode = require('vscode');
 import * as vscode from 'vscode';
 import { getNonce } from './getNonce';
 import { Tree } from './types/tree';
@@ -83,5 +82,3 @@ function createWebviewHTML(URI: vscode.Uri, initialData: Tree) {
         `
     )
 }
-
-// module.exports = { createPanel };

src/parser.ts

@@ -1,14 +1,7 @@
-// const fs = require('fs')
 import * as fs from 'fs';
 import * as path from 'path';
-// const path = require('path')
-// const babel = require('@babel/parser');
 import * as babel from '@babel/parser';
 import { getNonce } from './getNonce';
-// const { getNonce } = require('./getNonce');
-// const { Tree } = require('./types/tree');
-// const { File } = require('@babel/types');
-// const ImportObj = require('./types/ImportObj')
 import { ImportObj } from './types/ImportObj';
 import { Tree } from "./types/tree";
 import { File } from '@babel/types';
@@ -164,7 +157,6 @@ export class Parser {
 
     // Recursively builds the React component tree structure starting from root node
     private parser(componentTree: Tree): Tree | undefined {
-        // console.log('componentTree:', componentTree);
         // If import is a node module, do not parse any deeper
         if (!['\\', '/', '.'].includes(componentTree.importPath[0])) {
             componentTree.thirdParty = true;
@@ -180,7 +172,7 @@ export class Parser {
         // Check that file has valid fileName/Path, if not found, add error to node and halt
         const fileName = this.getFileName(componentTree);
         if (!fileName) {
-            componentTree.error = 'File not found.';
+            componentTree.error = 'File not found';
             return;
         }
 
@@ -309,11 +301,8 @@ export class Parser {
             }
         };
 
-        // console.log('ast.program.body', body);
         const bodyCallee = body.filter((item) => item.type === 'VariableDeclaration');
         if (bodyCallee.length === 0) return false;
-        // console.log('bodyCallee', bodyCallee);
-        // console.log('bodyCallee.length', bodyCallee.length)
 
         const calleeHelper = (item) => {
             const hooksObj = {
@@ -368,7 +357,6 @@ export class Parser {
             const calleeArr = bodyCallee[0].declarations[0]?.init?.body?.body;
             if (calleeArr === undefined) return false;
 
-            // console.log('calleArr:', calleeArr);
             let checkTrue = false;
             for (let i = 0; i < calleeArr.length; i++) {
                 if (checkTrue) return true;
@@ -382,7 +370,6 @@ export class Parser {
                 try {
                     if (bodyCallee[i].declarations[0]?.init?.body?.body) {
                         calleeArr = bodyCallee[i].declarations[0].init.body.body;
-                        // console.log('calleeArr from body', calleeArr);
                     }
                 }
                 catch (err) {
@@ -407,9 +394,7 @@ export class Parser {
         importsObj: ImportObj,
         parentNode: Tree
       ): Tree[] {
-        // let childNodes = {};
-        // let props = {};
-        // let token;
+
     let childNodes: { [key: string]: Tree } = {};
     let props: { [key: string]: boolean } = {};
     let token: { [key: string]: any };
@@ -483,6 +468,7 @@ export class Parser {
                 count: 1,
                 props: props,
                 children: [],
+                // consider adding the id to the parentList array somehow for D3 integration...
                 parentList: [parent.filePath].concat(parent.parentList),
                 error: '',
                 isClientComponent: false
@@ -540,5 +526,3 @@ export class Parser {
         return false;
     }
 }
-
-// module.exports = { Parser };

src/webview/Flow.tsx

@@ -16,7 +16,7 @@ import FlowBuilder from './flowBuilder';
 const onInit = (reactFlowInstance: ReactFlowInstance) =>
   console.log("flow loaded:", reactFlowInstance);
 
-const OverviewFlow: React.FC = () => {
+const OverviewFlow = () => {
   const initialNodes = [];
   const initialEdges = [];
 
@@ -57,8 +57,6 @@ const OverviewFlow: React.FC = () => {
       <MiniMap
         nodeStrokeColor={(n): string => {
           if (n.style?.backgroundColor) return n.style.backgroundColor;
-          // if (n.data.label.props.className.includes('orange')) return "#fdba74";
-          // if (n.data.label.props.className.includes('blue')) return "#93C5FD";
           if (n.type === "default") return "#1a192b";
 
           return "#eee";

src/webview/flowBuilder.tsx

@@ -116,7 +116,7 @@ class FlowBuilder {
 
   public build(settings: Settings): void {
     const treeParsed = JSON.parse(JSON.stringify(this.parsedData[0]));
-    console.log('settings: ', settings);
+    // console.log('settings: ', settings);
     const traverse = (node: ParsedDataItem): void => {
       let validChildren: ParsedDataItem[] = [];
 

webpack.config.ts

@@ -1,35 +1,3 @@
-// import * as path from 'path';
-
-// module.exports = {
-//   entry: './src/webview/index.tsx',
-//   output: {
-//     filename: 'bundle.js',
-//     path: path.resolve(__dirname, './build'),
-//   },
-//   resolve: {
-//     extensions: ['.js', '.ts', '.tsx', '.css'],
-//   },
-//   module: {
-//     rules: [
-//       // {
-//       //   test: /\.jsx?/,
-//       //   exclude: /node_modules/,
-//       //   use: {
-//       //     loader: "babel-loader",
-//       //     options: {
-//       //       presets: ['@babel/preset-env', '@babel/preset-react']
-//       //     }
-//       //   }
-//       // },
-//       { test: /\.tsx?$/, use: ['babel-loader', 'ts-loader'] },
-//       {
-//         test: /\.(css)$/,
-//         use: ["style-loader", "css-loader", "postcss-loader"],
-//       },
-//     ]
-//   },
-//   mode: "development"
-// }
 
 import * as path from 'path';
 import * as webpack from 'webpack';