Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace webpack with Vite #803

Closed
damianstasik opened this issue Feb 17, 2023 · 4 comments · Fixed by #836
Closed

Replace webpack with Vite #803

damianstasik opened this issue Feb 17, 2023 · 4 comments · Fixed by #836

Comments

@damianstasik
Copy link

Hello 👋

Would you accept a PR that replaces webpack with Vite? It's a modern build tool that would make developer experience much better, it would also greatly reduce amount of dependencies and simplify the project setup. I did some initial tests and I was able to switch Maputnik to Vite fairly smoothly, here is the result: master...damianstasik:editor:replace-webpack-with-vite (just look at that package-lock.json reduction 🤩).

I would love to contribute such a PR, but what are your thoughts on that?

@HarelM
Copy link
Collaborator

HarelM commented Dec 10, 2023

Disclaimer: I'm not maintaining this project.

I've tried to introduce some typescript migration ability in webpack and it was frustrating to say the least.
What I thought would be a good way forward was to slowly change the jsx files to tsx, bit by bit so it won't be an all-or-nothing kind of effort.
How complicated would it be to do that in vite?
Currently the solution I found was that I need to change the import statements from import a from './a' to import a from './a.tsx' which feels like a hack and is not needed if everything is written in typescript, so there's an extra effort in the end which I would like to avoid, and webpack configuration doesn't seem play nice for some reason.

So if this can be a way forward maybe a joint effort here can be a good idea, what do you think?

P.S. just saw that this issue is from Feb :-/

@damianstasik
Copy link
Author

Hey @HarelM!

I've tried to introduce some typescript migration ability in webpack and it was frustrating to say the least. (...) How complicated would it be to do that in vite?

I'd say it's one of the reasons Vite became so popular – just add tsconfig.json config and install typescript, that's it, TS is enabled.

webpack configuration doesn't seem play nice for some reason

Could you see if adding .ts and .tsx to the resolve.extensions option helps with this?

So if this can be a way forward maybe a joint effort here can be a good idea, what do you think?

I agree, just one question, do we know if such a migration would be merged?

@HarelM
Copy link
Collaborator

HarelM commented Dec 10, 2023

Could you see if adding .ts and .tsx to the resolve.extensions option helps with this?

It does help, but it seems like an intermidiate hack, and I don't like it...

I agree, just one question, do we know if such a migration would be merged?

You can see the comment in #828
I believe it will be welcomed.

I also did some experimentation with ts-migrate tool, which does a lot of the manual annoying stuff, it leaves a lot of "TODOs", but this is expected.

I would recommend opening a PR just for vite and see how it goes, after that we can see how we can upgrade the dev dependencies and introduce typescript.
After that we can start working on removing the "TODOs" that are related to typescript (which I don't think is a huge task as the components have static propTypes) and finally upgrade the dependencies with latest packages.

I can reach out to the maintainers to give us contributor roles in needed and if this is something you would like to maintain going forward.

@HarelM
Copy link
Collaborator

HarelM commented Dec 17, 2023

I have opened a PR with changes that are very similar to what is linked here.
Once merged we could incrementally change the code from javascript to typescript.

nyurik pushed a commit that referenced this issue Dec 18, 2023
Resolves #803

This is an initial commit to allow migrating to typescript bit by bit.
It introduces vite.
It removes all the webpack configuration (which I have no clue what all
the profiling are needed for, and couldn't find anything in the readme).
It also changes a single file from javascript to typescript:
`urlopen.js` -> `urlopen.ts`
Which was done manually, later on I'll see if I can automate most of the
migration.
For now, everything seems to work as expected.
I also upgrades storybook to use vite and renames the stories to jsx (I
honestly don't know why this complexity is needed here, but I'll keep it
for now).

cc: @damianstasik
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants