Add frontend base (#19)

* Add package.json

* Add 'node_modules' to .gitignore

* Add 'typescript' to dev dependencies

* Configure TypeScript for Vue

* Configure TypeScript for Vite

* Set 'composite' in tsconfig.*.json

According to the documentation, the 'composite' option should be set to
'true' for referenced projects.

* Add Vite's client-side types to tsconfig.dom.json

* Add 'vite' to dev dependencies

* Add favicon.ico mock

* Add index.html

* Add vite.config.ts

* Fix tsconfig.dom.json

* Add Vite scripts

* Use a relative import for main.ts in index.html

- The main.ts reference is fundamentally different from the favicon.ico
  reference, Vite resolves references like this similarly to how JavaScript
  imports are resolved.
- '@/main.ts' in index.html that uses 'resolve.alias' works properly for the
  production build but doesn't work for the development server.

* Add 'vue-tsc' to dev dependencies

* Add 'vue' to dependencies

* Add '@vitejs/plugin-vue' to dev dependencies

* Add App.vue, main.ts

* Add '@types/node' to dev dependencies

Fixes TypeScript's "Cannot find type definition file for 'node'".

* Fix 'compilerOptions.paths' in tsconfig.dom.json

Fixes TypeScript's "Non-relative paths are not allowed when 'baseUrl' is not
set. Did you forget a leading './'?"

* Set 'noEmit' in referenced tsconfig.json files

This makes it possible to perform check-only builds of a project that
uses 'references' in tsconfig.json. The '--noEmit' flag cannot be used
here because it is incompatible with '--build'. Check-only builds are
especially important for 'vue-tsc' as it doesn't support emitting files.

* Add '*.tsbuildinfo' to .gitignore

* Add 'lint' script to package.json

- 'vue-tsc' uses '--build' because we are using 'references' in
  tsconfig.json.
- 'vue-tsc' doesn't use '--noEmit' because it is incompatible with
  '--build'. Instead we set 'noEmit' to 'true' in the referenced
  tsconfig.json files.
- 'vue-tsc' uses '--force' to make check-only builds more reliable (see
  vuejs/create-vue#274).

* Add 'eslint', 'eslint-plugin-vue', 'typescript-eslint' to dev dependencies

* Allow JavaScript to be checked in tsconfig.node.json

* Add eslint.config.js

* Add ESLint configuration recommended by 'typescript-eslint'

* Add '@types/eslint__js' to dev dependencies

* Stop using 'types' in tsconfig.json files

Because unfortunately, they don't work as expected.

* Enhance ESLint with type information

- '...tseslint.configs.recommendedTypeChecked' enables enhanced linting
  with type information.
- 'languageOptions.parserOptions.EXPERIMENTAL_useProjectService: true'
  allows 'typescript-eslint' to compute type information for a
  TypeScript project that uses 'references' in the tsconfig.json file
  (see typescript-eslint/typescript-eslint#2094).

* Add 'vue-eslint-parser' to dev dependencies

* Clean up eslint.config.js

* Include local type definitions in the project

* Declare 'eslint-plugin-vue' module

* Clean up eslint.config.js

* Add '@eslint/eslintrc' to dev dependencies

* Add '@types/eslint__eslintrc' to dev dependencies

* Configure ESLint for Vue

- 'eslint-plugin-vue' doesn't support flat configuration yet, therefore
  we rely on '@eslint/eslintrc' to use Vue's recommended configuration.

* Remove 'eslint-plugin-vue' module declaration

It is no longer directly imported in the project, so types are not
needed.

* Ignore a ESLint error regarding 'App.vue' being 'any'

* Add 'eslint-config-prettier' to dev dependencies

* Add 'prettier' to dev dependencies

* Add '@types/eslint-config-prettier' to dev dependencies

* Remove 'lint' from scripts

* Add 'check', 'format' to scripts

* Add Prettier's ESLint config

* Remove custom types from tsconfig.*.json

* Clean up tsconfig.node.json

* Remove 'types' field from tsconfig.json files

* Factor out tsconfig.base.json

* Add env.dom.d.ts

* Add 'tailwindcss', 'postcss', 'autoprefixer' to dev dependencies

* Initialize PostCSS and Tailwind

* Configure HTML template files for Tailwind

* Format

* Add types to postcss.config.js

* Add the Tailwind directives to style.css

* Add style.css import to main.ts

* Add Tailwind CSS Prettier plugin

* Add 'dist' to .gitignore

* Enable reporting of unused disable directives in ESLint

* Add vue-router to dependencies

* Add router

* Add pinia to dependencies

* Add Pinia

* Ignore dist in eslint

* Add @eslint/js to dev dependencies

* Suppress the createApp eslint error

* Remove the counter store

Author: k11v

frontend/.gitignore

@@ -0,0 +1,3 @@
+*.tsbuildinfo
+dist
+node_modules

frontend/env.dom.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/eslint.config.js

@@ -0,0 +1,34 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import js from "@eslint/js";
+import prettierConfig from "eslint-config-prettier";
+import ts from "typescript-eslint";
+import vueParser from "vue-eslint-parser";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const eslintrc = new FlatCompat({
+  baseDirectory: path.dirname(fileURLToPath(import.meta.url)),
+});
+
+export default ts.config(
+  {
+    ignores: ["dist/"],
+  },
+  js.configs.recommended,
+  ...ts.configs.recommendedTypeChecked,
+  ...eslintrc.extends("plugin:vue/vue3-recommended"), // Depends on `eslint-plugin-vue`
+  prettierConfig,
+  {
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: ts.parser,
+        EXPERIMENTAL_useProjectService: true,
+      },
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: "error",
+    },
+  },
+);

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>