Merge pull request #9 from oslabs-beta/chris/typescript

Chris/typescript

Author: EGenesen

.env

@@ -1,7 +1,7 @@
-SLACK_CLIENT_SECRET = "6a6206cc93da2e49243ee9683f958438"
-SLACK_CLIENT_ID = "2696943977700.2696948669268"
-SLACK_REDIRECT_URI = "overvue://slack"
+SLACK_CLIENT_SECRET = "f58eea5761562d05dfa266207726f2aa"
+SLACK_CLIENT_ID = "4070788123922.4067827840757"
+SLACK_REDIRECT_URI = "https://app.slack.com/client/T0422P63MT4/C041W53TYBG?redir=%2Fapi%2Fapps%3Fnew_app%3D1"
 
 # SLACK_CLIENT_ID = 2863575808677.2851894215719
 # SLACK_CLIENT_SECRET = "f2298f5fbb83d842616711d19c829a45"
-# SLACK_REDIRECT_URI = "overvue://slack"
+# SLACK_REDIRECT_URI = "overvue://slack"

.env.development

@@ -1,7 +1,7 @@
-SLACK_CLIENT_SECRET = "6a6206cc93da2e49243ee9683f958438"
-SLACK_CLIENT_ID = "2696943977700.2696948669268"
-SLACK_REDIRECT_URI = "overvuedev://test"
+SLACK_CLIENT_SECRET = "f58eea5761562d05dfa266207726f2aa"
+SLACK_CLIENT_ID = "4070788123922.4067827840757"
+SLACK_REDIRECT_URI = "https://app.slack.com/client/T0422P63MT4/C041W53TYBG?redir=%2Fapi%2Fapps%3Fnew_app%3D1"
 
 # SLACK_CLIENT_ID = "2863575808677.2851894215719"
 # SLACK_CLIENT_SECRET = "f2298f5fbb83d842616711d19c829a45"
-# SLACK_REDIRECT_URI = "overvuedev://test"
+# SLACK_REDIRECT_URI = "overvuedev://test"

.eslintrc.js

@@ -8,11 +8,15 @@ module.exports = {
     'vue/no-deprecated-slot-attribute': 'off',
   },
 
+  "parser": "vue-eslint-parser",
   parserOptions: {
-    parser: '@babel/eslint-parser',
     ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    parser: { //attempt to speed up runtime using TS when coding
+      "ts":'@typescript-eslint/parser',
+      "<template>": "espree"
+    },
+    requireConfigFile: false,
     sourceType: 'module', // Allows for the use of imports
-    requireConfigFile: false
   },
 
   env: {
@@ -68,4 +72,4 @@ module.exports = {
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }
-}
+};

README.md

