search

opentripplanner / otp-react-redux

A library for writing modern OpenTripPlanner-compatible multimodal journey planning applications using React and Redux.
MIT License
70 stars 51 forks source link

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

Open amenk opened 1 year ago

amenk commented 1 year ago

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 https://github.com/opentripplanner/otp-react-redux/issues/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 commented 1 year ago

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 commented 1 year ago

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

which leads to https://github.com/facebook/react/issues/14257#issuecomment-809702813 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/auth0-react@1.6.0
│ └── react@16.14.0 deduped
├─┬ @opentripplanner/base-map@3.0.6
│ └── react@16.14.0 deduped
├─┬ @opentripplanner/core-utils@7.0.10
│ └─┬ @styled-icons/foundation@10.34.0
│   └── react@16.14.0 deduped
├─┬ @opentripplanner/endpoints-overlay@2.0.5
│ └── react@16.14.0 deduped
├─┬ @opentripplanner/from-to-location-picker@2.1.5
│ └── react@16.14.0 deduped
├─┬ @opentripplanner/icons@2.0.1
│ └── react@16.14.0 deduped
├─┬ @opentripplanner/itinerary-body@4.1.5 -> ./../otp-ui/packages/itinerary-body
│ ├─┬ @opentripplanner/humanize-distance@1.2.0 -> ./../otp-ui/packages/humanize-distance
│ │ └─┬ react-intl@5.24.6
│ │   └── react@17.0.2 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/icons@2.0.1 -> ./../otp-ui/packages/icons
│ │ └── react@17.0.2 deduped invalid: "^16.14.0" from ../otp-ui/packages/itinerary-body, "^16.14.0" from ../otp-ui/packages/icons
│ ├─┬ @opentripplanner/location-icon@1.4.0 -> ./../otp-ui/packages/location-icon
│ │ ├─┬ @styled-icons/fa-regular@10.34.0
│ │ │ └── react@17.0.2 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
│ │ └── react@17.0.2 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/fa-solid@10.34.0
│ │ ├─┬ @styled-icons/styled-icon@10.6.3
│ │ │ └── react@17.0.2 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
│ │ └── react@17.0.2 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/foundation@10.34.0
│ │ └── react@17.0.2 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
│ ├─┬ react-animate-height@3.0.4
│ │ ├─┬ react-dom@17.0.2 invalid: "^16.0.0" from ../otp-ui/packages/itinerary-body/node_modules/react-resize-detector
│ │ │ └── react@17.0.2 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
│ │ └── react@17.0.2 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
│ ├─┬ react-resize-detector@4.2.3
│ │ └── react@17.0.2 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
│ ├── react@17.0.2 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
│ └─┬ styled-components@5.3.0
│   └── react@17.0.2 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/location-field@1.12.11
│ └── react@16.14.0 deduped
amenk commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

miles-grant-ibigroup commented 1 year ago

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.