diff --git a/Dockerfile b/Dockerfile
index 67fc59f..df74c20 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -25,9 +25,9 @@ RUN --mount=type=cache,id=ui,target=/root/.yarn \
set -ex; \
\
yarn dlx update-browserslist-db@latest; \
- yarn build --dest /opt/advent22/ui; \
+ yarn build --outDir /opt/advent22/ui; \
# exclude webpack-bundle-analyzer output
- rm -f /opt/advent22/ui/report.html;
+ rm -f /opt/advent22/ui/stats.html;
###############
diff --git a/ui/.browserslistrc b/ui/.browserslistrc
deleted file mode 100644
index dc3bc09..0000000
--- a/ui/.browserslistrc
+++ /dev/null
@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11
diff --git a/ui/.devcontainer/devcontainer.json b/ui/.devcontainer/devcontainer.json
index 2550d04..737d8c2 100644
--- a/ui/.devcontainer/devcontainer.json
+++ b/ui/.devcontainer/devcontainer.json
@@ -1,51 +1,54 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
{
- "name": "Advent22 UI",
+ "name": "Advent22 UI",
- // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
- "image": "mcr.microsoft.com/devcontainers/javascript-node:4-24-trixie",
+ // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+ "image": "mcr.microsoft.com/devcontainers/javascript-node:4-24-trixie",
- // Features to add to the dev container. More info: https://containers.dev/features.
- "features": {
- "ghcr.io/devcontainers/features/git-lfs:1": {},
- "ghcr.io/devcontainers-extra/features/zsh-plugins:0": {
- "plugins": "git-flow npm nvm yarn"
- },
- "ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
- "packages": "git-flow"
- },
- "ghcr.io/devcontainers-extra/features/vue-cli:2": {}
+ // Features to add to the dev container. More info: https://containers.dev/features.
+ "features": {
+ "ghcr.io/devcontainers/features/git-lfs:1": {},
+ "ghcr.io/devcontainers-extra/features/zsh-plugins:0": {
+ "plugins": "git-flow npm nvm yarn"
},
-
- // Configure tool-specific properties.
- "customizations": {
- // Configure properties specific to VS Code.
- "vscode": {
- // Set *default* container specific settings.json values on container create.
- "settings": {
- "terminal.integrated.defaultProfile.linux": "zsh"
- },
- // Add the IDs of extensions you want installed when the container is created.
- "extensions": [
- "dbaeumer.vscode-eslint",
- "esbenp.prettier-vscode",
- "mhutchie.git-graph",
- "Syler.sass-indented",
- "Vue.volar"
- ]
- }
+ "ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
+ "packages": "git-flow"
},
+ "ghcr.io/devcontainers-extra/features/vue-cli:2": {}
+ },
- // Use 'postCreateCommand' to run commands after the container is created.
- // "postCreateCommand": "yarn install",
+ // Configure tool-specific properties.
+ "customizations": {
+ // Configure properties specific to VS Code.
+ "vscode": {
+ // Set *default* container specific settings.json values on container create.
+ "settings": {
+ "terminal.integrated.defaultProfile.linux": "zsh"
+ },
+ // Add the IDs of extensions you want installed when the container is created.
+ "extensions": [
+ "dbaeumer.vscode-eslint",
+ "EditorConfig.EditorConfig",
+ "esbenp.prettier-vscode",
+ "mhutchie.git-graph",
+ "oxc.oxc-vscode",
+ "Syler.sass-indented",
+ "vitest.explorer",
+ "Vue.volar"
+ ]
+ }
+ },
- // Use 'postStartCommand' to run commands after the container is started.
- "postStartCommand": "yarn dlx update-browserslist-db@latest && yarn install"
+ // Use 'postCreateCommand' to run commands after the container is created.
+ // "postCreateCommand": "yarn install",
- // Use 'forwardPorts' to make a list of ports inside the container available locally.
- // "forwardPorts": [],
+ // Use 'postStartCommand' to run commands after the container is started.
+ "postStartCommand": "yarn dlx update-browserslist-db@latest && yarn install"
- // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
- // "remoteUser": "root"
+ // Use 'forwardPorts' to make a list of ports inside the container available locally.
+ // "forwardPorts": [],
+
+ // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+ // "remoteUser": "root"
}
diff --git a/ui/.editorconfig b/ui/.editorconfig
new file mode 100644
index 0000000..3b510aa
--- /dev/null
+++ b/ui/.editorconfig
@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
deleted file mode 100644
index 70723bd..0000000
--- a/ui/.eslintrc.js
+++ /dev/null
@@ -1,38 +0,0 @@
-module.exports = {
- root: true,
-
- env: {
- node: true,
- },
-
- extends: [
- "plugin:vue/vue3-essential",
- "eslint:recommended",
- "@vue/typescript/recommended",
- ],
-
- parserOptions: {
- ecmaVersion: 2020,
- },
-
- rules: {
- "no-empty": "off",
- "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
- "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
- },
-
- overrides: [
- {
- files: [
- "**/__tests__/*.{j,t}s?(x)",
- "**/tests/unit/**/*.spec.{j,t}s?(x)",
- ],
- env: {
- mocha: true,
- },
- rules: {
- "@typescript-eslint/no-unused-expressions": "off",
- }
- },
- ],
-};
diff --git a/ui/.gitattributes b/ui/.gitattributes
new file mode 100644
index 0000000..6313b56
--- /dev/null
+++ b/ui/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/ui/.gitignore b/ui/.gitignore
index 8456c3e..79fa52f 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -1,4 +1,19 @@
+# from newly scaffolded vite project
+
.DS_Store
+dist-ssr
+coverage
+*.local
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
# https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore
diff --git a/ui/.oxlintrc.json b/ui/.oxlintrc.json
new file mode 100644
index 0000000..86b5cc2
--- /dev/null
+++ b/ui/.oxlintrc.json
@@ -0,0 +1,10 @@
+{
+ "$schema": "./node_modules/oxlint/configuration_schema.json",
+ "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue", "vitest"],
+ "env": {
+ "browser": true
+ },
+ "categories": {
+ "correctness": "error"
+ }
+}
diff --git a/ui/.prettierrc.json b/ui/.prettierrc.json
new file mode 100644
index 0000000..8733bd0
--- /dev/null
+++ b/ui/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+ "$schema": "https://json.schemastore.org/prettierrc",
+ "semi": true,
+ "singleQuote": false,
+ "printWidth": 100,
+ "trailingComma": "all"
+}
diff --git a/ui/.vscode/extensions.json b/ui/.vscode/extensions.json
index 45d98df..4f20012 100644
--- a/ui/.vscode/extensions.json
+++ b/ui/.vscode/extensions.json
@@ -1,3 +1,12 @@
{
- "recommendations": ["sdras.vue-vscode-snippets"]
+ "recommendations": [
+ "dbaeumer.vscode-eslint",
+ "EditorConfig.EditorConfig",
+ "esbenp.prettier-vscode",
+ "mhutchie.git-graph",
+ "oxc.oxc-vscode",
+ "Syler.sass-indented",
+ "vitest.explorer",
+ "Vue.volar"
+ ]
}
diff --git a/ui/.vscode/settings.json b/ui/.vscode/settings.json
index 57ee8c2..2460818 100644
--- a/ui/.vscode/settings.json
+++ b/ui/.vscode/settings.json
@@ -4,10 +4,11 @@
},
"[jsonc]": {
- "editor.formatOnSave": false,
+ "editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
+ "source.fixAll": "explicit",
"source.organizeImports": "explicit"
},
@@ -15,9 +16,14 @@
"editor.formatOnSave": true,
"editor.tabSize": 2,
+ "explorer.fileNesting.enabled": true,
+ "explorer.fileNesting.patterns": {
+ "tsconfig.json": "tsconfig.*.json, env.d.ts, typed-router.d.ts",
+ "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+ "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .oxfmt*, .prettier*, prettier*, .editorconfig"
+ },
+
"sass.disableAutoIndent": true,
"sass.format.convert": false,
- "sass.format.deleteWhitespace": true,
-
- "prettier.trailingComma": "all",
+ "sass.format.deleteWhitespace": true
}
diff --git a/ui/.vscode/tasks.json b/ui/.vscode/tasks.json
index e5ffa95..65351ad 100644
--- a/ui/.vscode/tasks.json
+++ b/ui/.vscode/tasks.json
@@ -3,10 +3,21 @@
"tasks": [
{
"type": "npm",
- "script": "serve",
+ "script": "dev",
"problemMatcher": [],
- "label": "UI starten",
- "detail": "vue-cli-service serve"
+ "label": "UI starten"
+ },
+ {
+ "type": "npm",
+ "script": "lint",
+ "problemMatcher": ["$eslint-compact"],
+ "label": "Linter"
+ },
+ {
+ "type": "npm",
+ "script": "format",
+ "problemMatcher": [],
+ "label": "Formatter"
}
]
}
diff --git a/ui/README.md b/ui/README.md
index 9ed3aab..8657852 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -1,29 +1,54 @@
# advent22_ui
-## Project setup
+This template should help get you started developing with Vue 3 in Vite.
-```
-yarn install
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+ - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+ - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+ - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+ - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## 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 [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://vite.dev/config/).
+
+## Project Setup
+
+```sh
+yarn
```
-### Compiles and hot-reloads for development
+### Compile and Hot-Reload for Development
-```
-yarn serve
+```sh
+yarn dev
```
-### Compiles and minifies for production
+### Type-Check, Compile and Minify for Production
-```
+```sh
yarn build
```
-### Lints and fixes files
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+```sh
+yarn test:unit
```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
yarn lint
```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/ui/babel.config.json b/ui/babel.config.json
deleted file mode 100644
index 07c2147..0000000
--- a/ui/babel.config.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "presets": [
- "@vue/cli-plugin-babel/preset"
- ]
-}
\ No newline at end of file
diff --git a/ui/env.d.ts b/ui/env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/ui/env.d.ts
@@ -0,0 +1 @@
+///
- Du hast noch keine Türchen geöffnet, vielleicht gibt es ein Anzeigeproblem - in Deinem Webbrowser? + Du hast noch keine Türchen geöffnet, vielleicht gibt es ein Anzeigeproblem in Deinem + Webbrowser?