Factor out redirect middleware and run in dev server (#513)

Previously, our redirect logic did not work when running in dev mode, since that code was only present in the production server. Now that logic is factored out into a Koa middleware, so that it can run in both places.

I also made a few other changes to make working on the server easier going forward.

In an upcoming PR, I'll be adding a middleware to deal with GitHub auth tokens, so now it will be easier to run that both in production and during local development.

Author: aomarks

.gitignore

@@ -3,19 +3,9 @@
 node_modules
 
 packages/*/lib/
-packages/*/index.js
-packages/*/index.js.map
-packages/*/index.d.ts
-packages/*/index.d.ts.map
-
-packages/lit-dev-server/redirects.js
-packages/lit-dev-server/redirects.js.map
-packages/lit-dev-server/redirects.d.ts
-packages/lit-dev-server/redirects.d.ts.map
 
 packages/lit-dev-content/_site
 packages/lit-dev-content/_dev
-packages/lit-dev-content/playground-plugin
 packages/lit-dev-content/rollupout
 packages/lit-dev-content/site/fonts
 packages/lit-dev-content/temp

Dockerfile

@@ -75,4 +75,4 @@ RUN npx lerna run build --scope lit-dev-content --stream
 #
 # [0] https://nodejs.org/api/cli.html#cli_max_old_space_size_size_in_megabytes
 # [1] https://github.com/nodejs/node/pull/25576
-CMD [ "node", "--max-old-space-size=768", "packages/lit-dev-server/index.js" ]
+CMD [ "node", "--max-old-space-size=768", "packages/lit-dev-server/lib/server.js" ]

packages/lit-dev-content/package.json

@@ -7,8 +7,7 @@
   "license": "BSD-3-Clause",
   "main": "_site/index.html",
   "scripts": {
-    "postinstall": "npm run fonts:manrope && npm run temp:fixup-invalid-mwc-import",
-    "temp:fixup-invalid-mwc-import": "sed -i=\"\" \"s#'lit-html/directive';#'lit-html/directive.js';#\" node_modules/@material/mwc-snackbar/accessible-snackbar-label-directive.js",
+    "postinstall": "npm run fonts:manrope",
     "build": "rm -rf _site && npm run build:ts && npm run build:rollup && npm run build:samples && npm run build:site",
     "build:ts": "../../node_modules/.bin/tsc",
     "build:ts:watch": "../../node_modules/.bin/tsc --watch",
@@ -35,6 +34,7 @@
     "fast-glob": "^3.2.5",
     "html-minifier": "^4.0.0",
     "lit-dev-api": "^0.0.0",
+    "lit-dev-server": "^0.0.0",
     "lit-dev-tools": "^0.0.0",
     "lit-dev-tools-esm": "^0.0.0",
     "luxon": "^2.0.2",

packages/lit-dev-content/web-dev-server.config.js renamed to packages/lit-dev-content/web-dev-server.config.mjs

@@ -1,4 +1,13 @@
-module.exports = {
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {redirectMiddleware} from 'lit-dev-server/lib/middleware/redirect-middleware.js';
+
+export default {
+  middleware: [redirectMiddleware()],
   plugins: [
     {
       name: 'dont-resolve-sample-modules',

packages/lit-dev-server/package.json

@@ -6,11 +6,11 @@
   "author": "Google LLC",
   "license": "BSD-3-Clause",
   "type": "module",
-  "main": "index.js",
+  "main": "lib/server.js",
   "scripts": {
     "build": "npm run build:ts",
     "build:ts": "../../node_modules/.bin/tsc",
-    "start": "MODE=main PORT=8080 node index.js",
+    "start": "MODE=main PORT=8080 node lib/server.js",
     "format": "../../node_modules/.bin/prettier \"**/*.{ts,js,json,html,css,md}\" --write"
   },
   "dependencies": {

packages/lit-dev-server/src/middleware/redirect-middleware.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {pageRedirects} from '../redirects.js';
+import type Koa from 'koa';
+
+/**
+ * Creates a Koa middleware that performs lit.dev redirection logic.
+ */
+export const redirectMiddleware = (): Koa.Middleware => async (ctx, next) => {
+  // If there would be multiple redirects, resolve them all here so that we
+  // serve just one HTTP redirect instead of a chain.
+  let path = ctx.path;
+  if (path.match(/\/[^\/\.]+$/)) {
+    // Canonicalize paths to have a trailing slash, except for files with
+    // extensions.
+    path += '/';
+  }
+  if (path.endsWith('//')) {
+    // Koa static doesn't care if there are any number of trailing slashes.
+    // Normalize this too.
+    path = path.replace(/\/+$/, '/');
+  }
+  path = pageRedirects.get(path) ?? path;
+  if (path !== ctx.path) {
+    ctx.status = 301;
+    ctx.redirect(path + (ctx.querystring ? '?' + ctx.querystring : ''));
+  } else {
+    await next();
+  }
+};

packages/lit-dev-server/src/index.ts renamed to packages/lit-dev-server/src/server.ts

@@ -10,7 +10,7 @@ import koaConditionalGet from 'koa-conditional-get';
 import koaEtag from 'koa-etag';
 import {fileURLToPath} from 'url';
 import * as path from 'path';
-import {pageRedirects} from './redirects.js';
+import {redirectMiddleware} from './middleware/redirect-middleware.js';
 
 const mode = process.env.MODE;
 if (mode !== 'main' && mode !== 'playground') {
@@ -28,6 +28,7 @@ const __dirname = path.dirname(__filename);
 const contentPackage = path.resolve(
   __dirname,
   '..',
+  '..',
   'lit-dev-content',
   '_site'
 );
@@ -48,29 +49,7 @@ if (mode === 'playground') {
   });
 }
 
-app.use(async (ctx, next) => {
-  // If there would be multiple redirects, resolve them all here so that we
-  // serve just one HTTP redirect instead of a chain.
-  let path = ctx.path;
-  if (path.match(/\/[^\/\.]+$/)) {
-    // Canonicalize paths to have a trailing slash, except for files with
-    // extensions.
-    path += '/';
-  }
-  if (path.endsWith('//')) {
-    // Koa static doesn't care if there are any number of trailing slashes.
-    // Normalize this too.
-    path = path.replace(/\/+$/, '/');
-  }
-  path = pageRedirects.get(path) ?? path;
-  if (path !== ctx.path) {
-    ctx.status = 301;
-    ctx.redirect(path + (ctx.querystring ? '?' + ctx.querystring : ''));
-  } else {
-    await next();
-  }
-});
-
+app.use(redirectMiddleware());
 app.use(koaConditionalGet()); // Needed for etag
 app.use(koaEtag());
 app.use(

packages/lit-dev-server/tsconfig.json

@@ -1,13 +1,13 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "tsBuildInfoFile": "./tsconfig.tsbuildinfo",
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
     "target": "es2020",
     "module": "esnext",
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
-    "outDir": "./",
+    "outDir": "./lib",
     "rootDir": "./src",
     "composite": true,
     "strict": true,

packages/lit-dev-tools-esm/src/check-redirects.ts

@@ -8,7 +8,7 @@ import * as pathLib from 'path';
 import * as fs from 'fs/promises';
 import ansi from 'ansi-escape-sequences';
 import fetch from 'node-fetch';
-import {pageRedirects} from 'lit-dev-server/redirects.js';
+import {pageRedirects} from 'lit-dev-server/lib/redirects.js';
 import {fileURLToPath} from 'url';
 
 const __filename = fileURLToPath(import.meta.url);