Merge pull request #8743 from weseek/support/upgrade-vite-and-vitest

support: Upgrade vite and vitest

.devcontainer/devcontainer.json

@@ -25,7 +25,8 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "shinnn.stylelint",
-    "stylelint.vscode-stylelint"
+    "stylelint.vscode-stylelint",
+    "vitest.explorer"
   ],
 
   // Uncomment the next line if you want start specific services in your Docker Compose config.

.vscode/launch.json

@@ -18,17 +18,6 @@
       },
       {
         "type": "node",
-        "request": "launch",
-        "name": "Debug: Current File with Vitest",
-        "autoAttachChildProcesses": true,
-        "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
-        "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
-        "args": ["run", "${relativeFile}"],
-        "smartStep": true,
-        "console": "integratedTerminal"
-      },
-      {
-        "type": "pwa-node",
         "request": "attach",
         "name": "Debug: Attach Debugger to Server",
         "port": 9229,
@@ -38,7 +27,7 @@
         }
       },
       {
-        "type": "pwa-node",
+        "type": "node",
         "request": "launch",
         "name": "Debug: Server",
         "cwd": "${workspaceFolder}/apps/app",
@@ -57,7 +46,7 @@
         }
       },
       {
-        "type": "pwa-chrome",
+        "type": "chrome",
         "request": "launch",
         "name": "Debug: Chrome",
         "sourceMaps": true,

apps/app/src/components/Admin/AuditLog/ActivityTable.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React, { useState, useCallback } from 'react';
 
+import { isPopulated } from '@growi/core';
 import { pagePathUtils } from '@growi/core/dist/utils';
 import { UserPicture } from '@growi/ui/dist/components';
 import { format } from 'date-fns/format';
@@ -51,7 +52,7 @@ export const ActivityTable : FC<Props> = (props: Props) => {
                       <UserPicture user={activity.user} />
                       <a
                         className="ms-2"
-                        href={pagePathUtils.userHomepagePath(activity.user)}
+                        href={isPopulated(activity.user) ? pagePathUtils.userHomepagePath(activity.user) : undefined}
                       >
                         {activity.snapshot?.username}
                       </a>

apps/app/src/features/growi-plugin/server/services/growi-plugin/growi-plugin.ts

@@ -7,7 +7,7 @@ import type { GrowiPluginPackageData } from '@growi/pluginkit';
 import { importPackageJson, validateGrowiDirective } from '@growi/pluginkit/dist/v4/server/index.cjs';
 // eslint-disable-next-line no-restricted-imports
 import axios from 'axios';
-import mongoose from 'mongoose';
+import type mongoose from 'mongoose';
 import streamToPromise from 'stream-to-promise';
 import unzipStream from 'unzip-stream';
 
@@ -28,13 +28,21 @@ const logger = loggerFactory('growi:plugins:plugin-utils');
 export type GrowiPluginResourceEntries = [installedPath: string, href: string][];
 
 function retrievePluginManifest(growiPlugin: IGrowiPlugin): ViteManifest | undefined {
-  const manifestPath = path.join(PLUGIN_STORING_PATH, growiPlugin.installedPath, 'dist/manifest.json');
+  // ref: https://vitejs.dev/guide/migration.html#manifest-files-are-now-generated-in-vite-directory-by-default
+  const manifestPathByVite4 = path.join(PLUGIN_STORING_PATH, growiPlugin.installedPath, 'dist/manifest.json');
+  const manifestPath = path.join(PLUGIN_STORING_PATH, growiPlugin.installedPath, 'dist/.vite/manifest.json');
 
-  if (!fs.existsSync(manifestPath)) {
+  const isManifestByVite4Exists = fs.existsSync(manifestPathByVite4);
+  const isManifestExists = fs.existsSync(manifestPath);
+
+  if (!isManifestByVite4Exists && !isManifestExists) {
     return;
   }
 
-  const manifestStr: string = readFileSync(manifestPath, 'utf-8');
+  const manifestStr: string = readFileSync(
+    isManifestExists ? manifestPath : manifestPathByVite4,
+    'utf-8',
+  );
   return JSON.parse(manifestStr);
 }
 

apps/app/src/server/.node-dev.json

@@ -5,6 +5,6 @@
     "public/static",
 
     "// ignore watching preset theme updates",
-    "packages/preset-themes/dist/themes/manifest.json"
+    "packages/preset-themes/dist/themes/.vite/manifest.json"
   ]
 }

apps/app/src/server/crowi/express-init.js

@@ -1,4 +1,4 @@
-import { manifestPath as presetThemesManifestPath } from '@growi/preset-themes';
+import { themesRootPath as presetThemesRootPath } from '@growi/preset-themes';
 import csrf from 'csurf';
 import qs from 'qs';
 
@@ -12,7 +12,6 @@ const logger = loggerFactory('growi:crowi:express-init');
 
 module.exports = function(crowi, app) {
   const debug = require('debug')('growi:crowi:express-init');
-  const path = require('path');
   const express = require('express');
   const compression = require('compression');
   const helmet = require('helmet');
@@ -86,7 +85,7 @@ module.exports = function(crowi, app) {
   const staticOption = (crowi.node_env === 'production') ? { maxAge: '30d' } : {};
   app.use(express.static(crowi.publicDir, staticOption));
   app.use('/static/preset-themes', express.static(
-    resolveFromRoot(`../../node_modules/@growi/preset-themes/${path.dirname(presetThemesManifestPath)}`),
+    resolveFromRoot(`../../node_modules/@growi/preset-themes/${presetThemesRootPath}`),
   ));
   app.use(PLUGIN_EXPRESS_STATIC_DIR, express.static(PLUGIN_STORING_PATH));
 

apps/app/src/server/service/config-manager.spec.ts

@@ -17,7 +17,7 @@ describe('ConfigManager test', () => {
 
   describe('updateConfigsInTheSameNamespace()', () => {
 
-    test.concurrent('invoke publishUpdateMessage()', async() => {
+    test('invoke publishUpdateMessage()', async() => {
       // setup
       ConfigModel.bulkWrite = vi.fn();
       configManager.loadConfigs = vi.fn();
@@ -33,7 +33,7 @@ describe('ConfigManager test', () => {
       expect(configManager.publishUpdateMessage).toHaveBeenCalledTimes(1);
     });
 
-    test.concurrent('does not invoke publishUpdateMessage()', async() => {
+    test('does not invoke publishUpdateMessage()', async() => {
       // setup
       ConfigModel.bulkWrite = vi.fn();
       configManager.loadConfigs = vi.fn();

apps/app/src/server/service/customize.ts

@@ -1,7 +1,9 @@
-import { ColorScheme } from '@growi/core';
+import path from 'path';
+
+import type { ColorScheme } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { getForcedColorScheme } from '@growi/core/dist/utils';
-import { DefaultThemeMetadata, PresetThemesMetadatas } from '@growi/preset-themes';
+import { DefaultThemeMetadata, PresetThemesMetadatas, manifestPath } from '@growi/preset-themes';
 import uglifycss from 'uglifycss';
 
 import { growiPluginService } from '~/features/growi-plugin/server/services';
@@ -162,7 +164,7 @@ class CustomizeService implements S2sMessageHandlable {
     // retrieve preset theme
     else {
       // import preset-themes manifest
-      const presetThemesManifest = await import('@growi/preset-themes/dist/themes/manifest.json').then(imported => imported.default);
+      const presetThemesManifest = await import(path.join('@growi/preset-themes', manifestPath)).then(imported => imported.default);
 
       const themeMetadata = PresetThemesMetadatas.find(p => p.name === theme);
       this.forcedColorScheme = getForcedColorScheme(themeMetadata?.schemeType);

package.json

@@ -89,11 +89,11 @@
     "ts-node-dev": "^2.0.0",
     "tsconfig-paths": "^3.9.0",
     "typescript": "~5.0.0",
-    "vite": "^4.5.3",
-    "vite-plugin-dts": "^2.3.0",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.34.6",
-    "vitest-mock-extended": "^1.1.3"
+    "vite": "^5.2.9",
+    "vite-plugin-dts": "^3.8.3",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.5.0",
+    "vitest-mock-extended": "^1.3.1"
   },
   "engines": {
     "node": "^18 || ^20",

packages/pluginkit/vitest.config.ts

@@ -10,10 +10,12 @@ export default defineConfig({
     clearMocks: true,
     globals: true,
     coverage: {
-      lines: 100,
-      functions: 100,
-      branches: 100,
-      statements: 100,
+      thresholds: {
+        lines: 100,
+        functions: 100,
+        branches: 100,
+        statements: 100,
+      },
     },
   },
 });

packages/preset-themes/src/index.ts

@@ -1,3 +1,4 @@
 export * from './consts/preset-themes';
 
-export const manifestPath = 'dist/themes/manifest.json';
+export const themesRootPath = 'dist/themes';
+export const manifestPath = `${themesRootPath}/.vite/manifest.json`;

packages/ui/src/components/UserPicture.tsx

@@ -15,7 +15,7 @@ const DEFAULT_IMAGE = '/images/icons/user.svg';
 
 
 type UserPictureRootProps = {
-  user: Partial<IUser>,
+  user: IUser,
   className?: string,
   children?: ReactNode,
 }
@@ -28,11 +28,11 @@ const UserPictureRootWithLink = forwardRef<HTMLSpanElement, UserPictureRootProps
   const router = useRouter();
 
   const { user } = props;
-  const href = pagePathUtils.userHomepagePath(user);
 
   const clickHandler = useCallback(() => {
+    const href = pagePathUtils.userHomepagePath(user);
     router.push(href);
-  }, [href, router]);
+  }, [router, user]);
 
   // Using <span> tag here instead of <a> tag because UserPicture is used in SearchResultList which is essentially a anchor tag.
   // Nested anchor tags causes a warning.
@@ -64,7 +64,7 @@ const withTooltip = (UserPictureSpanElm: React.ForwardRefExoticComponent<UserPic
 /**
  * type guard to determine whether the specified object is IUser
  */
-const isUserObj = (obj: Partial<IUser> | Ref<IUser>): obj is Partial<IUser> => {
+const isUserObj = (obj: Partial<IUser> | Ref<IUser>): obj is IUser => {
   return typeof obj !== 'string' && 'username' in obj;
 };
 

vitest.workspace.ts

@@ -0,0 +1,4 @@
+export default [
+  'apps/*/vitest.config.ts',
+  'packages/*/vitest.config.ts',
+];