@thepalaceproject/circulation-admin 0.0.0-post.1

package/tests/jest/utils/NoCacheDataFetcher.test.ts

@@ -0,0 +1,75 @@
+// Need to manually mock DataFetcher before importing NoCacheDataFetcher
+const mockSuperFetch = jest.fn();
+
+// Mock the DataFetcher module
+jest.mock("@thepalaceproject/web-opds-client/lib/DataFetcher", () => ({
+  __esModule: true,
+  default: class MockDataFetcher {
+    fetch(url: string, options?: any) {
+      return mockSuperFetch(url, options);
+    }
+  },
+}));
+
+// Import after mocking
+import NoCacheDataFetcher from "../../../src/utils/NoCacheDataFetcher";
+
+const TEST_URL = "http://example.com";
+
+describe("NoCacheDataFetcher", () => {
+  let fetcher: NoCacheDataFetcher;
+
+  beforeEach(() => {
+    // Clear mocks between tests
+    mockSuperFetch.mockClear();
+
+    // Create instance of class under test
+    fetcher = new NoCacheDataFetcher();
+  });
+
+  it("adds no-cache headers to fetch requests", async () => {
+    await fetcher.fetch(TEST_URL);
+
+    expect(mockSuperFetch).toHaveBeenCalledWith(
+      TEST_URL,
+      expect.objectContaining({
+        headers: { "Cache-Control": "no-cache" },
+        cache: "no-cache",
+      })
+    );
+  });
+
+  it("preserves existing headers when adding no-cache headers", async () => {
+    const options = {
+      headers: { "Content-Type": "application/json" },
+    };
+
+    await fetcher.fetch(TEST_URL, options);
+
+    expect(mockSuperFetch).toHaveBeenCalledWith(
+      TEST_URL,
+      expect.objectContaining({
+        headers: {
+          "Cache-Control": "no-cache",
+          "Content-Type": "application/json",
+        },
+        cache: "no-cache",
+      })
+    );
+  });
+
+  it("passes through other options to super.fetch", async () => {
+    await fetcher.fetch(TEST_URL, {
+      credentials: "include",
+    });
+
+    expect(mockSuperFetch).toHaveBeenCalledWith(
+      TEST_URL,
+      expect.objectContaining({
+        headers: { "Cache-Control": "no-cache" },
+        cache: "no-cache",
+        credentials: "include",
+      })
+    );
+  });
+});

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "version": "1.8.2",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "outDir": "lib",
+    "lib": ["es2023.array","es2019", "dom"],
+    "rootDir": ".",
+    // Mocha and jest are both used in this project. Certain globals are declared by both,
+    // such as describe, it, and test. Setting skipLibCheck to true prevents typescript from
+    // erroring when it sees duplicate variable declarations with different types.
+    "skipLibCheck": true,
+    "types": ["mocha", "node", "jest", "@testing-library/jest-dom"],
+    "jsx": "react"
+  },
+  "exclude": [
+    "lib",
+    "node_modules",
+    "tests/browser"
+  ],
+  "typedocOptions": {
+    "entryPointStrategy": "expand",
+    "out": "docs"
+  }
+}

package/tslint.json

@@ -0,0 +1,56 @@
+{
+    "extends": ["tslint-react-a11y"],
+    "rules": {
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "no-duplicate-variable": true,
+        "no-eval": true,
+        "no-internal-module": true,
+        "no-trailing-whitespace": true,
+        "no-var-keyword": true,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "double",
+            "avoid-escape"
+        ],
+        "semicolon": true,
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "variable-name": [
+            true,
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ]
+    }
+}

