Vue 3.5 and other dependencies

.github/workflows/deploy.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '18.17.1'
+          node-version: '20'
           cache: npm
 
       - name: Install dependencies

cypress.config.js

@@ -12,27 +12,29 @@ const config = defineConfig({
   reporterOptions: {
     configFile: "reporter-config.json"
   },
+  env: {
+    projectId: process.env.CYPRESS_PROJECT_ID,
+  },
+  expose: {
+    visualRegressionType: 'regression',
+    visualRegressionBaseDirectory: 'cypress/screenshots/MultiFlatmapVuer.cy.js/base',
+    visualRegressionDiffDirectory: 'cypress/screenshots/diff',
+    visualRegressionGenerateDiff: 'always',
+    visualRegressionFailSilently: true,
+    HUMAN_FEMALE_UUID: process.env.HUMAN_FEMALE_UUID ? process.env.HUMAN_FEMALE_UUID : '',
+    HUMAN_MALE_UUID: process.env.HUMAN_MALE_UUID ? process.env.HUMAN_MALE_UUID : '',
+    RAT_UUID: process.env.RAT_UUID ? process.env.RAT_UUID : '',
+    MOUSE_UUID: process.env.MOUSE_UUID ? process.env.MOUSE_UUID : '',
+    PIG_UUID: process.env.PIG_UUID ? process.env.PIG_UUID : '',
+    CAT_UUID: process.env.CAT_UUID ? process.env.CAT_UUID : '',
+    ERROR_TOLERANCE: process.env.ERROR_TOLERANCE ? process.env.ERROR_TOLERANCE : 0.0001
+  },
   component: {
     specPattern: "cypress/component/*.cy.js",
     devServer: {
       framework: "vue",
       bundler: "vite",
     },
-    env: {
-      projectId: process.env.CYPRESS_PROJECT_ID,
-      visualRegressionType: 'regression',
-      visualRegressionBaseDirectory: 'cypress/screenshots/MultiFlatmapVuer.cy.js/base',
-      visualRegressionDiffDirectory: 'cypress/screenshots/diff',
-      visualRegressionGenerateDiff: 'always',
-      visualRegressionFailSilently: true,
-      HUMAN_FEMALE_UUID: process.env.HUMAN_FEMALE_UUID ? process.env.HUMAN_FEMALE_UUID : '',
-      HUMAN_MALE_UUID: process.env.HUMAN_MALE_UUID ? process.env.HUMAN_MALE_UUID : '',
-      RAT_UUID: process.env.RAT_UUID ? process.env.RAT_UUID : '',
-      MOUSE_UUID: process.env.MOUSE_UUID ? process.env.MOUSE_UUID : '',
-      PIG_UUID: process.env.PIG_UUID ? process.env.PIG_UUID : '',
-      CAT_UUID: process.env.CAT_UUID ? process.env.CAT_UUID : '',
-      ERROR_TOLERANCE: process.env.ERROR_TOLERANCE ? process.env.ERROR_TOLERANCE : 0.0001
-    },
     screenshotsFolder: './cypress/screenshots',
     setupNodeEvents(on, config) {
       configureVisualRegression(on)
@@ -69,4 +71,4 @@ const config = defineConfig({
   },
 });
 
-export default config;
+export default config;

cypress/component/MultiFlatmapVuer.cy.js

@@ -14,7 +14,7 @@ const availableSpecies = [
   { name: "Cat" }
 ]
 const organTypes = ['color', 'grayscale']
-const ERROR_TOLERANCE = parseFloat(Cypress.env('ERROR_TOLERANCE'))
+const ERROR_TOLERANCE = parseFloat(Cypress.expose('ERROR_TOLERANCE'))
 
 describe('MultiFlatmapVuer', () => {
 

cypress/component/VisualTest.cy.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-alert, no-console */
-const ERROR_TOLERANCE = parseFloat(Cypress.env('ERROR_TOLERANCE'));
+const ERROR_TOLERANCE = parseFloat(Cypress.expose('ERROR_TOLERANCE'));
 // Ref: flatmap-viewer/src/layers/styling.ts
 const STROKE_INTERPOLATION = [
   'interpolate',
@@ -56,7 +56,7 @@ function is_high_resolution_screen() {
 describe('MultiFlatmapVuer Screenshot Comparison', () => {
 
   beforeEach(() => {
-    Cypress.env('visualRegressionBaseDirectory', 'cypress/screenshots/VisualTest.cy.js/base');
+    Cypress.expose('visualRegressionBaseDirectory', 'cypress/screenshots/VisualTest.cy.js/base');
     cy.viewport(500, 500);
     cy.fixture('MultiFlatmapPropsDevel.json').then((props) => {
       const modifiedProps = {

cypress/support/commands.js

@@ -28,12 +28,12 @@ import 'cypress-wait-until';
 import CypressComponentWrapper from '../component/CypressComponentWrapper.vue'
 import { createPinia, setActivePinia } from 'pinia';
 const UUIDS = {
-    'Human Female': Cypress.env('HUMAN_FEMALE_UUID'),
-    'Human Male': Cypress.env('HUMAN_MALE_UUID'),
-    'Rat': Cypress.env('RAT_UUID'),
-    'Mouse': Cypress.env('MOUSE_UUID'),
-    'Pig': Cypress.env('PIG_UUID'),
-    'Cat': Cypress.env('CAT_UUID')
+    'Human Female': Cypress.expose('HUMAN_FEMALE_UUID'),
+    'Human Male': Cypress.expose('HUMAN_MALE_UUID'),
+    'Rat': Cypress.expose('RAT_UUID'),
+    'Mouse': Cypress.expose('MOUSE_UUID'),
+    'Pig': Cypress.expose('PIG_UUID'),
+    'Cat': Cypress.expose('CAT_UUID')
 }
 
 Cypress.on('uncaught:exception', (err) => {
@@ -94,4 +94,4 @@ Cypress.Commands.add('loadMultiFlatmap', (entry, species = undefined) => {
                 })
             })
     })
-})
+})

eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import vue from "eslint-plugin-vue";
+import globals from "globals";
+
+export default [
+  {
+    ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
+  },
+  js.configs.recommended,
+  ...vue.configs["flat/essential"],
+  {
+    files: ["**/*.{js,vue}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    rules: {},
+  },
+];