[epic] Migrate vue2 to vue3 (#1236)

* updated dependencies

* WIP

* router

* api and pages

* search page WIP

* slots

* various tweaks

* storybook

* model migration - first pass

* v-model

* EntityMonitor fixes

* $navigation and $set

* beforeUnmount, eventbus methods

* removed .native

* icon

* fixes after revision of all pages

* User page to use vuelidate

* replaced vee-validate with vuelidate

* issue viewer page fixes and refactoring

* various tweaks and fixes

* ts errors fixes WIP

* typescript cleanup

* removed old main file

* bundle size tweaks

* vitest

* fixed eslint errors

* update readme and makefile

* reverse order of css loaded

* remove errors

* Update HistogramSlider.vue

* add change listener to FilterRange

* remove custom slider

* default number formatting

---------

Co-authored-by: Daniele Guido <[email protected]>

.env

@@ -1,10 +1,10 @@
-VUE_APP_TYPEKIT_ID="clh1ecw"
-VUE_APP_MIDDLELAYER_API="http://localhost:3030"
-VUE_APP_MIDDLELAYER_MEDIA_PATH="/media"
-VUE_APP_MIDDLELAYER_API_PATH="/"
-VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/socket.io/"
-VUE_APP_TAWK_TO_SITE_ID=
-VUE_APP_BASE_URL="https://impresso-project.ch"
-VUE_APP_MAINTENANCE=
-VUE_APP_GIT_REPO="https://github.com/impresso/impresso-frontend"
-VUE_APP_MIDDLE_LAYER_GIT_REPO="https://github.com/impresso/impresso-middle-layer"
+VITE_TYPEKIT_ID="clh1ecw"
+VITE_MIDDLELAYER_API="http://localhost:3030"
+VITE_MIDDLELAYER_MEDIA_PATH="/media"
+VITE_MIDDLELAYER_API_PATH="/"
+VITE_MIDDLELAYER_API_SOCKET_PATH="/socket.io/"
+VITE_TAWK_TO_SITE_ID=
+VITE_BASE_URL="https://impresso-project.ch"
+VITE_MAINTENANCE=
+VITE_GIT_REPO="https://github.com/impresso/impresso-frontend"
+VITE_MIDDLE_LAYER_GIT_REPO="https://github.com/impresso/impresso-middle-layer"

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_MIDDLELAYER_API="http://localhost:3030"
-VUE_APP_MIDDLELAYER_API_PATH="/"
-VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/socket.io"
-VUE_APP_USE_PROXY_MIDDLEWARE=true
+VITE_MIDDLELAYER_API="http://localhost:3030"
+VITE_MIDDLELAYER_API_PATH="/"
+VITE_MIDDLELAYER_API_SOCKET_PATH="/socket.io"
+VITE_USE_PROXY_MIDDLEWARE=true

.env.production

@@ -1,6 +1,6 @@
-VUE_APP_MIDDLELAYER_API=""
-VUE_APP_MIDDLELAYER_MEDIA_PATH="/api/media"
-VUE_APP_MIDDLELAYER_API_PATH="/api"
-VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/api/socket.io/"
-VUE_APP_TAWK_TO_SITE_ID="5c49872f51410568a1081bed"
-VUE_APP_GA_TRACKING_ID="UA-115750203-1"
+VITE_MIDDLELAYER_API=""
+VITE_MIDDLELAYER_MEDIA_PATH="/api/media"
+VITE_MIDDLELAYER_API_PATH="/api"
+VITE_MIDDLELAYER_API_SOCKET_PATH="/api/socket.io/"
+VITE_TAWK_TO_SITE_ID="5c49872f51410568a1081bed"
+VITE_GA_TRACKING_ID="UA-115750203-1"

.eslintrc.cjs

@@ -1,6 +1,26 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
   root: true,
-};
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting',
+    'plugin:storybook/recommended'
+  ],
+  overrides: [
+    {
+      files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
+      extends: ['plugin:cypress/recommended']
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/multi-word-component-names': ['warn'],
+    'vue/no-v-text-v-html-on-component': ['warn']
+  }
+}

.gitignore

@@ -20,7 +20,6 @@ tmp/
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
@@ -33,3 +32,5 @@ tmp/
 # Local Netlify folder
 .netlify
 impresso-frontend.code-workspace
+
+*storybook.log

.prettierrc → .prettierrc.json

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

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  env: (config) => ({
+    ...config,
+    // use rest transport in storybook to make mocking easier
+    VITE_API_TRANSPORT: 'rest',
+    VITE_MIDDLELAYER_API_BASE_URL: '/api'
+  })
+}
+export default config

.storybook/mswHandlers.ts

