add: chapter 6 code

Author: mayashavin

ch06/.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
  'plugin:vue/vue3-essential',
  'eslint:recommended',
  '@vue/eslint-config-typescript',
- '@vue/eslint-config-prettier'
+ '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
  ecmaVersion: 'latest'

ch06/.gitignore

@@ -26,6 +26,3 @@ coverage
 *.njsproj
 *.sln
 *.sw?
-
-test-results/
-playwright-report/

ch06/.prettierrc.json

@@ -1 +1,8 @@
-{}
+{
+ "$schema": "https://json.schemastore.org/prettierrc",
+ "semi": false,
+ "tabWidth": 2,
+ "singleQuote": true,
+ "printWidth": 100,
+ "trailingComma": "none"
+}

ch06/.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
- "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+ "recommendations": [
+ "Vue.volar",
+ "Vue.vscode-typescript-vue-plugin",
+ "dbaeumer.vscode-eslint",
+ "esbenp.prettier-vscode"
+ ]
 }

ch06/README.md

@@ -45,25 +45,6 @@ npm run build
 npm run test:unit
 ```
 
-### Run End-to-End Tests with [Playwright](https://playwright.dev)
-
-```sh
-# Install browsers for the first run
-npx playwright install
-
-# When testing on CI, must build the project first
-npm run build
-
-# Runs the end-to-end tests
-npm run test:e2e
-# Runs the tests only on Chromium
-npm run test:e2e -- --project=chromium
-# Runs the tests of a specific file
-npm run test:e2e -- tests/example.spec.ts
-# Runs the tests in debug mode
-npm run test:e2e -- --debug
-```
-
 ### Lint with [ESLint](https://eslint.org/)
 
 ```sh

ch06/e2e/vue.spec.ts

@@ -1,37 +1,40 @@
 {
  "name": "ch06",
  "version": "0.0.0",
+ "private": true,
  "scripts": {
  "dev": "vite",
  "build": "run-p type-check build-only",
  "preview": "vite preview",
- "test:unit": "vitest --environment jsdom --root src/",
- "test:e2e": "playwright test",
+ "test:unit": "vitest",
  "build-only": "vite build",
  "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
- "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+ "format": "prettier --write src/"
  },
  "dependencies": {
- "vue": "^3.2.41"
+ "axios": "^1.5.0",
+ "vue": "^3.3.4"
  },
  "devDependencies": {
- "@playwright/test": "^1.27.1",
- "@rushstack/eslint-patch": "^1.1.4",
- "@types/jsdom": "^20.0.0",
- "@types/node": "^16.11.68",
- "@vitejs/plugin-vue": "^3.1.2",
- "@vue/eslint-config-prettier": "^7.0.0",
- "@vue/eslint-config-typescript": "^11.0.0",
- "@vue/test-utils": "^2.1.0",
- "@vue/tsconfig": "^0.1.3",
- "eslint": "^8.22.0",
- "eslint-plugin-vue": "^9.3.0",
- "jsdom": "^20.0.1",
+ "@rushstack/eslint-patch": "^1.3.2",
+ "@tsconfig/node18": "^18.2.0",
+ "@types/jsdom": "^21.1.1",
+ "@types/node": "^18.17.5",
+ "@vitejs/plugin-vue": "^4.3.1",
+ "@vitejs/plugin-vue-jsx": "^3.0.2",
+ "@vue/eslint-config-prettier": "^8.0.0",
+ "@vue/eslint-config-typescript": "^11.0.3",
+ "@vue/test-utils": "^2.4.1",
+ "@vue/tsconfig": "^0.4.0",
+ "eslint": "^8.46.0",
+ "eslint-plugin-vue": "^9.16.1",
+ "jsdom": "^22.1.0",
  "npm-run-all": "^4.1.5",
- "prettier": "^2.7.1",
- "typescript": "~4.7.4",
- "vite": "^3.1.8",
- "vitest": "^0.24.3",
- "vue-tsc": "^1.0.8"
+ "prettier": "^3.0.0",
+ "typescript": "~5.1.6",
+ "vite": "^4.4.9",
+ "vitest": "^0.34.2",
+ "vue-tsc": "^1.8.8"
  }
 }

ch06/package.json

@@ -1,14 +1,40 @@
 <script setup lang="ts">
-import LifeCycleHooksVue from "./components/LifeCycleHooks.vue";
-import MyMessageComponent from "./components/MyMessageComponent.vue";
-import StaticMessage from "./components/StaticMessage.vue";
-import UserVue from "./components/User.vue";
-import UserComposition from "./components/UserComposition.vue";
+import UserProfile from './components/UserProfile.vue';
+import UserProfileWithFetchComponent from './components/UserProfileWithFetchComponent.vue';
 </script>
 
 <template>
- <UserVue username="mayashavin" />
- <StaticMessage />
+ <main>
+ <UserProfile />
+ <UserProfileWithFetchComponent />
+ </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+header {
+ line-height: 1.5;
+}
+
+.logo {
+ display: block;
+ margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+ header {
+ display: flex;
+ place-items: center;
+ padding-right: calc(var(--section-gap) / 2);
+ }
+
+ .logo {
+ margin: 0 2rem 0 0;
+ }
+
+ header .wrapper {
+ display: flex;
+ place-items: flex-start;
+ flex-wrap: wrap;
+ }
+}
+</style>

ch06/playwright.config.ts

@@ -55,7 +55,6 @@
 *::after {
  box-sizing: border-box;
  margin: 0;
- position: relative;
  font-weight: normal;
 }