Dev

.eslintrc.js

@@ -1,18 +1,20 @@
 module.exports = {
   root: true,
   env: {
+    es2021: true,
     node: true
   },
   extends: [
     'plugin:vue/essential',
     'plugin:prettier/recommended',
-    '@vue/prettier'
+    '@vue/prettier',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended'
   ],
+  parser: 'vue-eslint-parser',
+  plugins: ['@typescript-eslint, vue'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
   }
 };

.gitignore

@@ -2,10 +2,12 @@
 node_modules
 /dist
 
-# local env files
+# dotenv environment variables files (local env files)
 .env.local
 .env.*.local
 .env
+.env.test
+
 
 # Log files
 npm-debug.log*
@@ -22,7 +24,5 @@ yarn-error.log*
 *.sln
 *.sw*
 
-#Electron-builder output
-/dist_electron
 
 package-lock.json

Dockerfile

@@ -0,0 +1,12 @@
+# base image that provides runtime environment for the application
+FROM node:16.13
+# where the application code will be copied to in the docker container
+WORKDIR /usr/src/app
+# copies all files from the current directory (where the Dockerfile is located) to the working directory in the docker image (which we set on line 4)
+COPY . .
+RUN npm install
+RUN npm run build
+# Exposes port 4173 to the host machine, so that it can access the Node.js application running inside the Docker container
+EXPOSE 8080
+# Specifies the command to run when the Docker container starts
+ENTRYPOINT npm run server

README.md

@@ -1,63 +1,100 @@
 <p align="center">
