search

excalidraw / mermaid-to-excalidraw

Generate Excalidraw diagrams from Mermaid
https://mermaid-to-excalidraw.vercel.app
MIT License
265 stars 46 forks source link

build: simple setup vite for playground #52

Closed igorwessel closed 5 months ago

igorwessel commented 6 months ago

Closes #36

Description

I've modified how we're creating IDs for the diagrams to be more consistent, without needing to define an index offset. This was necessary to easily accommodate Hot Module Replacement (HMR).

I've added basic HMR support in the test files. I didn't feel the need to implement it for when there's a removal/etc... as we're only going to use the playground for testing.

I've kept the same format that Parcel was using so we don't have to make any adjustments on the Vercel side.

Test Cases

Testcases files only change respective name and definition

https://github.com/excalidraw/mermaid-to-excalidraw/assets/54173994/82375e86-ea23-42b8-b02f-fe169691f2fe

Only rerender current active test file

https://github.com/excalidraw/mermaid-to-excalidraw/assets/54173994/8ad296a1-636f-434c-a69f-c3897c9e66d0

Except for React Components and the Testcase files, all others trigger a full page reload with HMR.

https://github.com/excalidraw/mermaid-to-excalidraw/assets/54173994/1a84a207-8010-4e1d-ae72-98804e9706eb

The production build we can test locally through preview and the pipeline will also allow us to test.

vercel[bot] commented 6 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
mermaid-to-excalidraw ✅ Ready (Inspect) Visit Preview May 1, 2024 2:41pm
ad1992 commented 5 months ago

@igorwessel one request, please avoid force pushing going forward as we end up losing the context of what was reviewed last (as it rewrites the history), and it is always safer to push a merge commit instead :)

I will do the final review and testing hopefully by tonight and we should be good to merge!

igorwessel commented 5 months ago

For the custom testcase, let's render the mermaid output and excalidraw diagram only after the render button is clicked, otherwise it will always show up error when user is typing which is annoying.

Indeed HAHAHA

If I update a testcase file and introduce error, it doesn't show up in the playground, probably coz the error is always set to null

I noticed that we don't have the error inside the Testfile component, so the error was shown generally on the website.

I added the error but it will only display for the currently active test case. do you think it makes sense to have something more granular?

ad1992 commented 5 months ago

Thanks, @igorwessel, I am doing the final review and making some tweaks. Will be pushing the changes soon so you can pause pushing for now to avoid conflicts :p

ad1992 commented 5 months ago

@igorwessel I have pushed some changes to simplify and clean up the code. The important changes are in https://github.com/excalidraw/mermaid-to-excalidraw/pull/52/commits/55ac328c5448dcca5012687710fa20e2dcc9bac5 👇🏻

Let me know if this looks good to you and if everything is working fine (I have tested it but another eye always helps :)). If all good we should be good to go :)

igorwessel commented 5 months ago

@ad1992 Perfect, it looks great 💯 ! I had a somewhat incorrect mental model of this part from the beginning, it simplified quite a bit. I just pushed a small typo fix.