Switch build system to vite and update jest by daniel-heppner-ibigroup · Pull Request #32 · ibi-group/otp-ui

daniel-heppner-ibigroup · 2025-07-10T08:28:18Z

Replace webpack config with vite config in package.json and the storybook config. Directly translated the webpack config to vite config.
Removed things that didn't seem necessary anymore; mainly the ufuzzy override (it seems to work without), and the getAboslutePath() thing. Not sure why we even had that.
Replaced require() with import across the project since vite is esm only.
Removed some references to /lib/ in various imports around the code. In some cases it was drilling in to a package to extract a type/property that wasn't exported, so I had to add it to the exports from the package's index file. This mostly had to do with core utils.
Updated jest to the latest version. It shaves a few seconds off the run time. This required some minor config changes to make work, mainly the graphql loader. We had an 8 year old package to import graphql, but that was unneeded as a file loader works fine.
Snapshots updated. Jest formats the snapshots slightly differently now days, as it prints the objects using a normal javascript serialization instead of printing the prototypes for each object. ("Array", "Object", etc) This can be reverted with a config change but I thought it was fine. Looks like the styled component classnames changed for some reason. Not sure why.
Reorganized the order of operations in the github CI a bit. This is mainly so that we don't have to wait for playwright to install before tests that don't need it run, so it can fail faster.
Removed typecheck from the prepublish command. We were already running this on its own in CI so it was really unnecessary.
Fixes a weird issue (bug?) in the new storybook test runner where the test serializer has to export its functions individually rather than as part of a default export. I will have to report this to them because their example shows the old method. This fixed the snapshot tests.

This reverts commit eb40c0c.

daniel-heppner-ibigroup · 2025-07-11T07:53:13Z

  }