-  <img width="350" src="src/assets/prevue-large-green.png?raw=true">
+  <img width="350" src="src/assets/prevue-logo.png?raw=true">
   <h1 align="center">PreVue </h1>
 </p>
 
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/teamprevue/PreVue/pulls)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE LINK GOES HERE)
+![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
 
 <h3 align="center">
-An open source Vue application prototyping tool for developers and designers.
+All in One Prototyping Tool 
+For Vue Developers
+
 </h3>
 
-PreVue allows the user to design/visualize their component architecture - previewing component template HTML structure, setting up views/routes, establishing parent-child component relationships - and then export their component architecture as a Vue application created with the default Vue CLi settings.
+<h4 align="center">
+From Component Architecture to Code Exporting
+</h4>
+
+PreVue allows the user to design/visualize their component architecture by allowing users to :
+
+1. Create components and preview their code
+
+2. Set up different views/routes
+
+3. Establish parent-child component relationships
+
+4. See their application architecture in tree format
+
+5. Export the component architecture as a Vue application created with the default Vue CLI settings.
+
+<p align="center">
+  <img width="1000" src="src/assets/prevue.png?raw=true">
+
+</p>
 
 ## Getting Started
 
-If you are looking for the executable version of PreVue, you can download it at [prevue.io](https://www.prevue.io/)
+---
 
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
+Download for [MacOS](https://s3.amazonaws.com/prevue-app/PreVue-1.0.0.dmg), [Linux](https://s3.amazonaws.com/prevue-app/PreVue_1.0.0_amd64.deb), or [Windows](https://s3.amazonaws.com/prevue-app/PreVue+Setup+1.0.0.exe)
 
-### Prerequisites
+###### Support for Windows now here!
 
-PreVue was developed using node runtime @ v10.15.0. You should make sure you at least have that version installed to ensure full compatibility. You can download the latest version of node [here](https://nodejs.org/en/)
+- Mac users only: for now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.
 
-### Setup
+If you find any issues, [file issue](https://github.com/teamprevue/PreVue/issues)
 
-Clone this repo
+## How to use
 
-```
-git clone https://github.com/teamprevue/PreVue.git
-```
+---
 
-Install dependencies
+#### Adding Components
 
-```
-npm i
-```
+- Double click on the application icon
+- Create components by entering a name and clicking the html elements you need
 
-Run electron app
+- Clicked elements will be shown on the right sidebar
+- Drag them around to change the order!
 
-```
-npm run electron:serve
-```
+- Once you're satisfied, click the button to add a component and it will show up in the center stage, with the ability to resize!
+
+<img src='http://g.recordit.co/fyQ6LKvwlt.gif'/>
+
+#### Editing Components
+
+- Edit components by double clicking for the edit modal to show
+- Add additional elements to a component with a live preview of the component code
+- Drag elements on the right side bar to nest elements
+- Establish parent-child component relationships via a dropdown menu when creating or editing components
+
+<img src='http://g.recordit.co/A6rOQRJVOc.gif'/>
+
+#### Adding Routes/Projects
+
+- Create different routes for your application by entering a new route name and pressing enter
+- Any components created on a certain route will be automatically saved to that route
+- Play with multiple projects by clicking the add project icon!
+- Display a tree view of entire application component architecture when the tree icon on navbar is clicked
+
+<img src='http://g.recordit.co/bfYwX1sdtl.gif'/>
+
+#### Tree View of Application Architecture
 
-## Features
+<p align="center">
+  <img width="1000" src="src/assets/tree-demo.png?raw=true">
+
+</p>
+
+#### Saving/Opening/Exporting Projects
+
+- If you ever need to save your current project, click the save project icon to save a json to your local directory
+- Next time the application is started, open the project again by clicking the open project icon!
+- Once you're satisfied, click the export project icon to export your awesome project as new Vue application!
 
-- Create components using 'Create a Component' form
-- Edit components by double clicking on them
-- Add standard html elements to template of a component that is created or being edited
-- Draggable editing of component HTML template code structure
-- Live updating of component HTML template code structure display
-- Establish parent-child component relationships via dropdown menu when creating or editng components
-- Create route components using 'Routes' form that allows for designing of multiple views of a SPA at once.
-- Components will automatically save to the route that they are created in
-- Display tree view of entire Vue application component architecture when tree icon on navbar is clicked
-- Project Open/Save
-- Hotkeys for opening and saving projects, and opening and closing tabs
-- Export project as Vue application!
+<img src='http://g.recordit.co/uFLqyjAnMm.gif'/>
 
-### Code Exporting
+##### Code Exporting
 
 Below is the generated directory structure of the Vue application that is created when you export your design.
 
@@ -81,10 +118,38 @@ src/
 - cmd/ctrl + s: save
 - cmd/ctrl + o: open
 - cmd/ctrl + n: new project tab
-- cmd/ctrl + t: close project tab
+- cmd/ctrl + w: close project tab
+
+## Running your own local version
+
+---
+
+PreVue was developed using node runtime @ v10.15.0. You should make sure you at least have that version installed to ensure full compatibility. You can download the latest version of node [here](https://nodejs.org/en/)
+
+### Setup
+
+Clone this repo
+
+```
+git clone https://github.com/teamprevue/PreVue.git
+```
+
+Install dependencies
+
+```
+npm i
+```
+
+Run electron app
+
+```
+npm run electron:serve
+```
 
 ## Built With
 
+---
+
 - [Vue.js](https://vuejs.org/)
 - [Vue Router](https://router.vuejs.org/guide/#html)
 - [Vuex](https://vuex.vuejs.org/)
@@ -99,15 +164,21 @@ src/
 
 ## Contributing
 
+---
+
 PreVue is currently in beta release. We encourage you to submit issues for any bugs or ideas for enhancements. Also feel free to fork this repo and submit pull requests to contribute as well.
 
 ## Authors
 
+---
+
 - **Hubert Lin** [@hubelin](https://github.com/hubelin)
 - **Franklin Pinnock** [@pinnockf](https://github.com/pinnockf)
 - **Annette Lin** [@al2613](https://github.com/al2613)
 - **Daniel Shu** [@danshuu](https://github.com/danshuu)
 
 ## License
 
+---
+
 This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

public/index.html → index.html

@@ -4,18 +4,14 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
 
     <link
       rel="stylesheet"
       href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
       integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
       crossorigin="anonymous"
     />
-    <!-- <link
-      rel="stylesheet"
-      href="https://unpkg.com/bulmaswatch/darkly/bulmaswatch.min.css"
-    /> -->
 
     <title>PreVue</title>
   </head>
@@ -29,5 +25,7 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

jest.config.js

@@ -4,15 +4,18 @@ module.exports = {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
+    '^.+\\.jsx?$': 'babel-jest',
   },
   transformIgnorePatterns: ['/node_modules/'],
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
+    '^@/(.*)$': '<rootDir>/src/$1',
   },
   snapshotSerializers: ['jest-serializer-vue'],
   testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
   ],
-  testURL: 'http://localhost/'
+  testEnvironmentOptions: {
+    url: 'http://localhost:5174', // replace with your test URL
+  },
+  testEnvironment: 'node',
 };