Document how to work with the otp-ui packages during development

[amenk]

During development of the otp-react-redux app it is sometimes necessary to update OTP-UI components.

I tried with yarn link, but that is not fully working:
See also #716

Can we document a workable approach to do this?

I hope, if this process can be more smooth, this might attract also more (new) contributors.

[miles-grant-ibigroup]

I believe this reason this is currently undocumented is due to the to put it politely poor quality of the current approaches to doing this.

Reforming this process and making it easier to development on these components is a goal. How that goal will be achieved is less clear

[amenk]

https://stackoverflow.com/a/63705440/288568

which leads to facebook/react#14257 (comment) that looked very promissing

This did not help

cd ~/projects/otp-ui
yarn
cd node_modules/react
yarn link
cd ~/projects/otp-ui/packages/itinerary-body
yarn link

cd ~/projects/otp-react-redux
yarn link react
yarn link @opentripplanner/itinerary-body

---

next try:

delete node_modules in otp-ui and otp-react-redux

cd ~/projects/otp-react-redux
yarn install
cd node_modules/react
yarn link
cd ../react-dom
yarn link

cd ~/projects/otp-ui/packages/itinerary-body
yarn link
yarn install
yarn link react
yarn link react-dom

cd ~/projects/otp-react-redux
yarn link @opentripplanner/itinerary-body


env YAML_CONFIG=`pwd`/config.yml yarn start

Search for a trip, open the trip details -> still crashes...

npm ls shows react 16 and react 17 mixed .. I guess this is part of the problem

otp-react-redux-feat-metric$ npm ls react
otp-react-redux@ /media/alex/bame/Projects/AddisMapTransit/otp-react-redux-feat-metric
├─┬ @auth0/[email protected]
│ └── [email protected] deduped
├─┬ @opentripplanner/[email protected]
│ └── [email protected] deduped
├─┬ @opentripplanner/[email protected]
│ └─┬ @styled-icons/[email protected]
│   └── [email protected] deduped
├─┬ @opentripplanner/[email protected]
│ └── [email protected] deduped
├─┬ @opentripplanner/[email protected]
│ └── [email protected] deduped
├─┬ @opentripplanner/[email protected]
│ └── [email protected] deduped
├─┬ @opentripplanner/[email protected] -> ./../otp-ui/packages/itinerary-body
│ ├─┬ @opentripplanner/[email protected] -> ./../otp-ui/packages/humanize-distance
│ │ └─┬ [email protected]
│ │   └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon, "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
│ ├─┬ @opentripplanner/[email protected] -> ./../otp-ui/packages/icons
│ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons
│ ├─┬ @opentripplanner/[email protected] -> ./../otp-ui/packages/location-icon
│ │ ├─┬ @styled-icons/[email protected]
│ │ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon, "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
│ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon
│ ├─┬ @styled-icons/[email protected]
│ │ ├─┬ @styled-icons/[email protected]
│ │ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon, "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
│ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon
│ ├─┬ @styled-icons/[email protected]
│ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon
│ ├─┬ [email protected]
│ │ ├─┬ [email protected] invalid: "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
│ │ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon, "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
│ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon, "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
│ ├── [email protected] invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon, "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
│ └─┬ [email protected]
│   └── [email protected] deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons, "^16.14.0" from ../otp-ui/packages/location-icon, "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
├─┬ @opentripplanner/[email protected]
│ └── [email protected] deduped

[amenk]

With yalc I found some okayish workflow:

cd ~/projects/otp-ui/packages/itinerary-body
yarn tsc
yalc publish

cd ~/projects/otp-react-redux
yalc link @opentripplanner/itinerary-body

Now each time you change something in the package:

cd ~/projects/otp-ui/packages/itinerary-body
yarn tsc && yalc publish

might also need:

cd ~/projects/otp-ui/
yarn
yalc publish

Finally:

cd ~/projects/otp-react-redux
yalc update
yarn start

[miles-grant-ibigroup]

I'm not sure how I feel about adding another external tool as an "official" dependency, but I'm happy to discuss with other maintainers offline.

Either way glad you found a solution that works for you!

[amenk]

Does not seem to work for the @opentripplanner dependencies of other @opentripplanner components though ... not 100% sure.

[miles-grant-ibigroup]

I think I'll leave this issue open for now, but we'll hold off on updating the main README until we have a stronger solution. Glad you've found this yalc approach though! Glad it works for you.