package/webpack.common.js

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const webpack = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+module.exports = {
+  entry: {
+    app: ["./src/stylesheets/app.scss", "./src/index.tsx"],
+  },
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    filename: "circulation-admin.js",
+    library: "CirculationAdmin",
+    libraryTarget: "umd",
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    // jsdom is needed for server rendering, but causes errors
+    // in the browser even if it is never used, so we ignore it:
+    new webpack.IgnorePlugin({ resourceRegExp: /jsdom$/ }),
+    // Extract separate css file.
+    new MiniCssExtractPlugin({ filename: "circulation-admin.css" }),
+    // Set a local global variable in the app that will be used only
+    // for testing AXE in development mode.
+    new webpack.DefinePlugin({
+      "process.env.TEST_AXE": JSON.stringify(process.env.TEST_AXE),
+    }),
+    // Publish the logo to dist.
+    new CopyPlugin({
+      patterns: ["src/images/PalaceCollectionManagerLogo.svg"],
+    }),
+  ],
+  optimization: {
+    minimizer: [new TerserPlugin({ terserOptions: { compress: false } })],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: [/node_modules/],
+        use: ["ts-loader"],
+      },
+      {
+        test: /\.(ttf|woff|eot|woff2)(\?[\s\S]+)?$/,
+        type: "asset/resource",
+      },
+      {
+        test: /\.(svg|png|gif|jpg)(\?[\s\S]+)?$/,
+        use: ["url-loader?limit=100000"],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      react: path.resolve("./node_modules/react"),
+    },
+    extensions: [".ts", ".tsx", ".js", ".scss"],
+    fallback: {
+      stream: require.resolve("stream-browserify"),
+      timers: require.resolve("timers-browserify"),
+      url: require.resolve("url"),
+    },
+  },
+};

package/webpack.dev-server.config.js

