Modernize build, test, stories

[hatton]

• CRA start (about 50 seconds) to vite dev (230 ms)
• CRA Build (25 seconds) to vite (19 seconds)
• sort out svg ulrs vs react elements
• proxy api and s3 calls
• get modules split
• remove babel
• remove need for import {jsx}
• upgrade storybook, get running on vite
• react to 17
• node to 20
• jest (22 seconds) --> vitest (7 seconds)

---

This change is 

[andrew-polk]

The README wants a fair bit of updating.

I haven't finished reviewing yet but publishing what I have so far.

Reviewed 141 of 167 files at r1, all commit messages.
Reviewable status: 141 of 167 files reviewed, 14 unresolved discussions (waiting on @hatton)

---

doctor-storybook.log line 1 at r1 (raw file):

🩺 The doctor is checking the health of your Storybook..

I'm thinking we don't want this file in the repo?

---

migration-storybook.log line 1 at r1 (raw file):

🔎 checking possible migrations..

I'm thinking we don't want this file in the repo?

---

vite.config.ts line 21 at r1 (raw file):

                    target: "https://s3.amazonaws.com",
                    changeOrigin: true,
                    rewrite: (path) => {

Do we not want the secure prop here, too?

---

src/App.tsx line 1 at r1 (raw file):

// this engages a babel macro that does cool emotion stuff (like source maps). See https://emotion.sh/docs/babel-macros

I think we want to remove this babel comment everywhere, too.

---

src/components/Footer.tsx line 110 at r1 (raw file):

        >
            <img
                src="https://images.ctfassets.net/fo9twyrwpveg/7Htleo27dKYua8gio8UEUy/0797152a2d2f8e41db49ecbf1ccffdaa/PoweredByContentful_DarkBackground_MonochromeLogo.svg?react"

I don't think this instance wants the ?react treatment.

---

src/components/SearchDeeper.tsx line 7 at r1 (raw file):

import { Button, SvgIcon, useTheme } from "@material-ui/core";
import SearchingDeeper from "../assets/SearchingDeeper.svg?react";
import { commonUI } from "../theme";

Looks like an accidental addition.

---

src/components/TestEmbedding.tsx line 1 at r1 (raw file):

import { css } from "@emotion/react";

Should this file move to the Embedding folder?

---

src/components/appHosted/AppHostedLanguageGroup.tsx line 6 at r1 (raw file):

import React, { useContext, useState, useMemo, useEffect } from "react";
import { LanguageCard } from "../LanguageCard";
import logo from "../../assets/BloomLibrary Logo.svg?react";

In cases like this, where we use it as a src, I don't think we want ?react

---

src/components/BookDetail/GetTemplateButton.tsx line 6 at r1 (raw file):

import React from "react";
import { FormattedMessage } from "react-intl";
import TemplateIcon from "../../assets/Template.svg";

Looks like this one missed the ?react treatment.

---

src/components/BookDetail/ReadOfflineButton.tsx line 6 at r1 (raw file):

import React from "react";
import Button from "@material-ui/core/Button";
import BloomPubIcon from "../../assets/BloomPubWhite.svg?react";

In cases like this, where we use it as a src, I don't think we want ?react

---

src/components/Grid/GridPage.tsx line 12 at r1 (raw file):

import Button from "@material-ui/core/Button";
import { useIntl } from "react-intl";
import DownloadCsvIcon from "../../export/download-csv.svg?react";

In cases like this, where we use it as a src, I don't think we want ?react

---

src/connection/ApiConnection.ts line 12 at r1 (raw file):

    if (window.location.hostname === "localhost") {
        return local;
    }

Most of the time, when running locally, we want to test against the real api.
The dev only wants to change this when running against a locally-run api.

So, if I understand correctly, when running on localhost and we want prod api, we want /api.
If we're running on localhost and want local api, we want http://localhost:7071.
Else, we want https://api.bloomlibrary.org.

---

src/connection/LibraryQueryHooks.ts line 1374 at r1 (raw file):

                    })),
                };
            }