@@ -0,0 +1,49 @@
+import { http, HttpResponse } from 'msw';
+
+const getYearFacetHandler = http.get('/api/search-facets/search/year', () => {
+  const numBuckets = 200
+  return HttpResponse.json({
+    type: 'year',
+    numBuckets,
+    buckets: Array.from({ length: numBuckets }, (_, i) => {
+      const c = Math.floor(Math.random() * 10000)
+
+      return {
+        count: c,
+        val: String(1800 + i),
+        uid: String(1800 + i),
+        item: {
+          y: 1800 + i,
+          refs: {
+            c: c,
+            a: c,
+          }
+        }
+      }
+    })
+  });
+})
+
+const getEntity = http.get('/api/entities/*', () => {
+  return HttpResponse.json({})
+})
+
+const getMe = http.get('/api/me', () => {
+  return HttpResponse.json({
+    firstname: 'John',
+    lastname: 'Doe',
+    email: '[email protected]',
+    uid: '123',
+    username: 'johndoe',
+    isActive: true,
+    isStaff: false,
+    emailAccepted: false,
+  })
+})
+
+
+export const handlers = {
+  getYearFacetHandler,
+  getEntity,
+  getMe,
+}

.storybook/preview.ts

@@ -0,0 +1,51 @@
+import type { Preview } from '@storybook/vue3'
+import { setup } from "@storybook/vue3"
+import { initialize, mswLoader } from 'msw-storybook-addon'
+import globalComponents from '../src/plugins/globalComponents'
+import { newI18n } from '../src/plugins/i18n'
+import pinia from '../src/plugins/pinia'
+import { handlers as mswHandlers } from './mswHandlers'
+
+import 'dripicons/webfont/webfont.css'
+import 'impresso-theme/dist/css/bootpresso.css'
+import '../src/assets/legacy/bootstrap-vue.css'
+
+/*
+ * Initializes MSW
+ * See https://github.com/mswjs/msw-storybook-addon#configuring-msw
+ * to learn how to customize it
+ */
+const worker = initialize({
+  onUnhandledRequest: ({ url, method }) => {
+    const pathname = new URL(url).pathname
+    if (pathname.startsWith('/api/')) {
+      throw new Error(`Please add a request handler for ${method} ${pathname}`)
+    }
+  },
+})
+
+// it won't load the handlers without this call. May be a bug
+worker.use(...[])
+
+setup(app => {
+  app.use(pinia)
+  app.use(newI18n())
+  app.use(globalComponents)
+})
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    msw: {
+      handlers: mswHandlers,
+    },
+  },
+  loaders: [mswLoader],
+}
+
+export default preview

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "jest.enable": false,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

Makefile

@@ -12,15 +12,15 @@ build-netlify:
 	GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
 	GIT_REVISION=$(shell git rev-parse --short HEAD) \
 	PUBLIC_PATH=/ \
-	NODE_OPTIONS=--openssl-legacy-provider npm run build && \
+	npm run build && \
 	netlify deploy --prod --dir=dist
 
 run-dev:
 	GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \
 	GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
 	GIT_REVISION=$(shell git rev-parse --short HEAD) \
 	PUBLIC_PATH=/app/ \
-	NODE_OPTIONS=--openssl-legacy-provider npm start
+	npm run dev
 
 run-docker-dev:
 	GIT_TAG=$(shell git describe --tags --abbrev=0 HEAD) \

README.md

@@ -4,32 +4,30 @@ Welcome to the _impresso_ app frontend website to search, explore and create per
 
 ## Install for development
 
-This is a website that uses vue2 framework build in **node v17** and **is not compatible with node v18**. We provide a dockerfile-dev which points to the right node version to use. Alternatively, you can use `nvm install 17` and then install all dependencies
+This is a website that uses vue3. To install the dependencies, run:
 
-with `--openssl-legacy-provider` option
-
-```
-NODE_OPTIONS=--openssl-legacy-provider npm install
+```sh
+npm install
 ```
 
-If required, cnfigure Vue proxy to `api` and `socket.io` in `.env.development.local` if needed, do not put any slash at the end of the env variables:
+If required, cnfigure Vue proxy to `api` and `socket.io` in `.env.development`. Do not put any slash at the end of the env variables:
 
 ```sh
-VUE_APP_MIDDLELAYER_API="https://...."
-VUE_APP_MIDDLELAYER_API_PATH="/api"
-VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/api/socket.io"
+VITE_MIDDLELAYER_API="https://...."
+VITE_MIDDLELAYER_API_PATH="/api"
+VITE_MIDDLELAYER_API_SOCKET_PATH="/api/socket.io"
 ```
 
 To use vue proxy while developing, add this env variable to your `.env.development.local` file:
 
 ```sh
-VUE_APP_USE_PROXY_MIDDLEWARE=true
+VITE_USE_PROXY_MIDDLEWARE=true
 ```
 
 Finally run with:
 
 ```
-NODE_OPTIONS=--openssl-legacy-provider npm start
+npm run dev
 ```
 
 ### Use docker stack for development (node v12)

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  }
+})

env.d.ts

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

public/index.html → index.html

@@ -29,7 +29,7 @@
     <!-- End Matomo Code -->
   </head>
   <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <div id="app-container" style="height: 100%;"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>