From abb4a1368c7254d0d5264ff4826cdd37196f26fe Mon Sep 17 00:00:00 2001 From: TheJaredWilcurt Date: Wed, 23 Aug 2023 00:15:28 -0400 Subject: [PATCH 01/12] Vue-Router --- .eslintrc.js | 1 + LICENSE | 2 +- README.md | 2 + package-lock.json | 23 ++++ package.json | 4 +- src/App.vue | 96 +++++----------- src/assets/main.css | 19 ++-- src/components/FsExample.vue | 54 --------- src/components/HelloWorld.vue | 88 --------------- src/helpers/constants.js | 1 + src/main.js | 5 + src/router/index.js | 37 ++++++ src/views/FsExample.vue | 106 +++++++++++++++++ src/views/HelloWorld.vue | 119 ++++++++++++++++++++ src/{components => views}/PiniaDemo.vue | 9 +- src/{components => views}/ResourceLinks.vue | 0 16 files changed, 339 insertions(+), 227 deletions(-) delete mode 100644 src/components/FsExample.vue delete mode 100644 src/components/HelloWorld.vue create mode 100644 src/helpers/constants.js create mode 100644 src/router/index.js create mode 100644 src/views/FsExample.vue create mode 100644 src/views/HelloWorld.vue rename src/{components => views}/PiniaDemo.vue (86%) rename src/{components => views}/ResourceLinks.vue (100%) diff --git a/.eslintrc.js b/.eslintrc.js index 3946991..be02f68 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -34,6 +34,7 @@ module.exports = { 'import/no-anonymous-default-export': 'off', 'import/no-namespace': 'off', 'import/no-unresolved': 'off', + 'import/no-unused-modules': 'off', 'no-restricted-syntax': [ 'error', ...baseRestrictedSyntax diff --git a/LICENSE b/LICENSE index 7f8b1f3..c189839 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2022 The Jared Wilcurt +Copyright (c) 2023 The Jared Wilcurt Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 31c0168..91a2c43 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,9 @@ Run `npm run build` and you're ready to ship/deploy: Web App, Windows Installer, * **Vue-DevTools** - Built in to the Chromium dev tools * **Vite** - Dev Server/Bundler/App build tool * **Pinia** - Global State Management +* **Vue-Router** - Frontend routing/navigation * **Options API** - [Component organizational structure](https://user-images.githubusercontent.com/4629794/204181213-6c9bcece-62fb-4790-8fc2-7df546ca7df5.png) +* **Constants Plugin** - Gives you a [dedicated place to store constants](https://github.com/TheJaredWilcurt/vue-options-api-constants-plugin) in a component * **NW-Builder-Phoenix** - Automated desktop builds * **ESLint** - Code error prevention and stylistic consistency * Vue Linting diff --git a/package-lock.json b/package-lock.json index ca8f479..4b05014 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,8 @@ "vite": "^4.4.9", "vitest": "^0.34.2", "vue": "^3.3.4", + "vue-options-api-constants-plugin": "^1.0.1", + "vue-router": "^4.2.4", "wait-on": "^7.0.1" } }, @@ -9597,6 +9599,27 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/vue-options-api-constants-plugin": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/vue-options-api-constants-plugin/-/vue-options-api-constants-plugin-1.0.1.tgz", + "integrity": "sha512-gYmecYu+zOtfH+bDxb/7KHLXFLBladvtmCfj42q0WwwJMdPL6O7QvVo/UwCfdFQ4uwBlb1tkLgze9CGR5Y3AMQ==", + "dev": true + }, + "node_modules/vue-router": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz", + "integrity": "sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==", + "dev": true, + "dependencies": { + "@vue/devtools-api": "^6.5.0" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/wait-on": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.0.1.tgz", diff --git a/package.json b/package.json index 96dd30c..711e041 100644 --- a/package.json +++ b/package.json @@ -68,9 +68,11 @@ "vite": "^4.4.9", "vitest": "^0.34.2", "vue": "^3.3.4", + "vue-options-api-constants-plugin": "^1.0.1", + "vue-router": "^4.2.4", "wait-on": "^7.0.1" }, - "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'", + "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension' --disable-features=ProcessPerSiteUpToMainFrameThreshold", "build": { "nwVersion": "v0.79.0", "nwFlavor": "normal", diff --git a/src/App.vue b/src/App.vue index ab8249b..cf23a1f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,89 +1,47 @@ diff --git a/src/assets/main.css b/src/assets/main.css index a06d76b..ba0dfa9 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -37,6 +37,16 @@ hr { margin: 15px 0px; } +textarea { + width: 100%; + min-height: 15rem; + background: #333; + border: 0px; + margin-top: 1rem; + padding: 0.5rem; + color: #CCC; +} + .flex { display: flex; } @@ -68,12 +78,7 @@ hr { @media (min-width: 1024px) { body { display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0px 2rem; + flex-direction: row; + justify-content: center; } } diff --git a/src/components/FsExample.vue b/src/components/FsExample.vue deleted file mode 100644 index d711a72..0000000 --- a/src/components/FsExample.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 7409453..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - - - diff --git a/src/helpers/constants.js b/src/helpers/constants.js new file mode 100644 index 0000000..6aceb07 --- /dev/null +++ b/src/helpers/constants.js @@ -0,0 +1 @@ +export const APP_NAME = 'Your App Name Here'; diff --git a/src/main.js b/src/main.js index 0136480..8c007fe 100644 --- a/src/main.js +++ b/src/main.js @@ -1,13 +1,18 @@ import { createPinia } from 'pinia'; import { createApp } from 'vue'; +import constantsPlugin from 'vue-options-api-constants-plugin'; import applyPrototypes from '@/helpers/applyPrototypes.js'; import App from '@/App.vue'; +import { router } from '@/router/index.js'; + import '@/assets/main.css'; const app = createApp(App); applyPrototypes(app.config.globalProperties); app.use(createPinia()); +app.use(router); +app.use(constantsPlugin); app.mount('#app'); diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..89c081c --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,37 @@ +import { createRouter, createWebHashHistory } from 'vue-router'; + +import FsExample from '@/views/FsExample.vue'; +import HelloWorld from '@/views/HelloWorld.vue'; +import PiniaDemo from '@/views/PiniaDemo.vue'; +import ResourceLinks from '@/views/ResourceLinks.vue'; + +export const router = createRouter({ + history: createWebHashHistory(), + routes: [ + { + path: '/', + name: 'welcome', + component: HelloWorld + }, + { + path: '/fs', + name: 'fs', + component: FsExample + }, + { + path: '/pinia', + name: 'pinia', + component: PiniaDemo + }, + { + path: '/resources', + name: 'resources', + component: ResourceLinks + }, + { + path: '/:catchAll(.*)*', + name: '404', + redirect: '/' + } + ] +}); diff --git a/src/views/FsExample.vue b/src/views/FsExample.vue new file mode 100644 index 0000000..79998a6 --- /dev/null +++ b/src/views/FsExample.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/src/views/HelloWorld.vue b/src/views/HelloWorld.vue new file mode 100644 index 0000000..c490214 --- /dev/null +++ b/src/views/HelloWorld.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/src/components/PiniaDemo.vue b/src/views/PiniaDemo.vue similarity index 86% rename from src/components/PiniaDemo.vue rename to src/views/PiniaDemo.vue index 4201e05..ad5809c 100644 --- a/src/components/PiniaDemo.vue +++ b/src/views/PiniaDemo.vue @@ -18,10 +18,7 @@ From 7e5e8f560e52757150d4d8c6f1112fb0924ea78b Mon Sep 17 00:00:00 2001 From: TheJaredWilcurt Date: Thu, 24 Aug 2023 19:10:58 -0400 Subject: [PATCH 06/12] Move test files --- tests/unit/{components => views}/FsExample.test.js | 2 +- tests/unit/{components => views}/HelloWorld.test.js | 2 +- tests/unit/{components => views}/PiniaDemo.test.js | 2 +- .../{components => views}/__snapshots__/FsExample.test.js.snap | 0 .../{components => views}/__snapshots__/HelloWorld.test.js.snap | 0 .../{components => views}/__snapshots__/PiniaDemo.test.js.snap | 0 6 files changed, 3 insertions(+), 3 deletions(-) rename tests/unit/{components => views}/FsExample.test.js (97%) rename tests/unit/{components => views}/HelloWorld.test.js (97%) rename tests/unit/{components => views}/PiniaDemo.test.js (95%) rename tests/unit/{components => views}/__snapshots__/FsExample.test.js.snap (100%) rename tests/unit/{components => views}/__snapshots__/HelloWorld.test.js.snap (100%) rename tests/unit/{components => views}/__snapshots__/PiniaDemo.test.js.snap (100%) diff --git a/tests/unit/components/FsExample.test.js b/tests/unit/views/FsExample.test.js similarity index 97% rename from tests/unit/components/FsExample.test.js rename to tests/unit/views/FsExample.test.js index 1288321..36d9620 100644 --- a/tests/unit/components/FsExample.test.js +++ b/tests/unit/views/FsExample.test.js @@ -1,6 +1,6 @@ import testHelpers from '@@/unit/test-helpers.js'; -import FsExample from '@/components/FsExample.vue'; +import FsExample from '@/views/FsExample.vue'; describe('FsExample.vue', () => { const setupWrapper = async () => { diff --git a/tests/unit/components/HelloWorld.test.js b/tests/unit/views/HelloWorld.test.js similarity index 97% rename from tests/unit/components/HelloWorld.test.js rename to tests/unit/views/HelloWorld.test.js index 05a1e2a..5d52815 100644 --- a/tests/unit/components/HelloWorld.test.js +++ b/tests/unit/views/HelloWorld.test.js @@ -1,6 +1,6 @@ import testHelpers from '@@/unit/test-helpers.js'; -import HelloWorld from '@/components/HelloWorld.vue'; +import HelloWorld from '@/views/HelloWorld.vue'; describe('HelloWorld.vue', () => { const message = 'Test'; diff --git a/tests/unit/components/PiniaDemo.test.js b/tests/unit/views/PiniaDemo.test.js similarity index 95% rename from tests/unit/components/PiniaDemo.test.js rename to tests/unit/views/PiniaDemo.test.js index 989e689..bb09d3b 100644 --- a/tests/unit/components/PiniaDemo.test.js +++ b/tests/unit/views/PiniaDemo.test.js @@ -1,6 +1,6 @@ import testHelpers from '@@/unit/test-helpers.js'; -import PiniaDemo from '@/components/PiniaDemo.vue'; +import PiniaDemo from '@/views/PiniaDemo.vue'; describe('PiniaDemo.vue', () => { const setupWrapper = async () => { diff --git a/tests/unit/components/__snapshots__/FsExample.test.js.snap b/tests/unit/views/__snapshots__/FsExample.test.js.snap similarity index 100% rename from tests/unit/components/__snapshots__/FsExample.test.js.snap rename to tests/unit/views/__snapshots__/FsExample.test.js.snap diff --git a/tests/unit/components/__snapshots__/HelloWorld.test.js.snap b/tests/unit/views/__snapshots__/HelloWorld.test.js.snap similarity index 100% rename from tests/unit/components/__snapshots__/HelloWorld.test.js.snap rename to tests/unit/views/__snapshots__/HelloWorld.test.js.snap diff --git a/tests/unit/components/__snapshots__/PiniaDemo.test.js.snap b/tests/unit/views/__snapshots__/PiniaDemo.test.js.snap similarity index 100% rename from tests/unit/components/__snapshots__/PiniaDemo.test.js.snap rename to tests/unit/views/__snapshots__/PiniaDemo.test.js.snap From 33736ca28f264807ad96eef5fba0447bd9fca599 Mon Sep 17 00:00:00 2001 From: TheJaredWilcurt Date: Thu, 24 Aug 2023 19:30:09 -0400 Subject: [PATCH 07/12] Update HelloWorld tests --- src/views/HelloWorld.vue | 82 +++++++++---------- tests/unit/views/HelloWorld.test.js | 14 ++-- .../__snapshots__/HelloWorld.test.js.snap | 18 +++- 3 files changed, 62 insertions(+), 52 deletions(-) diff --git a/src/views/HelloWorld.vue b/src/views/HelloWorld.vue index c490214..0457be0 100644 --- a/src/views/HelloWorld.vue +++ b/src/views/HelloWorld.vue @@ -1,5 +1,5 @@