This looks like a change you must have been working on separately to try to search on more than one language.
We should probably move it out of this change to vite.

---

old-eslint.config.mjs line 1 at r1 (raw file):

export default [

Any reason to keep this file?n

[andrew-polk]

Reviewed 3 of 167 files at r1.
Reviewable status: 144 of 167 files reviewed, 16 unresolved discussions (waiting on @hatton)

---

eslint.config.mjs line 8 at r1 (raw file):

    { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
    // { languageOptions: { globals: globals.browser } },
    ...tseslint.configs.recommended,

I think maybe we want these:

• plugin:react/recommended
• plugin:react-hooks/recommended

---

eslint.config.mjs line 20 at r1 (raw file):

            ],

            "@typescript-eslint/no-explicit-any": "off",

I'm surprised to see we aren't at least warning on any

[andrew-polk]

Reviewed 104 of 116 files at r2, 10 of 12 files at r3, 2 of 2 files at r4, all commit messages.
Reviewable status: 151 of 171 files reviewed, 3 unresolved discussions (waiting on @hatton)

[andrew-polk]

Reviewed 1 of 1 files at r5.
Reviewable status: 151 of 171 files reviewed, 3 unresolved discussions (waiting on @hatton)

[andrew-polk]

Reviewed 2 of 116 files at r2, 3 of 4 files at r6, all commit messages.
Reviewable status: 154 of 172 files reviewed, 3 unresolved discussions (waiting on @hatton)

[andrew-polk]

Readme looks good.
I've reviewed everything except the storybook files.

Reviewed 1 of 1 files at r7.
Reviewable status: 155 of 173 files reviewed, 3 unresolved discussions (waiting on @hatton)

[andrew-polk]

Reviewed 1 of 116 files at r2.
Reviewable status: 156 of 173 files reviewed, 4 unresolved discussions (waiting on @hatton)

---

src/ImgWithCredits.tsx line 37 at r7 (raw file):

                the Img as a direct child. Apparently the direct child of a Tooltip must be
                something that "can hold a ref". */}
                <img {...props} />

I can't tell if this matters, but I'll ask the question...
Did we lose something by moving away from react-image here?

[hatton]

Reviewed 3 of 116 files at r2.
Reviewable status: 156 of 173 files reviewed, 4 unresolved discussions

[andrew-polk]

Ok, I've reviewed everything.

Looks like there are 4 comments remaining.

Reviewed 16 of 167 files at r1, 1 of 4 files at r6, all commit messages.
Reviewable status: all files reviewed, 4 unresolved discussions (waiting on @hatton)

[andrew-polk]

Reviewable status: all files reviewed, 4 unresolved discussions (waiting on @hatton)

---

vite.config.ts line 21 at r1 (raw file):

Previously, andrew-polk wrote…

Do we not want the secure prop here, too?

Commenting again to try to make this comment display for JH...

---

src/ImgWithCredits.tsx line 37 at r7 (raw file):

Previously, andrew-polk wrote…

I can't tell if this matters, but I'll ask the question...
Did we lose something by moving away from react-image here?

Commenting again to try to make this comment display for JH...

---

src/connection/ApiConnection.ts line 12 at r1 (raw file):

Previously, andrew-polk wrote…

Most of the time, when running locally, we want to test against the real api.
The dev only wants to change this when running against a locally-run api.

So, if I understand correctly, when running on localhost and we want prod api, we want /api.
If we're running on localhost and want local api, we want http://localhost:7071.
Else, we want https://api.bloomlibrary.org.

Commenting again to try to make this comment display for JH...

---

src/connection/LibraryQueryHooks.ts line 1374 at r1 (raw file):

Previously, andrew-polk wrote…

This looks like a change you must have been working on separately to try to search on more than one language.
We should probably move it out of this change to vite.

Commenting again to try to make this comment display for JH...

[hatton]

Reviewable status: all files reviewed, 4 unresolved discussions (waiting on @andrew-polk)

---