-}
-
-function getAbsolutePath(value) {


I removed this function. I'm not sure what its original function was, but it doesn't seem necessary anymore.

daniel-heppner-ibigroup · 2025-07-11T07:57:14Z

- */
-function isRunningJest() {
-  return process.env.JEST_WORKER_ID !== undefined;
-}


this hasn't done anything for a long time since the snapshot tests don't run in jest since I did storybook 7 update

miles-grant-ibigroup

A few things I'm worried about. But it does work well

miles-grant-ibigroup · 2025-07-14T19:37:43Z

    </path>
  </svg>
-  <span class="Alert__AlertHeader-sc-2vlo3n-2 fpauiN">
+  <span class="sc-eqUAAy cHzsWi">


We make use of the Alert__AlertHeader type classnames in some places. Is there any way to restore these?

are you sure about that? If you look that classname contained a random styled component ID already- it wasn't just Alert__AlertHeader; it had -sc-2vlo3n-2 on there so it's not like you could use it as a selector anywhere that you don't have access to a regular expression. (like in CSS)

I actually don't know why this changed. I guess it has something to do with the styled components plugin for vite. Since this classname is dynamically generated by the build step there's no guarantee that it will be consistent. For example, in OTP-RR these classnames are generated by the vite/webpack configuration in otp-rr, unrelated to the vite config that generated this snapshot. So relying on it is not safe because it depends on the consumer of the component.

Here's an example of a selector we currently use: svg[class*="styled__FromIcon"] This needs to continue to work

I figured it out and adjusted the config. However, it doesn't matter since the classnames in OTP-RR are generated by the config over there and this only affects the storybook output.

The unit tests don't seem to have changed? What's going on

wdym? The snapshots were updated in 0c3d19a.

miles-grant-ibigroup

I'm nervous, but things seem to be working (and much quicker!) So let's give it a go and worst case scenario we can revert

binh-dam-ibigroup

Dev mode starts much faster!

binh-dam-ibigroup · 2025-08-04T20:34:12Z

-import {
-  getLegRouteLongName,
-  getLegRouteShortName
-} from "@opentripplanner/core-utils/lib/itinerary";


These changes away from importing from lib are nice.

Co-authored-by: Binh Dam <56846598+binh-dam-ibigroup@users.noreply.github.com>

daniel-heppner-ibigroup · 2025-08-04T23:28:56Z

Before I merge this, please review the parent PR! Once it's merged into that it'll be harder to keep the changes separate.

danielhep added 25 commits July 10, 2025 13:35

build: switch from webpack to vite

dc45d5f

rename jsx containing js files

7a02364

fix geocoder export

63d3452

fix messy lib path imports

a8df24c

deps: add missing types dependency

18d7662

fix type error

124644e

remove require() from react-intl.ts

38f1f4e

replace all require() with import

058d621

remove workspace package alias

7f783d9

remove getabsolutepath function

3ab7d89

remove typecheck step from prepublish

b2452b9

move playwright install to later stage of ci

d7d48ce

upgrade to node 22

ce1be1e

remove playwright dependency

d3e42cb

fix snapshot serializer issues

1052f70

update snapshots (styled component classnames)

624b9c6

remove obsolete serializer

eb40c0c

run all tests together

1e41fc8

update

8075548

update jest

446ff7b

remove jest graphql loader

c414b49

try babel loader for graphql query

cc80257

use jest file loader for graphql

e6c76d2

add graphql file loader

26f899f

Revert "remove obsolete serializer"

84cb5d4

This reverts commit eb40c0c.

daniel-heppner-ibigroup assigned miles-grant-ibigroup Jul 10, 2025

daniel-heppner-ibigroup commented Jul 11, 2025

View reviewed changes

daniel-heppner-ibigroup requested a review from miles-grant-ibigroup July 11, 2025 08:01

daniel-heppner-ibigroup changed the title ~~Storybook 9 vite build~~ Update storybook to 9, switch build system to vite. Jul 11, 2025

daniel-heppner-ibigroup changed the title ~~Update storybook to 9, switch build system to vite.~~ Switch build system to vite and update jest Jul 11, 2025

daniel-heppner-ibigroup mentioned this pull request Jul 11, 2025

deps: update to storybook 9 opentripplanner/otp-ui#862

Merged

miles-grant-ibigroup requested changes Jul 14, 2025

View reviewed changes

miles-grant-ibigroup assigned daniel-heppner-ibigroup and unassigned miles-grant-ibigroup Jul 14, 2025

danielhep added 2 commits July 18, 2025 15:06

fix pr comments

ab16231

adjust styled components compiler config

0c3d19a

daniel-heppner-ibigroup assigned miles-grant-ibigroup and unassigned daniel-heppner-ibigroup Jul 22, 2025

miles-grant-ibigroup assigned daniel-heppner-ibigroup and unassigned miles-grant-ibigroup Jul 23, 2025

remove accidental ignore patterns

e529ab6

daniel-heppner-ibigroup assigned miles-grant-ibigroup and unassigned daniel-heppner-ibigroup Jul 23, 2025

alec-georgoff mentioned this pull request Jul 24, 2025

Vehicle rental overlay graphql migration opentripplanner/otp-ui#865

Merged

miles-grant-ibigroup approved these changes Jul 28, 2025

View reviewed changes

miles-grant-ibigroup assigned daniel-heppner-ibigroup and unassigned miles-grant-ibigroup Jul 28, 2025

daniel-heppner-ibigroup assigned binh-dam-ibigroup and unassigned daniel-heppner-ibigroup Jul 29, 2025

binh-dam-ibigroup approved these changes Aug 4, 2025

View reviewed changes

binh-dam-ibigroup assigned daniel-heppner-ibigroup and unassigned binh-dam-ibigroup Aug 4, 2025

Update .github/workflows/node-ci.yml

4fb1ca6

Co-authored-by: Binh Dam <56846598+binh-dam-ibigroup@users.noreply.github.com>

daniel-heppner-ibigroup merged commit 4586c44 into storybook-9 Aug 6, 2025
2 checks passed

daniel-heppner-ibigroup deleted the storybook-9-vite-build branch August 6, 2025 21:39

Conversation

daniel-heppner-ibigroup commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

miles-grant-ibigroup left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

miles-grant-ibigroup left a comment

Choose a reason for hiding this comment

Uh oh!

binh-dam-ibigroup left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

daniel-heppner-ibigroup commented Aug 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

daniel-heppner-ibigroup commented Jul 10, 2025 •

edited

Loading