feat(extract-component): Allow extracting component to same file

wix-incubator · Feb 15, 2019 · f012bda · f012bda
1 parent 4862afa
commit f012bda
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -23,16 +23,6 @@
   ],
   "main": "./out/extension",
   "contributes": {
-    "commands": [
-      {
-        "command": "extension.glean",
-        "title": "Extract to File"
-      },
-      {
-        "command": "extension.glean.react.stateless-to-stateful",
-        "title": "Convert to Stateful Component"
-      }
-    ],
     "configuration": {
       "type": "object",
       "title": "Glean",

diff --git a/src/extension.ts b/src/extension.ts
@@ -7,7 +7,7 @@ import { ProviderResult } from 'vscode';
 import { isStatelessComp, statelessToStatefulComponent } from './modules/statless-to-stateful';
 import { isStatefulComp, statefulToStatelessComponent } from './modules/stateful-to-stateless';
 import { extractToFile } from './modules/extract-to-file';
-import { extractJSXToComponent } from './modules/extract-to-component';
+import { extractJSXToComponent as extractJSXToComponentToFile, extractJSXToComponent } from './modules/extract-to-component';
 import { wrapJSXWithCondition } from './modules/wrap-with-conditional';
 
 export class CompleteActionProvider implements vscode.CodeActionProvider {
@@ -21,6 +21,9 @@ export class CompleteActionProvider implements vscode.CodeActionProvider {
 
     if (isJSX(text)) {
       return [{
+        command: 'extension.glean.react.extract-component-to-file',
+        title: 'Extract Component to File'
+      }, {
         command: 'extension.glean.react.extract-component',
         title: 'Extract Component'
       }, {
@@ -56,6 +59,8 @@ export function activate(context: vscode.ExtensionContext) {
 
   vscode.commands.registerCommand('extension.glean', extractToFile);
 
+  vscode.commands.registerCommand('extension.glean.react.extract-component-to-file', extractJSXToComponentToFile);
+
   vscode.commands.registerCommand('extension.glean.react.extract-component', extractJSXToComponent);
 
   vscode.commands.registerCommand('extension.glean.react.render-conditionally', wrapJSXWithCondition);

diff --git a/src/modules/extract-to-component.ts b/src/modules/extract-to-component.ts
@@ -1,4 +1,4 @@
-import { activeEditor, selectedText } from "../editor";
+import { activeEditor, selectedText, showInputBox, activeFileName } from "../editor";
 
 import { showDirectoryPicker } from "../directories-picker";
 
@@ -15,7 +15,7 @@ import { transformFromAst } from "@babel/core";
 import traverse from "@babel/traverse";
 import { buildComponent } from "./component-builder";
 
-function produceComponentNameFrom(fullPath: any) {
+export function produceComponentNameFrom(fullPath: any) {
   const baseName = path.basename(fullPath, path.extname(fullPath));
   return baseName
     .split("-")
@@ -24,7 +24,7 @@ function produceComponentNameFrom(fullPath: any) {
 }
 
 
-export function wrapWithComponent(fullPath, jsx): ProcessedSelection {
+export function wrapWithComponent(componentName, jsx): ProcessedSelection {
   const componentProperties = {
     argumentProps: new Set(),
     memberProps: new Set(),
@@ -77,7 +77,6 @@ export function wrapWithComponent(fullPath, jsx): ProcessedSelection {
   const code =
     processedJSX.slice(0, indexOfLastSemicolon) +
     processedJSX.slice(indexOfLastSemicolon + 1);
-  const componentName = produceComponentNameFrom(fullPath);
 
   return {
     text: buildComponent(componentName, code, componentProperties),
@@ -107,7 +106,7 @@ export function createComponentInstance(name, props) {
 }
 
 
-export async function extractJSXToComponent() {
+export async function extractJSXToComponentToFile() {
   var editor = activeEditor();
   if (!editor) {
     return; // No open text editor
@@ -117,7 +116,8 @@ export async function extractJSXToComponent() {
     const folderPath = await showDirectoryPicker()
     const filePath = await showFilePicker(folderPath);
 
-    const selectionProccessingResult = await wrapWithComponent(filePath, selectedText());
+    const componentName = produceComponentNameFrom(filePath);
+    const selectionProccessingResult = await wrapWithComponent(componentName, selectedText());
     await appendSelectedTextToFile(selectionProccessingResult, filePath);
     await importReactIfNeeded(filePath);
     await prependImportsToFileIfNeeded(selectionProccessingResult, filePath);
@@ -128,3 +128,22 @@ export async function extractJSXToComponent() {
     handleError(e);
   }
 }
+
+
+export async function extractJSXToComponent() {
+  var editor = activeEditor();
+  if (!editor) {
+    return; // No open text editor
+  }
+
+  try {
+    const componentName = await showInputBox(null, 'Select Component Name');
+
+    const selectionProccessingResult = await wrapWithComponent(componentName, selectedText());
+    await appendSelectedTextToFile(selectionProccessingResult, activeFileName());
+    const componentInstance = createComponentInstance(selectionProccessingResult.metadata.name, selectionProccessingResult.metadata.componentProperties);
+    await persistFileSystemChanges(replaceSelectionWith(componentInstance));
+  } catch (e) {
+    handleError(e);
+  }
+}