vite.config.ts line 21 at r1 (raw file):

Previously, andrew-polk wrote…

Commenting again to try to make this comment display for JH...

I don't think so, S3 is already using https, so this would do anything?

---

src/ImgWithCredits.tsx line 37 at r7 (raw file):

React Image is an <img> tag replacement and hook for React.js, supporting fallback to alternate sources when loading an image fails.

We're not falling back or using alternate sources.

If the image cannot be loaded, <img> will not be rendered, preventing a "broken" image from showing.

I could imagine us using that? Hard to prove that we aren't.

OK so it's cheaper to work around the upgrade problem then to prove we don't need it, so I've done that.

---

src/connection/ApiConnection.ts line 12 at r1 (raw file):

Previously, andrew-polk wrote…

Commenting again to try to make this comment display for JH...

I think you're saying that the choice of api-provider is semi-independent of whether you're running the front end-local?

---

src/connection/LibraryQueryHooks.ts line 1374 at r1 (raw file):

Previously, andrew-polk wrote…

Commenting again to try to make this comment display for JH...

what the heck was that

[andrew-polk]

Reviewed 4 of 4 files at r8, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @hatton)

---

vite.config.ts line 21 at r1 (raw file):

Previously, hatton (John Hatton) wrote…

I don't think so, S3 is already using https, so this would do anything?

Sorry; I don't know anything about this setting. I just noticed that the api one just above has it and this doesn't. And I didn't know if there was a reason or if it was a mistake. But if it looks good to you, I'm good.

---

src/connection/ApiConnection.ts line 12 at r1 (raw file):

Previously, hatton (John Hatton) wrote…

I think you're saying that the choice of api-provider is semi-independent of whether you're running the front end-local?

Correct.

[hatton]

Reviewable status: 172 of 173 files reviewed, 2 unresolved discussions (waiting on @andrew-polk)

---

vite.config.ts line 21 at r1 (raw file):

Previously, andrew-polk wrote…

Sorry; I don't know anything about this setting. I just noticed that the api one just above has it and this doesn't. And I didn't know if there was a reason or if it was a mistake. But if it looks good to you, I'm good.

would do anything --> wouldn't do anything

---

src/connection/ApiConnection.ts line 12 at r1 (raw file):

Previously, andrew-polk wrote…

Correct.

Duh, sorry about that.

[andrew-polk]

Reviewed 1 of 1 files at r9, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @hatton)

---

src/connection/ApiConnection.ts line 12 at r1 (raw file):

Previously, hatton (John Hatton) wrote…

Duh, sorry about that.

If I'm understanding correctly, we need all three for different scenarios.
So something like

    // Developer, if you want to test a local backend, temporarily uncomment this.
    //return "http://localhost:7071/v1";

    if (window.location.hostname === "localhost") {
        // When running blorg locally, we need to use a vite proxy to handle CORS issues. (See vite.config.ts)
        return "/api/v1";
    }
    
    return "https://api.bloomlibrary.org/v1";

[hatton]

Reviewable status: 172 of 173 files reviewed, 2 unresolved discussions (waiting on @andrew-polk)

---

src/connection/ApiConnection.ts line 12 at r1 (raw file):

Previously, andrew-polk wrote…

If I'm understanding correctly, we need all three for different scenarios.
So something like

    // Developer, if you want to test a local backend, temporarily uncomment this.
    //return "http://localhost:7071/v1";

    if (window.location.hostname === "localhost") {
        // When running blorg locally, we need to use a vite proxy to handle CORS issues. (See vite.config.ts)
        return "/api/v1";
    }
    
    return "https://api.bloomlibrary.org/v1";

for some reason it's working without that, i.e. without going through the proxy. But at the moment I'm inclined to just go with your code (which I like) with an additional comment.

[andrew-polk]

Reviewed 1 of 1 files at r10, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @hatton)

[andrew-polk]

Approved. But I'm unsure if we're ready to publish.
We probably want to make sure testers have some capacity to run the site through some paces.

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @hatton)