From 056e97f660d43e9a7fbb0021dd0e3426dbb8dc10 Mon Sep 17 00:00:00 2001
From: Aleksey Okhrimenko <ayuokhrimenko@avito.ru>
Date: Mon, 24 Aug 2020 18:43:26 +0300
Subject: [PATCH] Fix for #3, #5

---
 .vscode/launch.json              |  1 +
 CHANGELOG.md                     |  5 +++
 package-lock.json                |  2 +-
 package.json                     |  2 +-
 src/modules/extract-to-folder.ts | 60 +++++++++++++++++++++++---------
 src/template-parser.ts           | 14 ++++++++
 6 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index b1fbaf5..98ddb3e 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -24,6 +24,7 @@
 			"request": "launch",
 			"runtimeExecutable": "${execPath}",
 			"args": [
+        "--disable-extensions",
 				"--extensionDevelopmentPath=${workspaceFolder}",
 				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
 			],
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c37687..36ea868 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change Log
 
+## 0.1.0
+
+- Get style file extension from `@schematics/angular:component`
+- Fix extraction of structural directives (ngFor etc..)
+
 ## 0.0.5
 
 - Fix wrong contructor keyword placement
diff --git a/package-lock.json b/package-lock.json
index 99172ff..26409ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "arrr",
-	"version": "0.0.5",
+	"version": "0.1.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 9ba3ffd..f30bb77 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
 	"name": "arrr",
 	"displayName": "arrr",
 	"description": "The extension provides refactoring tools for your Angular codebase",
-	"version": "0.0.5",
+	"version": "0.1.0",
 	"publisher": "obenjiro",
 	"engines": {
 		"vscode": "^1.47.0"
diff --git a/src/modules/extract-to-folder.ts b/src/modules/extract-to-folder.ts
index d3ec73d..322c046 100644
--- a/src/modules/extract-to-folder.ts
+++ b/src/modules/extract-to-folder.ts
@@ -1,18 +1,33 @@
+import * as fs from "fs";
+import * as path from "path";
 import * as vscode from "vscode";
-import {activeFileName, getSelectedText, getSelectionOffsetRange, importMissingDependencies,} from "../editor";
-import {getAllTargets,} from "../template-parser";
-import {showFilePicker} from "../file-picker";
-import {createFileIfDoesntExist, persistFileSystemChanges, replaceTextInFile,} from "../file-system";
-import {pascalCase} from "change-case";
-import {appendSelectedTextToFile, replaceSelectionWith,} from "../code-actions";
-import {showDirectoryPicker} from "../directories-picker";
-import {getComponentInstance, getComponentText, getSpecText,} from "./extract-to-folder-template";
-
-const fs = require("fs");
-const path = require("path");
+import {
+  activeFileName,
+  getSelectedText,
+  getSelectionOffsetRange,
+  importMissingDependencies,
+} from "../editor";
+import { getAllTargets } from "../template-parser";
+import { showFilePicker } from "../file-picker";
+import {
+  createFileIfDoesntExist,
+  persistFileSystemChanges,
+  replaceTextInFile,
+} from "../file-system";
+import { pascalCase } from "change-case";
+import {
+  appendSelectedTextToFile,
+  replaceSelectionWith,
+} from "../code-actions";
+import { showDirectoryPicker } from "../directories-picker";
+import {
+  getComponentInstance,
+  getComponentText,
+  getSpecText,
+} from "./extract-to-folder-template";
 
 export async function extractToFolder() {
-  const {start, end} = getSelectionOffsetRange();
+  const { start, end } = getSelectionOffsetRange();
 
   if (start && end) {
     try {
@@ -31,9 +46,10 @@ export async function extractToFolder() {
 
         const componentName = parts[parts.length - 1];
 
+        const styleExt = await getStyleExt();
 
         const htmlFilePath = `${filePath}/${componentName}.component.html`;
-        const cssFilePath = `${filePath}/${componentName}.component.css`;
+        const cssFilePath = `${filePath}/${componentName}.component.${styleExt}`;
         const tsFilePath = `${filePath}/${componentName}.component.ts`;
         const specFilePath = `${filePath}/${componentName}.component.spec.ts`;
 
@@ -42,14 +58,14 @@ export async function extractToFolder() {
         await createFileIfDoesntExist(tsFilePath);
         await createFileIfDoesntExist(specFilePath);
 
-        await appendSelectedTextToFile({text}, htmlFilePath);
-        await appendSelectedTextToFile({text: ``}, cssFilePath);
+        await appendSelectedTextToFile({ text }, htmlFilePath);
+        await appendSelectedTextToFile({ text: `` }, cssFilePath);
         await appendSelectedTextToFile(
-          {text: getComponentText(componentName, targets)},
+          { text: getComponentText(componentName, targets) },
           tsFilePath
         );
         await appendSelectedTextToFile(
-          {text: getSpecText(componentName)},
+          { text: getSpecText(componentName) },
           specFilePath
         );
 
@@ -120,3 +136,13 @@ async function getComponentNameFromHtmlFile(filePath) {
   return (tsContent.match(/export class\s+([\w_]+)/) || [])[1];
 }
 
+async function getStyleExt() {
+  try {
+    const [angularJsonPath] = await vscode.workspace.findFiles("angular.json");
+    const config = JSON.parse(fs.readFileSync(angularJsonPath.path, "utf-8"));
+
+    return config.schematics["@schematics/angular:component"].styleext;
+  } catch (e) {
+    return "css";
+  }
+}
diff --git a/src/template-parser.ts b/src/template-parser.ts
index 923bca1..54bb22e 100644
--- a/src/template-parser.ts
+++ b/src/template-parser.ts
@@ -156,5 +156,19 @@ export function getAllTargets(text) {
     }
   );
 
+  // removing variables refrences
+  visitTarget(
+    ast,
+    (value: any) => {
+      return getNodeCtor(value) === "Variable";
+    },
+    (node: any, parent: any) => {
+      if (targets.indexOf(node.name) > -1) {
+        targets.splice(targets.indexOf(node.name));
+      }
+      return KEEP_VISIT;
+    }
+  );
+
   return [...new Set(targets)];
 }
\ No newline at end of file