@@ -20,6 +20,7 @@
   - [Changelog 5.0](#changelog-50)
   - [Changelog 6.0](#changelog-60)
   - [Changelog 7.0](#changelog-70)
+  - [Changelog 8.0](#changelog-80)
 - [How to use](#how-to-use)
 - [Installation](#installation)
   - [WSL Installation](#wsl-installation)
@@ -60,11 +61,15 @@
 - Adding notes functionality  <sub><sup>(v6.0)</sup></sub>
 - Enhanced component tree hierarchy display <sub><sup>(v6.0)</sup></sub>
 - Added drag and drop of HTML elements  <sub><sup>(v7.0)</sup></sub>
-- Added color customization of compoents <sub><sup>(v7.0)</sup></sub>
+- Added color customization of components <sub><sup>(v7.0)</sup></sub>
 - More attribute options, class and v-model <sub><sup>(v7.0)</sup></sub>
 - Added scoped style tags for components <sub><sup>(v7.0)</sup></sub>
 - Size and position specification of HTML elements <sub><sup>(v7.0)</sup></sub>
-<br>
+- Added component snap to grid functionality <sub><sup>(v8.0)</sup></sub>
+- Ability to import vue component from Element Plus component library <sub><sup>(v8.0)</sup></sub>
+- Child component grid area CSS styling <sub><sup>(v8.0)</sup></sub>
+- Export project component hierarchy and enhanced boilerplate code <sub><sup>(v8.0)</sup></sub>
+
 [↥Back to top](#table-of-contents)
 
 ### Changelog 2.0
@@ -188,8 +193,30 @@
 <h4><strong>Bug Fixes</strong></h4>
 <li>Fixed undo and redo capabilities </li>
 <li>Fixed badge number not rendering for nested HTML tags</li>
-<li></li>
+</ul>
+</details>
 
+### Changelog 8.0
+
+<details><summary>OverVue 8.0</summary>
+<ul>
+<li>Added component snap to grid functionality with additional grid density drop down menu feature</li>
+<li>Code snippet reflects CSS grid area styling of components </li>
+<li>Ability to import components from Element Plus library</li>
+<li>Exported project template code now more accurately reflects component placement in app</li>
+<li>Improved canvas drag and deselect</li>
+<li>Improved WSL developer installation instructions</li>
+<li>Added TypeScipt to application</li>
+<li>Implemented component search bar feature</li>
+<br>
+<h4><strong>Bug Fixes</strong></h4>
+<li>Fixed routing components in project exports </li>
+<li>Fixed component hierarchy in project exports </li>
+<li>Fixed import statements of route child components</li>
+<li>Fixed edge case HTML element bugs in project exports </li>
+<li>Fixed in app component movement bugs which caused position to not update correctly </li>
+<li>Fixed drag and drop HTML element on click bug</li>
+<li>Eliminated code redundancy by implementing mixins</li>
 </ul>
 </details>
 <br/>
@@ -278,8 +305,19 @@ npm run build
 **The ability to load the application and/or devtools requires a tool/application to run a linux display as WSL does not have any display drivers since it is based off of just a CLI.
 I recommend X410 (https://x410.dev/), althought it does cost \$15, for ease of use. There are free options such as VcXsrv(https://sourceforge.net/projects/vcxsrv/) that you can get, but requires more set up.**
 
+If you choose to use VcXsrv, you will need to select a couple options:
+
+<ul>
+<li>Launch XLaunch</li>
+<li>Select multiple windows and display number=0.</li>
+<li>Select no client.</li>
+<li>Select Clipboard, Primary Selection, Native opengl, and disable access control.</li>
+<li>If Windows firewall pops up - select Public for this server to work.</li>
+</ul>
+
 If you choose to use x410, you will need to set the environment DISPLAY variable on each console:
 
+
 So, to open either the Vue devtools or OverVue in dev mode, first start your X Server then enter into the terminal:
 For WSL 1 :
 
@@ -293,19 +331,34 @@ For WSL 2 :
 export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/null):0
 export LIBGL_ALWAYS_INDIRECT=1
 ```
+Then run the following command to run both OverVue and Vue developer tools.
+```
+npm run dev
+```
 
-followed by the command for the s or devmode. If you want both open, enter commands above followed by starting the devtools:
+To launch the Vue devloper tool, use the following command.
 
 ```
 ./node_modules/.bin/vue-devtools
 ```
 
-Then open a new terminal instance, set the DISPLAY value again (re-enter above command for DISPLAY), and start OverVue in dev mode:
+Then to start only OverVue in developer mode, open a new terminal instance and set the DISPLAY value again (re-enter above command for DISPLAY):
 
 ```
 quasar dev -m electron
 ```
-**NOTE** Electron-deeplink currently does not work on our WSL2 computers and output an error during installing the dependency which prevented the application to open in dev mode. Go to /src-electron/electron-main.js and comment out line 3/import line to bypass error. The developers did not find any impacts on application so far.
+**NOTE**: 
+<ul>
+<li>Electron-deeplink currently does not work on our WSL2 computers and output an error during installing the dependency which prevented the application to open in dev mode. Go to /src-electron/electron-main.js and comment out line 3/import line to bypass error. The developers did not find any impacts on application so far.</li>
+<li>There might be an npm install error despite all instructions. Try the following command below:</li>
+</ul>
+
+```
+sudo apt install libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev
+```
+
+
+
 
 ## Running the Docker Image
 
@@ -423,7 +476,6 @@ Here are some features we're thinking about adding:
 
 
 - Ability to place child components into HTML elements
-- More semantic HTML tag options
 - Ability to export Vuex store boilerplate
 - Ability to add two-way binding to input elements
 - More granular typing options for TypeScript mode
@@ -468,10 +520,14 @@ Johnny Chan @jchan444
 Jace Crowe @JaceCrowe
 Keyla Koizumi Nishimura @keylakoizumin
 Katherine Kim @katherinek123
+Chris Wong @Koregano73
+Honghao(Michael) Sun @sunhonghaoparis
+Alex Law @alexlaw528
+Emma Genesen @EGenesen
 ```
 
 Inspired by [PreVue](https://github.com/open-source-labs/PreVue)
 
 <br/>
 
-[↥Back to top](#table-of-contents)
+[↥Back to top](#table-of-contents)

extractor.js

@@ -0,0 +1,132 @@
+// This file defines extractor functionality that targets the files of an imported component library, generates an array of file paths to each vue component, and parses each component to generate an import object compatible with createComponent
+
+// parsing implementation in progress 
+
+
+// importing parseComponent from npm package
+const { parseComponent } = require("vue-sfc-parser");
+// https://www.npmjs.com/package/vue-sfc-parser
+const fs = require("fs");
+const path = require("path");
+
+// generate an array of file objects that are either files or directories (folders) with files
+// input: root directory of component library, empty result arr
+// output: arr of objects (tree data structure)
+
+const getFullDirectory = function(dir, result = []) {
+  // list files in component library directory and loop through
+  fs.readdirSync(dir).forEach((file) => {
+    // builds full path of file
+    const fPath = path.resolve(dir, file);
+
+    // prepare stats obj
+    const fileStats = { file, path: fPath };
+
+    // is the file a directory ?
+    // if yes, traverse it also, if no just add it to the result
+    if (fs.statSync(fPath).isDirectory()) {
+      fileStats.type = "dir";
+      fileStats.files = [];
+      result.push(fileStats);
+      return getFullDirectory(fPath, fileStats.files);
+    }
+
+    fileStats.type = "file";
+    result.push(fileStats);
+  });
+  // returns an array of file objects that are either files, or directories with files inside
+  return result;
+};
+
+
+// collect all file paths nested in full directory tree that end with extension .vue
+
+// const extractFilePaths = ({ dirArray = [], collection = [], target = ".vue" }) => {
+//   for (let i = 0; i < dirArray.length; i++) {
+//     if (dirArray[i].type === "dir") {
+//       extractFilePaths({ dirArray: dirArray[i].files, collection, target });
+//     } else if (dirArray[i].file.endsWith(target)) {
+//       collection.push(dirArray[i].path);
+//     }
+//   }
+//   return collection;
+// }
+
+const getFilePathsByExtension = (dirArray, collection = [], extension = ".vue") => {
+  for (let i = 0; i < dirArray.length; i++) {
+    if (dirArray[i].type === "dir") {
+      getFilePathsByExtension(dirArray[i].files, collection, extension);
+    } else if (dirArray[i].file.endsWith(extension)) {
+      collection.push(dirArray[i].path);
+    }
+  }
+
+  //return arr of strings representing file path names
+  return collection;
+};
+
+// returns [ 'users/emma/yadda/yadda/button.vue', 'users/emma/yadda/yadda/button.vue' ]
+
+// parseVueFile => parse the view file
+// generateImportObj => call parseVueFile on every string in collection
+// NOTE: if want to expand logic here to allow for other libraries, change package name to name of that libary; look at for stretch goal
+
+const getVueFiles = (package = "iview") => {
+  const rootDir = path.join(__dirname, "node_modules", package);
+  //invoke getFullDirectory with root directory of package
+  const fullDirectory = getFullDirectory(rootDir);
+  //invoke getFilePathsByExtension with fullDirectory
+  const vueFilePathList = getFilePathsByExtension(fullDirectory);
+  return vueFilePathList;
+};
+
+console.log(getVueFiles());
+
+//work with documentation for parse vue to work out how to use this
+function parseVueFile(path) {
+  const fileContents = fs.readFileSync(path).toString();
+  const parsedFile = parseComponent(fileContents);
+  return parsedFile
+}
+
+console.log(parseVueFile(getVueFiles()[0]))
+
+function generateImportObjs(pathList) { // or something
+  // iterate through paths
+  // parse each file
+  // extract necessary html / js stuff for importObj
+    //necessary info:
+      // component name
+      // boilerplate properties for each component upon creation
+    // const component = {
+    //   x: 0,
+    //   y: 20,
+    //   z: 0,
+    //   w: 200,
+    //   h: 200,
+    //   htmlList: this.selectedElementList, //htmlList ask Alex
+    //   noteList: [],
+    //   children: [],
+    //   actions: [],
+    //   props: [],
+    //   state: [],
+    //   parent: {},
+    //   isActive: false,
+    //   idDrag: '',
+    //   idDrop: '',
+    //   color: "#ffffff85",
+    //   htmlAttributes: {
+    //     class: "",
+    //     id: ""
+    //   }
+    // };
+  // return an array of importObjs with default settings, names, etc
+}
+
+// might need to shift away from component name to unique id
+
+// call parseVueFile on every file
+// const html = parseHTML(parsedFile);
+// const js = parseJS(parsedFile);
+
+// return vueFilePathList;