Dev server middleware vite (#1225)

Author: DanDroryAu

.changeset/dark-wolves-argue.md

@@ -0,0 +1,5 @@
+---
+'sku': minor
+---
+
+`vite start`: Enable `devServerMiddleware` for vite projects

docs/docs/vite-support.md

@@ -60,6 +60,31 @@ export default () => (
 );
 ```
 
+### Dev server middleware
+
+The `vite` dev server runs on a [`Connect`](https://github.com/senchalabs/connect) instance instead of [`Express`](https://expressjs.com/) so the middleware setup is slightly different. A middleware file still exports a single function however it now takes the [`ViteDevServer`](https://vite.dev/guide/api-javascript.html#vitedevserver) as the only parameter.
+To add middleware to the dev server you should follow the connect guide [here](https://github.com/senchalabs/connect#use-middleware).
+
+**Example of using `devServerMiddleware` with `vite`**
+
+```typescript
+// custom-middleware.ts
+import type { ViteDevServer } from 'vite';
+
+export default function (server: ViteDevServer) {
+  server.middlewares.use((req, res, next) => {
+    // your middleware logic
+    next();
+  });
+
+  // or use a path
+  server.middlewares.use('/api', (req, res, next) => {
+    // your middleware logic
+    next();
+  });
+}
+```
+
 ### Using vite types
 
 If [`vite/client` types](https://vite.dev/guide/features#client-types) are needed in your project, you can reference them via the `sku/vite/client` entrypoint:

fixtures/sku-with-https/dev-middleware.js renamed to fixtures/sku-with-https/dev-middleware.cjs

@@ -0,0 +1,8 @@
+export default (app) => {
+  app.middlewares.use('/test-middleware', (req, res, next) => {
+    if (req.method !== 'GET') {
+      next();
+    }
+    res.end('OK');
+  });
+};

fixtures/sku-with-https/dev-middleware.vite.js

@@ -1,6 +1,7 @@
 {
   "name": "@sku-fixtures/sku-with-https",
   "private": true,
+  "type": "module",
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

fixtures/sku-with-https/package.json

@@ -4,11 +4,13 @@ import {
 } from '@sku-private/test-utils';
 
 export default {
-  clientEntry: 'src/serverClient.js',
+  clientEntry: 'src/serverClient.jsx',
+  serverEntry: 'src/server.jsx',
+  renderEntry: 'src/render.jsx',
   port: 9843,
   serverPort: 9894,
   httpsDevServer: true,
-  devServerMiddleware: './dev-middleware.js',
+  devServerMiddleware: './dev-middleware.cjs',
   cspEnabled: true,
   cspExtraScriptSrcHosts: ['https://some-cdn.com'],
   dangerouslySetWebpackConfig: (config) => {

fixtures/sku-with-https/sku-server.config.mjs

@@ -6,7 +6,10 @@ import {
 export default {
   port: 9843,
   httpsDevServer: true,
-  devServerMiddleware: './dev-middleware.js',
+  clientEntry: './src/client.jsx',
+  renderEntry: './src/render.jsx',
+  serverEntry: './src/server.jsx',
+  devServerMiddleware: './dev-middleware.cjs',
   cspEnabled: true,
   cspExtraScriptSrcHosts: ['https://some-cdn.com'],
   dangerouslySetWebpackConfig: (config) => {

fixtures/sku-with-https/sku.config.mjs

@@ -0,0 +1,8 @@
+import baseConfig from './sku.config.mjs';
+
+export default {
+  ...baseConfig,
+  __UNSAFE_EXPERIMENTAL__bundler: 'vite',
+  httpsDevServer: false, // not yet supported
+  devServerMiddleware: './dev-middleware.vite.js',
+};

fixtures/sku-with-https/sku.config.vite.mjs

@@ -5,7 +5,7 @@
 .eslintcache
 .prettierrc
 coverage/
-dist/
+dist-ssr/
 eslint.config.mjs
 report/
 tsconfig.json

fixtures/sku-with-https/src/App.js renamed to fixtures/sku-with-https/src/App.jsx

@@ -5,7 +5,7 @@ translations.ts
 .eslintcache
 .prettierrc
 coverage/
-dist/
+dist-ssr/
 eslint.config.mjs
 pnpm-lock.yaml
 report/

fixtures/sku-with-https/src/client.js renamed to fixtures/sku-with-https/src/client.jsx

@@ -27,6 +27,7 @@ import { watchVocabCompile } from '@/services/vocab/runVocab.js';
 import { configureProject, validatePeerDeps } from '@/utils/configure.js';
 import type { StatsChoices } from '../../options/stats/stats.option.js';
 import type { SkuContext } from '@/context/createSkuContext.js';
+import { requireFromCwd } from '@/utils/cwd.js';
 
 const log = debug('sku:start-ssr');
 
@@ -58,6 +59,7 @@ export const webpackStartSsrHandler = async ({
 }) => {
   process.env.NODE_ENV = 'development';
   const { port, initialPath, paths, httpsDevServer, hosts } = skuContext;
+  const { type } = requireFromCwd('./package.json');
   await configureProject(skuContext);
   validatePeerDeps(skuContext);
   await watchVocabCompile(skuContext);
@@ -95,7 +97,7 @@ export const webpackStartSsrHandler = async ({
   const serverCompiler = webpack(serverWebpackConfig);
 
   const serverManager = createServerManager(
-    path.join(paths.target, 'server.js'),
+    path.join(paths.target, `server.${type === 'module' ? 'c' : ''}js`),
   );
 
   const proto = httpsDevServer ? 'https' : 'http';

fixtures/sku-with-https/src/render.js renamed to fixtures/sku-with-https/src/render.jsx

@@ -19,10 +19,24 @@ const clientEntry = require.resolve('../entries/vite-client.js');
 
 export const skuViteMiddlewarePlugin = (skuContext: SkuContext): Plugin => ({
   name: 'vite-plugin-sku-server-middleware',
-  configureServer(server) {
+  async configureServer(server) {
     if (metricsMeasurers.initialPageLoad.isInitialPageLoad) {
       metricsMeasurers.initialPageLoad.mark();
     }
+    if (skuContext.useDevServerMiddleware) {
+      log(
+        'Using dev server middleware at %s',
+        skuContext.paths.devServerMiddleware,
+      );
+      const devServerMiddleware = (
+        await import(skuContext.paths.devServerMiddleware)
+      ).default;
+      if (devServerMiddleware && typeof devServerMiddleware === 'function') {
+        devServerMiddleware(server);
+        log('Dev server middleware loaded');
+      }
+    }
+
     log('Configuring server middleware');
     server.middlewares.use(async (req, res, next) => {
       log('Handling request:', req.url);
@@ -68,7 +82,7 @@ export const skuViteMiddlewarePlugin = (skuContext: SkuContext): Plugin => ({
         language,
         route: getRouteWithLanguage(matchingRoute.route, language),
         routeName: matchingRoute.name || '',
-        site: site.name,
+        site: site?.name || '',
         clientEntry,
       });
 

fixtures/sku-with-https/src/server.js renamed to fixtures/sku-with-https/src/server.jsx

@@ -15,7 +15,7 @@ import { VocabWebpackPlugin } from '@vocab/webpack';
 
 import { bundleAnalyzerPlugin } from './plugins/bundleAnalyzer.js';
 import { JAVASCRIPT, resolvePackage } from './utils/index.js';
-import { cwd } from '@/utils/cwd.js';
+import { cwd, requireFromCwd } from '@/utils/cwd.js';
 import { getVocabConfig } from '@/services/vocab/config/vocab.js';
 import getStatsConfig from './statsConfig.js';
 import getSourceMapSetting from './sourceMaps.js';
@@ -81,6 +81,8 @@ const makeWebpackConfig = ({
   // non-deterministic snapshots in jest tests.
   const fileMask = isDevServer ? '[name]' : '[name]-[contenthash]';
 
+  const { type } = requireFromCwd('./package.json');
+
   return [
     {
       name: 'client',
@@ -253,7 +255,7 @@ const makeWebpackConfig = ({
       output: {
         path: paths.target,
         publicPath,
-        filename: 'server.js',
+        filename: `server.${type === 'module' ? 'c' : ''}js`,
         library: { name: 'server', type: 'var' },
       },
       cache: getCacheSettings({ isDevServer, paths }),

fixtures/sku-with-https/src/serverClient.js renamed to fixtures/sku-with-https/src/serverClient.jsx

@@ -0,0 +1 @@
+export const getServerEntry = () => {};

fixtures/translations/.gitignore

@@ -1,12 +1,9 @@
-// @ts-check
-/**
- * @param {string} url
- */
-export const getAppSnapshot = async (url, warningFilter = () => true) => {
-  /** @type {string[]} */
-  const warnings = [];
-  /** @type {string[]} */
-  const errors = [];
+export const getAppSnapshot = async (
+  url: string,
+  warningFilter = () => true,
+) => {
+  const warnings: string[] = [];
+  const errors: string[] = [];
 
   const appPage = await browser.newPage();
 
@@ -36,11 +33,15 @@ export const getAppSnapshot = async (url, warningFilter = () => true) => {
   });
 
   const response = await appPage.goto(url, { waitUntil: 'load' });
-  const sourceHtml = await response?.text();
-  const clientRenderContent = await appPage.content();
+  const sourceHtml = sanitizeHtml((await response?.text()) || '');
+  const clientRenderContent = sanitizeHtml(await appPage.content());
 
   expect(warnings).toEqual([]);
   expect(errors).toEqual([]);
 
   return { sourceHtml, clientRenderContent };
 };
+
+function sanitizeHtml(str: string) {
+  return str.replaceAll(process.cwd(), '{cwd}');
+}

fixtures/translations/.prettierignore

@@ -15,7 +15,7 @@ export const waitForUrls = async (...urls) => {
       headers: { accept: 'text/html, application/javascript' },
       timeout,
       // Log output of wait behaviour timing to allow
-      //  increased debugging when service fails to start
+      // increased debugging when service fails to start
       log: false,
       strictSSL: false,
     });