From 5bcb39f82b40987aa914a217ed0f35145761919d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 1 Nov 2021 17:37:48 -0400
Subject: [PATCH] docs(): update contributing guide for angular, react, and vue
 (#24141)

resolves #24137
---
 .github/CONTRIBUTING.md            | 50 ++++++++++++++++++++++++++++++
 packages/vue/package.json          |  1 +
 packages/vue/test-app/package.json |  4 +--
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 6fd65002bf..1f9694b238 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -160,6 +160,56 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve
 3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed.
 4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request).
 
+### Angular, React, and Vue
+
+#### Modifying Files
+
+1. Locate the files inside the relevant root directory:
+  - Angular: `/angular/src`
+  - React: `/packages/react/src`
+  - Vue: `/packages/vue/src`
+2. Make your changes to the files. If the change is overly complex or out of the ordinary, add comments so we can understand the changes.
+3. Run lint on the directory and make sure there are no errors.
+4. Build the project.
+5. After the build is finished, commit the changes. Please follow the [commit message format](#commit-message-format) for every commit.
+6. [Submit a Pull Request](#submit-pull-request) of your changes.
+
+
+
+#### Preview Changes
+
+1. Run `npm run start` inside of the relevant test app directory. This will sync your previously built changes into a test Ionic app:
+  - Angular: `/angular/test-app`
+  - React: `/packages/react/test-app`
+  - Vue: `/packages/vue/test-app`
+2. In a browser, navigate to the page you wish to test.
+3. Alternatively, create a new page if you need to test something that is not already there.
+
+
+#### Lint changes
+
+1. Run `npm run lint` to lint the TypeScript in the relevant directory:
+  - Angular: `/angular/src`
+  - React: `/packages/react/src`
+  - Vue: `/packages/vue/src`
+2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not.
+
+#### Modifying Tests
+
+1. Locate the test to modify inside the relevant test app directory:
+  - Angular: `/angular/test-app/e2e/src`
+  - React: `/packages/react/test-app/cypress/integration`
+  - Vue: `/packages/vue/test-app/tests/e2e`
+2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added.
+3. If a new test is needed, copy an existing test, rename it, and edit the content in the test file.
+4. Run `npm run test` to run your tests.
+
+#### Building Changes
+
+1. Once all changes have been made, run `npm run build` inside of the root directory. This will add your changes to any auto-generated files, if necessary.
+2. Review the changes and, if everything looks correct, [commit](#commit-message-format) the changes.
+3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed.
+4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request).
 
 ### Submit Pull Request
 
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 4fc4d2b9ce..63f39b2880 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -4,6 +4,7 @@
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "lint": "echo add linter",
+    "lint.fix": "npm run lint -- --fix",
     "test": "jest",
     "build": "npm run clean && npm run copy && npm run copy.overlays && npm run compile && npm run bundle && npm run build.vetur && npm run build.web-types",
     "bundle": "rollup --config rollup.config.js",
diff --git a/packages/vue/test-app/package.json b/packages/vue/test-app/package.json
index ba674786d7..6f003a9ab1 100644
--- a/packages/vue/test-app/package.json
+++ b/packages/vue/test-app/package.json
@@ -3,10 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "start": "npm run sync && vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "concurrently \"npm run serve\" \"wait-on http-get://localhost:8080 && npm run cypress\" --kill-others --success first",
+    "test:e2e": "concurrently \"npm run start\" \"wait-on http-get://localhost:8080 && npm run cypress\" --kill-others --success first",
     "lint": "vue-cli-service lint",
     "cypress": "node_modules/.bin/cypress run --headless --browser chrome",
     "sync": "sh ./scripts/sync.sh"