@@ -0,0 +1,215 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+/**
+ * This webpack config establishes a proxy server to enable a local build of circulation-admin to
+ * connect to a remote Circulation Manager back-end. Requests for webpack assets are served from
+ * memory; other requests are proxied to the specified Circulation Manager.
+ *
+ * Usage:
+ *   npm run dev-server -- --env=backend=https://gorgon.tpp-qa.lyrasistechnology.org
+ * or
+ *   npx webpack serve --config webpack.dev-server.config --env=backend=https://gorgon.tpp-qa.lyrasistechnology.org
+ *
+ * This makes the circulation-admin webapp available at http://localhost:8080/admin.
+ */
+
+const {
+  createProxyMiddleware,
+  responseInterceptor,
+} = require("http-proxy-middleware");
+
+const { merge } = require("webpack-merge");
+const { URL } = require("url");
+const dev = require("./webpack.dev.config.js");
+
+/**
+ * The public path to local webpack assets. This is chosen to have low chance of collision with any
+ * path on the back-end (e.g., a library ID, or "/admin"). This should start and end with slashes.
+ */
+const devAssetsPublicPath = "/webpack-dev-assets/";
+
+/**
+ * Build the webpack configuration.
+ * See https://webpack.js.org/configuration/configuration-types/#exporting-a-function
+ *
+ * @param {object} env The environment.
+ * @returns The webpack configuration.
+ */
+module.exports = (env) => {
+  const { backend } = env;
+
+  if (!backend) {
+    console.error("Please specify the URL of a Circulation Manager back-end.");
+
+    console.error(
+      "Example: npm run dev-server -- --env=backend=https://gorgon.tpp-qa.lyrasistechnology.org"
+    );
+
+    throw "No back-end URL was specified.";
+  }
+
+  console.info(`Using Circulation Manager back-end: ${backend}`);
+
+  const backendUrl = new URL(backend);
+
+  /**
+   * Rewrite a location header (as received in a 3xx response). This changes back-end URLs to
+   * point to the local server instead. The CM may redirect to a URL that contains a "redirect"
+   * parameter that contains another URL. The "redirect" parameter is also rewritten.
+   *
+   * @param res The response.
+   * @param req The request.
+   */
+  const rewriteLocationHeader = (res, req) => {
+    const location = res.getHeader("location");
+
+    if (!location) {
+      return;
+    }
+
+    const locationUrl = new URL(location, backendUrl);
+
+    if (locationUrl.host !== backendUrl.host) {
+      return;
+    }
+
+    const requestHost = req.headers.host;
+
+    if (!requestHost) {
+      return;
+    }
+
+    locationUrl.protocol = "http";
+    locationUrl.host = requestHost;
+
+    const redirectParam = locationUrl.searchParams.get("redirect");
+
+    if (redirectParam) {
+      const redirectUrl = new URL(redirectParam);
+
+      if (redirectUrl.host == backendUrl.host) {
+        redirectUrl.protocol = "http";
+        redirectUrl.host = requestHost;
+
+        locationUrl.searchParams.set("redirect", redirectUrl.href);
+      }
+    }
+
+    res.setHeader("location", locationUrl.href);
+  };
+
+  /**
+   * Rewrites an OpenSearch description response. This changes back-end URLs in the description to
+   * point to the local server instead. This is a simple find-and-replace.
+   *
+   * @param responseBuffer A buffer containing the response body.
+   * @param req The request.
+   * @returns
+   */
+  const rewriteOpenSearch = (responseBuffer, req) => {
+    const requestHost = req.headers.host;
+
+    if (!requestHost) {
+      return responseBuffer;
+    }
+
+    const osd = responseBuffer.toString("utf8");
+
+    return osd.replace(
+      new RegExp(backendUrl.origin, "g"),
+      `http://${requestHost}`
+    );
+  };
+
+  /**
+   * Rewrites an OPDS response. This changes back-end URLs in the feed to point to the local server
+   * instead. This is a simple find-and-replace.
+   *
+   * @param responseBuffer A buffer containing the response body.
+   * @param req The request.
+   * @returns
+   */
+  const rewriteOPDS = (responseBuffer, req) => {
+    const requestHost = req.headers.host;
+
+    if (!requestHost) {
+      return responseBuffer;
+    }
+
+    const feed = responseBuffer.toString("utf8");
+
+    return feed.replace(
+      new RegExp(backendUrl.origin, "g"),
+      `http://${requestHost}`
+    );
+  };
+
+  /**
+   * Rewrites an HTML response. This changes jsdelivr CDN URLs in the page to point to the webpack
+   * assets on the local server instead. This is a simple find-and-replace.
+   *
+   * @param responseBuffer A buffer containing the response body.
+   * @param req The request.
+   * @returns
+   */
+  const rewriteHTML = (responseBuffer, req) => {
+    const requestHost = req.headers.host;
+
+    if (!requestHost) {
+      return responseBuffer;
+    }
+
+    const page = responseBuffer.toString("utf8");
+    const packageName = process.env.npm_package_name;
+    const cdnUrlPattern = `"https://cdn.jsdelivr.net/npm/${packageName}(@.*?)?/dist/(.*?)"`;
+
+    return page.replace(
+      new RegExp(cdnUrlPattern, "g"),
+      `"http://${requestHost}${devAssetsPublicPath}$2"`
+    );
+  };
+
+  const proxyMiddleware = createProxyMiddleware({
+    changeOrigin: true,
+    onProxyRes: responseInterceptor(
+      async (responseBuffer, proxyRes, req, res) => {
+        rewriteLocationHeader(res, req);
+
+        const contentType = res.getHeader("content-type");
+
+        if (contentType.startsWith("application/atom+xml")) {
+          return rewriteOPDS(responseBuffer, req);
+        }
+
+        if (contentType.startsWith("text/html")) {
+          return rewriteHTML(responseBuffer, req);
+        }
+
+        if (contentType.startsWith("application/opensearchdescription+xml")) {
+          return rewriteOpenSearch(responseBuffer, req);
+        }
+
+        return responseBuffer;
+      }
+    ),
+    proxyTimeout: 120000,
+    secure: false,
+    selfHandleResponse: true,
+    target: backend,
+    timeout: 120000,
+  });
+
+  const config = merge(dev, {
+    devServer: {
+      setupMiddlewares: (middlewares, _devServer) => {
+        middlewares.push(proxyMiddleware);
+        return middlewares;
+      },
+    },
+    output: {
+      publicPath: devAssetsPublicPath,
+    },
+  });
+
+  return config;
+};

package/webpack.dev.config.js

@@ -0,0 +1,9 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+var config = merge(common, {
+  mode: "development",
+  devtool: "eval-source-map",
+});
+
+module.exports = config;

package/webpack.prod.config.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+var config = merge(common, {
+  mode: "production"
+});
+
+module.exports = config;