From 7d3d7a17091911d6ff24bcd60551f682ec2d5498 Mon Sep 17 00:00:00 2001 From: Micha Huhn Date: Mon, 24 Feb 2025 20:21:46 +0100 Subject: [PATCH] feat: update vue demo app update dependencies and convert to script setup Composition API --- apps/vue-vite-app/.editorconfig | 9 ++ apps/vue-vite-app/.eslintrc.cjs | 15 --- apps/vue-vite-app/.gitattributes | 1 + apps/vue-vite-app/.gitignore | 2 + apps/vue-vite-app/.prettierrc.json | 7 +- apps/vue-vite-app/.vscode/extensions.json | 7 +- apps/vue-vite-app/README.md | 13 +-- apps/vue-vite-app/eslint.config.ts | 24 +++++ apps/vue-vite-app/package.json | 43 ++++---- apps/vue-vite-app/src/App.vue | 24 ++++- apps/vue-vite-app/src/assets/base.css | 86 --------------- apps/vue-vite-app/src/assets/main.css | 35 ------ .../src/components/FFmpegDemo.vue | 102 ++++++++---------- apps/vue-vite-app/src/main.ts | 9 +- apps/vue-vite-app/src/styles/index.css | 30 ++++++ apps/vue-vite-app/src/styles/reset.css | 62 +++++++++++ apps/vue-vite-app/tsconfig.app.json | 8 +- apps/vue-vite-app/tsconfig.node.json | 9 +- apps/vue-vite-app/vite.config.ts | 16 +-- 19 files changed, 252 insertions(+), 250 deletions(-) create mode 100644 apps/vue-vite-app/.editorconfig delete mode 100644 apps/vue-vite-app/.eslintrc.cjs create mode 100644 apps/vue-vite-app/.gitattributes create mode 100644 apps/vue-vite-app/eslint.config.ts delete mode 100644 apps/vue-vite-app/src/assets/base.css delete mode 100644 apps/vue-vite-app/src/assets/main.css create mode 100644 apps/vue-vite-app/src/styles/index.css create mode 100644 apps/vue-vite-app/src/styles/reset.css diff --git a/apps/vue-vite-app/.editorconfig b/apps/vue-vite-app/.editorconfig new file mode 100644 index 0000000000..d9f65b773c --- /dev/null +++ b/apps/vue-vite-app/.editorconfig @@ -0,0 +1,9 @@ +[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}] +charset = utf-8 +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +end_of_line = lf +max_line_length = 120 diff --git a/apps/vue-vite-app/.eslintrc.cjs b/apps/vue-vite-app/.eslintrc.cjs deleted file mode 100644 index 6f40582dda..0000000000 --- a/apps/vue-vite-app/.eslintrc.cjs +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-env node */ -require('@rushstack/eslint-patch/modern-module-resolution') - -module.exports = { - root: true, - 'extends': [ - 'plugin:vue/vue3-essential', - 'eslint:recommended', - '@vue/eslint-config-typescript', - '@vue/eslint-config-prettier/skip-formatting' - ], - parserOptions: { - ecmaVersion: 'latest' - } -} diff --git a/apps/vue-vite-app/.gitattributes b/apps/vue-vite-app/.gitattributes new file mode 100644 index 0000000000..6313b56c57 --- /dev/null +++ b/apps/vue-vite-app/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf diff --git a/apps/vue-vite-app/.gitignore b/apps/vue-vite-app/.gitignore index 38adffa64e..8ee54e8d34 100644 --- a/apps/vue-vite-app/.gitignore +++ b/apps/vue-vite-app/.gitignore @@ -26,3 +26,5 @@ coverage *.njsproj *.sln *.sw? + +*.tsbuildinfo diff --git a/apps/vue-vite-app/.prettierrc.json b/apps/vue-vite-app/.prettierrc.json index 66e23359c3..4c2c293af8 100644 --- a/apps/vue-vite-app/.prettierrc.json +++ b/apps/vue-vite-app/.prettierrc.json @@ -1,8 +1,7 @@ { "$schema": "https://json.schemastore.org/prettierrc", - "semi": false, - "tabWidth": 2, + "semi": true, "singleQuote": true, - "printWidth": 100, + "printWidth": 120, "trailingComma": "none" -} \ No newline at end of file +} diff --git a/apps/vue-vite-app/.vscode/extensions.json b/apps/vue-vite-app/.vscode/extensions.json index c0a6e5a481..c92168f50e 100644 --- a/apps/vue-vite-app/.vscode/extensions.json +++ b/apps/vue-vite-app/.vscode/extensions.json @@ -1,3 +1,8 @@ { - "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] + "recommendations": [ + "Vue.volar", + "dbaeumer.vscode-eslint", + "EditorConfig.EditorConfig", + "esbenp.prettier-vscode" + ] } diff --git a/apps/vue-vite-app/README.md b/apps/vue-vite-app/README.md index 027eb5dbff..a1d076c8cc 100644 --- a/apps/vue-vite-app/README.md +++ b/apps/vue-vite-app/README.md @@ -4,22 +4,15 @@ This template should help get you started developing with Vue 3 in Vite. ## Recommended IDE Setup -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). ## Type Support for `.vue` Imports in TS -TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. - -If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: - -1. Disable the built-in TypeScript Extension - 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette - 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` -2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. ## Customize configuration -See [Vite Configuration Reference](https://vitejs.dev/config/). +See [Vite Configuration Reference](https://vite.dev/config/). ## Project Setup diff --git a/apps/vue-vite-app/eslint.config.ts b/apps/vue-vite-app/eslint.config.ts new file mode 100644 index 0000000000..d3d8f17944 --- /dev/null +++ b/apps/vue-vite-app/eslint.config.ts @@ -0,0 +1,24 @@ +import pluginVue from 'eslint-plugin-vue' +import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript' +import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' + +// To allow more languages other than `ts` in `.vue` files, uncomment the following lines: +// import { configureVueProject } from '@vue/eslint-config-typescript' +// configureVueProject({ scriptLangs: ['ts', 'tsx'] }) +// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup + +export default defineConfigWithVueTs( + { + name: 'app/files-to-lint', + files: ['**/*.{ts,mts,tsx,vue}'], + }, + + { + name: 'app/files-to-ignore', + ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'], + }, + + pluginVue.configs['flat/essential'], + vueTsConfigs.recommended, + skipFormatting, +) diff --git a/apps/vue-vite-app/package.json b/apps/vue-vite-app/package.json index 9252413db7..f5eea1b4e2 100644 --- a/apps/vue-vite-app/package.json +++ b/apps/vue-vite-app/package.json @@ -2,35 +2,36 @@ "name": "vue-vite-app", "version": "0.0.0", "private": true, + "type": "module", "scripts": { "dev": "vite", - "build": "run-p type-check build-only", + "build": "run-p type-check \"build-only {@}\" --", "preview": "vite preview", "build-only": "vite build", - "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false", - "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", + "type-check": "vue-tsc --build", + "lint": "eslint . --fix", "format": "prettier --write src/" }, "dependencies": { - "@ffmpeg/ffmpeg": "*", - "@ffmpeg/util": "*", - "vue": "^3.4.18" + "@ffmpeg/ffmpeg": "^0.12.15", + "@ffmpeg/util": "^0.12.2", + "vue": "^3.5.13" }, "devDependencies": { - "@rushstack/eslint-patch": "^1.7.2", - "@tsconfig/node18": "^18.2.2", - "@types/node": "^20.11.17", - "@vitejs/plugin-vue": "^5.0.4", - "@vitejs/plugin-vue-jsx": "^3.1.0", - "@vue/eslint-config-prettier": "^9.0.0", - "@vue/eslint-config-typescript": "^12.0.0", - "@vue/tsconfig": "^0.5.1", - "eslint": "^8.56.0", - "eslint-plugin-vue": "^9.21.1", - "npm-run-all": "^4.1.5", - "prettier": "^3.2.5", - "typescript": "~5.3.3", - "vite": "^4.5.2", - "vue-tsc": "^1.8.27" + "@tsconfig/node22": "^22.0.0", + "@types/node": "^22.13.4", + "@vitejs/plugin-vue": "^5.2.1", + "@vue/eslint-config-prettier": "^10.2.0", + "@vue/eslint-config-typescript": "^14.4.0", + "@vue/tsconfig": "^0.7.0", + "eslint": "^9.20.1", + "eslint-plugin-vue": "^9.32.0", + "jiti": "^2.4.2", + "npm-run-all2": "^7.0.2", + "prettier": "^3.5.1", + "typescript": "~5.7.3", + "vite": "^6.1.0", + "vite-plugin-vue-devtools": "^7.7.2", + "vue-tsc": "^2.2.2" } } diff --git a/apps/vue-vite-app/src/App.vue b/apps/vue-vite-app/src/App.vue index 2e7c878b1f..3455b1c3a6 100644 --- a/apps/vue-vite-app/src/App.vue +++ b/apps/vue-vite-app/src/App.vue @@ -1,9 +1,29 @@ + + diff --git a/apps/vue-vite-app/src/assets/base.css b/apps/vue-vite-app/src/assets/base.css deleted file mode 100644 index 8816868a41..0000000000 --- a/apps/vue-vite-app/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/apps/vue-vite-app/src/assets/main.css b/apps/vue-vite-app/src/assets/main.css deleted file mode 100644 index e8667cd450..0000000000 --- a/apps/vue-vite-app/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/apps/vue-vite-app/src/components/FFmpegDemo.vue b/apps/vue-vite-app/src/components/FFmpegDemo.vue index 56cf22f29d..8f1741b9a4 100644 --- a/apps/vue-vite-app/src/components/FFmpegDemo.vue +++ b/apps/vue-vite-app/src/components/FFmpegDemo.vue @@ -1,61 +1,51 @@ - + - diff --git a/apps/vue-vite-app/src/main.ts b/apps/vue-vite-app/src/main.ts index 0ac3a5ff0c..654a2640d0 100644 --- a/apps/vue-vite-app/src/main.ts +++ b/apps/vue-vite-app/src/main.ts @@ -1,6 +1,5 @@ -import './assets/main.css' +import '@/styles/index.css'; +import { createApp } from 'vue'; +import App from '@/App.vue'; -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') +createApp(App).mount('#app'); diff --git a/apps/vue-vite-app/src/styles/index.css b/apps/vue-vite-app/src/styles/index.css new file mode 100644 index 0000000000..6d76cf3c95 --- /dev/null +++ b/apps/vue-vite-app/src/styles/index.css @@ -0,0 +1,30 @@ +@import 'reset.css'; + +body { + color: #e3e3e3; + background-color: #1b1b1d; + font-family: Arial, sans-serif; +} + +button { + padding: 0.5em 1em; + color: inherit; + background-color: #272727; + border: none; + border-radius: 100vmax; + text-decoration: none; + cursor: pointer; + user-select: none; + + &:hover { + background-color: #3d3d3d; + } + + &:active { + background-color: #505050; + } +} + +video { + border-radius: 12px; +} diff --git a/apps/vue-vite-app/src/styles/reset.css b/apps/vue-vite-app/src/styles/reset.css new file mode 100644 index 0000000000..f2ce236fd0 --- /dev/null +++ b/apps/vue-vite-app/src/styles/reset.css @@ -0,0 +1,62 @@ +/* + Josh's Custom CSS Reset + https://www.joshwcomeau.com/css/custom-css-reset/ +*/ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + margin: 0; +} + +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +#app { + isolation: isolate; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} + +p { + text-wrap: pretty; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} diff --git a/apps/vue-vite-app/tsconfig.app.json b/apps/vue-vite-app/tsconfig.app.json index 59a15f2845..913b8f279f 100644 --- a/apps/vue-vite-app/tsconfig.app.json +++ b/apps/vue-vite-app/tsconfig.app.json @@ -3,12 +3,10 @@ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { - "composite": true, - "baseUrl": ".", + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "paths": { "@/*": ["./src/*"] - }, - "target": "esnext", - "moduleResolution": "node" + } } } diff --git a/apps/vue-vite-app/tsconfig.node.json b/apps/vue-vite-app/tsconfig.node.json index dee96bed47..a83dfc9d48 100644 --- a/apps/vue-vite-app/tsconfig.node.json +++ b/apps/vue-vite-app/tsconfig.node.json @@ -1,14 +1,17 @@ { - "extends": "@tsconfig/node18/tsconfig.json", + "extends": "@tsconfig/node22/tsconfig.json", "include": [ "vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", - "playwright.config.*" + "playwright.config.*", + "eslint.config.*" ], "compilerOptions": { - "composite": true, + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "module": "ESNext", "moduleResolution": "Bundler", "types": ["node"] diff --git a/apps/vue-vite-app/vite.config.ts b/apps/vue-vite-app/vite.config.ts index 20fba69711..08cdab5e35 100644 --- a/apps/vue-vite-app/vite.config.ts +++ b/apps/vue-vite-app/vite.config.ts @@ -1,17 +1,19 @@ -import { fileURLToPath, URL } from 'node:url' +import { fileURLToPath, URL } from 'node:url'; -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import vueJsx from '@vitejs/plugin-vue-jsx' +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import vueDevTools from 'vite-plugin-vue-devtools'; -// https://vitejs.dev/config/ +// https://vite.dev/config/ export default defineConfig({ - plugins: [vue(), vueJsx()], + plugins: [vue(), vueDevTools()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, + + // Necessary for FFmpeg optimizeDeps: { exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'] }, @@ -21,4 +23,4 @@ export default defineConfig({ 'Cross-Origin-Embedder-Policy': 'require-corp' } } -}) +});