Quasar 2 - second try (#2438)

* rename styl files to sass files

* install quasar v2 and quasar/app v3

* upgrade eslint

* update quasar.conf.js

* remove hard-source-webpack-plugin

It is not compatible with webpack 5. mzgoddard/hard-source-webpack-plugin#546

* migrate stylus syntax to sass syntax

* fix line in .eslintrc

* upgrade vue router

https://next.router.vuejs.org/guide/migration/index.html

* upgrade vuex

https://next.quasar.dev/start/upgrade-guide#vuex-v4

* upgrade vue-i18n

https://next.quasar.dev/start/upgrade-guide#vue-i18n-v9

* content-class -> class and content-style -> style

https://next.quasar.dev/start/upgrade-guide#qdrawer-qdialog-qmenu-qtooltip

* update QScrollObserver

https://next.quasar.dev/start/upgrade-guide#qscrollobserver

* update QTable

://next.quasar.dev/start/upgrade-guide#qtable

* zh-hant -> zh-TW

* add stylus loader

* upgrade vue-router, vuex, eslint-parser

downgrade stylus-loader

* remove old vue dependency

* fix datastore and boot files

* WIP fix storybook

* fix storybook setup

* fix first story

* fix i18n datetime breaking change

* fix storybook $icon support

* rewrite some component styles to sass

* change stylelint to look for sass files

* remove $listeners

* WIP messy upgrade

* fix two more tests

* updates & fixes

* yarn upgrade

* add @-alias for service worker compilation

* try to fix some tests

* rewrite '>>>' to '::v-deep()'

* add percentage sign

* update dependencies

* add back margin on feedbackitem

* fix statistics sidenav entry

* fix some redirects

* fix: value -> modelValue

* fix date-time input on small screens

* fix search

* ignore storybook-static

* hey linter

* hey hey

* fix mobile sidenav

* fix some map stuff

* avoid CSP by using vue-i18n runtime

* Revert "avoid CSP by using vue-i18n runtime"

This reverts commit 7438954.

* yarn upgrade

* skip extra upgrade step

* drop outdated comment

* clarify comment about compat mode

* Fix sending wall messages

* Update deps

* Downgrade to jest 27

Until vuejs/vue-jest#467

* replace unmaintained eslint-plugin-node
with eslint-plugin-n

* adjust code style

eslint-config-standard has evolved

* try skipping one test

* Fix storyshot tests

* Update snapshots

* Style fixes

* Remove debug logging

* Fix router tests

* Fix signup component test

* Fix conversation tests

* Fix map tests

* Style fixes

* Update snapshots

There is a discrepancy with the date formatting depending on
different installations of nodejs, so this might be an ongoing
issue....

* Explain use of markRaw

* remove double space

Co-authored-by: pogopaule <[email protected]>
Co-authored-by: Nick Sellen <[email protected]>

Author: 3 people

.circleci/config.yml

@@ -373,10 +373,8 @@ jobs:
             git config user.name "CircleCI"
             git branch --delete --force $BRANCH || true
             git checkout -b $BRANCH
-            yarn upgrade --latest --ignore-engines
-            # stay with quasar@1 and vue@2 and webpack@4 until we found time to upgrade
-            # downgrade stylelint due to https://github.com/karrot-dev/karrot-frontend/issues/2461
-            yarn upgrade --ignore-engines vue@legacy quasar@legacy @quasar/app@legacy vuex-persistedstate@^3.1.0 stylelint-webpack-plugin@^2.2.2 eslint-webpack-plugin@2 @quasar/quasar-ui-qiconpicker@qv1 @vue/test-utils@^1.3.0 stylelint@^13.13.1 vue-router@^3 vue-i18n@^8
+            # holding back jest to 27 due to https://github.com/vuejs/vue-jest/issues/467
+            yarn upgrade --latest --ignore-engines jest@^27 babel-jest@^27 jest-environment-jsdom@^27
             tee pr.txt \<<EOL
             [CI] update dependencies
 

.eslintignore

@@ -4,3 +4,7 @@
 /src-cordova
 /.quasar
 /node_modules
+/storybook-static
+/docs/_book
+/docs/node_modules
+/docs/book

.eslintrc.js

@@ -20,7 +20,7 @@ module.exports = {
     // Uncomment any of the lines below to choose desired strictness,
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 
     'standard',
 

.storybook/main.js

@@ -1,11 +1,17 @@
+// require('@storybook/addon-postcss')
+
 const QuasarConfFile = require('@quasar/app/lib/quasar-conf-file')
 const getQuasarCtx = require('@quasar/app/lib/helpers/get-quasar-ctx')
 
 module.exports = {
-  stories: ['../src/**/*.story.js'],
+  core: {
+    builder: 'webpack5',
+  },
+  stories: ['../src/**/LatestMessages.story.js'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',
+    '@storybook/addon-essentials',
   ],
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
@@ -19,7 +25,7 @@ module.exports = {
     const quasarConfig = new QuasarConfFile(ctx)
     await quasarConfig.prepare()
     await quasarConfig.compile()
-    const webpackConfig = quasarConfig.webpackConf
+    const webpackConfig = quasarConfig.webpackConf.renderer
 
     // Manual merge with our webpack config
     config.module.rules = webpackConfig.module.rules

.storybook/preview.js

@@ -1,28 +1,25 @@
 // Vue config
-import 'quasar/dist/quasar.styl'
-import '../src/css/app.styl'
+import 'quasar/dist/quasar.css'
+import '@/css/app.sass'
 
-import Vue from 'vue'
-import Vuex from 'vuex'
-import VueI18n from 'vue-i18n'
-import VueRouter from 'vue-router'
-import configureQuasar from '>/configureQuasar'
-import { RouterLinkStub, TransitionStub, TransitionGroupStub } from '@vue/test-utils'
-import { IconPlugin } from '@/base/icons'
+// import Vuex from 'vuex'
+// import VueRouter from 'vue-router'
+import { i18nPlugin } from '@/base/i18n'
+import { Quasar } from 'quasar'
+import quasarConfig from '>/quasarConfig'
+import { RouterLinkStub } from '@vue/test-utils'
+import icons from '@/base/icons'
+import { app } from '@storybook/vue3'
 
-Vue.config.productionTip = false
-Vue.config.devtools = true
-configureQuasar(Vue)
-Vue.use(Vuex) // Install Vuex
-Vue.use(IconPlugin)
-Vue.use(VueI18n)
-Vue.use(VueRouter)
+app.use(i18nPlugin)
+app.use(Quasar, quasarConfig)
+// app.use(Vuex)
+// app.use(VueRouter)
+app.config.globalProperties.$icon = icons.get
 
-Vue.component('RouterLink', RouterLinkStub)
-Vue.component('Transition', TransitionStub)
-Vue.component('TransitionGroup', TransitionGroupStub)
-Vue.directive('measure', {})
-Vue.config.errorHandler = (err, vm, info) => {
+app.component('RouterLink', RouterLinkStub)
+app.directive('measure', {})
+app.config.errorHandler = (err, vm, info) => {
   console.log(err, vm, info)
 }
 

CONTRIBUTE.md

@@ -80,5 +80,4 @@ To make it easier to look for documentation and help on the internet, here's a l
 * JS framework: [VueJS](https://vuejs.org/v2/guide/)
 * UI framework: [Quasar](http://quasar.dev/guide/)
 * State management: [Vuex](https://vuex.vuejs.org/en/)
-* Style: [Stylus](http://stylus-lang.com/)
 * Test framework: [Jest](https://facebook.github.io/jest/docs/en/getting-started.html)

build/stylelintCustomSyntax.js

@@ -169,4 +169,4 @@ e.g. the status about a `save` action would be available as `saveStatus` or the
     - uses `hasNonFieldError` & `firstNonFieldError` to show errors unrelated to fields?
     - sets `::loading="isPending"` on submit button?
     - uses pending status for non-submit actions? (e.g. destroy)
-- Does the form use [vuelidate](https://monterail.github.io/vuelidate/) (`$v`) to check for validation errors client-side?
+- Does the form use [vuelidate](https://vuelidate-next.netlify.app) to check for validation errors client-side?

docs/src/forms.md

@@ -17,7 +17,7 @@ src/
       - ...
     - datastore/                # vuex namespaced modules and plugins
       - activity.js
-      - activity.spec.js          # unit test 
+      - activity.spec.js          # unit test
       - ...
     - components/               # reusable components (atoms, molecules, organism)
       - ActivityUser.vue
@@ -26,7 +26,7 @@ src/
       - ...
     - pages/                    # page templates and instances
       - ActivitiesManage.vue       # page connected with mapGetters and mapActions
-      - ActivitiesManageUI.vue     # or with vuex-connect
+      - ActivitiesManageUI.vue
       - ...
 ```
 

docs/src/frontend-structure.md

@@ -0,0 +1,56 @@
+const esModules = ['quasar', 'quasar/lang', 'lodash-es', 'leaflet'].join('|')
+
+module.exports = {
+  roots: [
+    '<rootDir>/src/',
+  ],
+  globals: {
+    __DEV__: true,
+  },
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    pretendToBeVisual: true,
+  },
+  collectCoverage: true,
+  coverageDirectory: './coverage/',
+  coverageReporters: [
+    'json',
+    'lcov',
+  ],
+  // Needed in JS codebases too because of feature flags
+  coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'],
+  testMatch: [
+    '<rootDir>/src/**/*.spec.js',
+  ],
+  moduleDirectories: [
+    'node_modules',
+    '<rootDir>/src',
+  ],
+  moduleFileExtensions: ['vue', 'js', 'json'],
+  moduleNameMapper: {
+    '^quasar$': 'quasar/dist/quasar.esm.prod.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/fileMock.js',
+    '\\.(css|less|styl|stylus|sass|scss)$': '<rootDir>/test/styleMock.js',
+    '@/(.*)$': '<rootDir>/src/$1',
+    '>/(.*)$': '<rootDir>/test/$1',
+  },
+  transform: {
+    '.*\\.vue$': '@vue/vue3-jest',
+    '.*\\.js$': 'babel-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+  },
+  transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
+  snapshotSerializers: ['jest-serializer-vue'],
+  setupFiles: [
+    '<rootDir>/test/setup/env.js',
+    '<rootDir>/test/setup/unhandledPromiseRejectionHandler.js',
+    '<rootDir>/test/setup/mockRandom.js',
+    '<rootDir>/test/setup/mockScroll.js',
+    '<rootDir>/test/setup/mockUserAgent.js',
+    '<rootDir>/test/setup/mockLocation.js',
+    'jest-canvas-mock',
+  ],
+  setupFilesAfterEnv: [
+    '<rootDir>/test/setup/afterEnv.js',
+  ],
+}

jest.config.js

@@ -14,6 +14,8 @@
   "exclude": [
     "dist",
     ".quasar",
-    "node_modules"
+    "node_modules",
+    "storybook-static",
+    "docs/_book"
   ]
 }