build: simple setup vite for playground #52

igorwessel · 2024-04-12T12:03:32Z

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

diagram.mov

Only rerender current active test file

active-diagram.mov

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

another-files.mov

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

vercel · 2024-04-12T12:03:36Z

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

playground/index.ts

playground/testcases/class.ts

playground/vite.config.ts

playground/tsconfig.json

playground/index.ts

ad1992

looking great @igorwessel
Left few comments and here are some additional things that needs to be fixed

Updating custom test case should update mermaid output
Updating custom test case should update excalidraw diagram

playground/context/excalidraw.ts

playground/index.tsx

playground/Mermaid.tsx

Maybe we won't need any adjustments to the vercel for it to work.

igorwessel · 2024-04-25T11:09:51Z

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

The code is much cleaner now @igorwessel :)
Left a few comments.

ad1992 · 2024-04-29T06:47:33Z

playground/Testcases.tsx

+          activeTestcase={
+            activeTestcase.current?.[0] === index
+              ? activeTestcase.current[1]
+              : undefined


this is confusing, lets have rename to activeTestCaseIndex and only store the active test case index here.
You can instead compare it with index here and pass the prop accordingly

@ad1992 now I'm a bit confused haha.
The idea was to store both the index of the test files and the index of the active testcase. Without this, it doesn't know that it's file X that has the active test, and it ends up requesting to render the Excalidraw for all files not only for current active testcase.

@igorwessel to fix that can we have a base index instead? It starts from 0 and keeps on incrementing until all test cases are rendered.

@ad1992 I will try this approach it should work. if don't maybe we can just destructure and name these variables?

const [activeTestCaseFileIndex, activeTestCaseIndex] = activeTestCase.current activeTestCaseFileIndex === fileIndex ? activeTestCaseIndex : undefined

@ad1992 I change the mind of some of the responsibility and understood that the duty of triggering the active test should lie with TestCases, not with SingleTestCase
done in 378eaf9

ad1992 · 2024-04-29T06:47:53Z

playground/Testcases.tsx

+            onChange(definition, false);
+          }}
+          testcases={testcases}
+          error={!isCustomTest ? error : null}


Suggested change

error={!isCustomTest ? error : null}

error={isCustomTest ? null : error}

better readability

done in e540933

ad1992 · 2024-04-29T06:48:26Z

playground/Testcases.tsx

+  activeTestcase?: number;
+}
+
+const Testcase = ({


Lets move this component to a file SingleTestCase.tsx

done in c0752ad

ad1992 · 2024-04-29T06:48:53Z

playground/Testcases.tsx

+  testcases: { name: string; definition: string }[];
+  onChange: (definition: string, activeTestcaseIndex: number) => void;
+  error: string | null;
+  activeTestcase?: number;


rename to activeTestCaseIndex as its the index and not the testcase

done in d3716a2

ad1992 · 2024-04-29T06:52:34Z

playground/Testcases.tsx

+
+                <MermaidDiagram definition={definition} id={id} />
+
+                {error && activeTestcase === index && (


This would mean it shows error only for active testcase lets make it render error irrespective of the condition ?

Currently If I edit a testcase file such with errored syntax, the text gets updated however mermaid diagram doesn't rerender.

@ad1992 I was thinking about this, and the idea of just showing for the active test case was to not have to store the individual errors for each testcase.

Today we don't have the reference so the last error would be overwritten, so that error structure in the App file would become a kind of multidimensional array:

[ [ 0 // index testcases files, 0 // index testcase inside testscases file ] ]

Nah let's not complicate it, we might add error field later in test case file itself if needed, that would simplify this.

However for now instead of not rendering anything during error, how about saying "Error in Rendering Mermaid Diagram" ?

@ad1992 I realized that it shouldn't be the responsibility of the testcase or the custom testcase to understand if there was an error in the rendering of the memraid.

I've moved the responsibility over to MermaidDiagram.

yeah agreed 💯, I was considering that too.

It got a lot better hahaha
done in 2e09454

I kept it in the custom test case so we could track the parseMermaid, not just the diagram error.

ad1992 · 2024-05-01T08:29:08Z

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

Add type attribute to each testcase Use only activeTestCaseIndex and move to index.tsx to simplify and this also removes the hack to force rerender when render to excalidraw button clicked

ad1992 · 2024-05-01T12:43:41Z

@igorwessel I have pushed some changes to simplify and clean up the code.
The important changes are in 55ac328 👇🏻

Add type attribute to each testcase so we need not pass name attribute and this could be helpful later
Use only activeTestCaseIndex and move one level up to index.tsx to simplify and this also removes the hack to force rerender when render to excalidraw button clicked
Remove isActiveCustomTest

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 · 2024-05-01T14:42:19Z

@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.

ad1992

Thanks @igorwessel, merging 🚀

vercel bot deployed to Preview April 12, 2024 12:04 View deployment

igorwessel commented Apr 12, 2024

View reviewed changes

playground/index.ts Outdated Show resolved Hide resolved

igorwessel commented Apr 12, 2024

View reviewed changes

playground/index.ts Outdated Show resolved Hide resolved

igorwessel marked this pull request as ready for review April 12, 2024 22:48

vercel bot deployed to Preview April 12, 2024 22:48 View deployment

vercel bot deployed to Preview April 13, 2024 11:22 View deployment

ad1992 requested changes Apr 15, 2024

View reviewed changes

playground/testcases/class.ts Show resolved Hide resolved

playground/vite.config.ts Show resolved Hide resolved

playground/tsconfig.json Show resolved Hide resolved

playground/index.ts Outdated Show resolved Hide resolved

playground/index.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview April 16, 2024 15:19 View deployment

igorwessel force-pushed the feat/migrate-to-vite branch from 57a65b3 to 038256f Compare April 16, 2024 17:32

vercel bot had a problem deploying to Preview April 16, 2024 17:32 Failure

vercel bot deployed to Preview April 16, 2024 19:29 View deployment

igorwessel requested a review from ad1992 April 18, 2024 12:26

ad1992 requested changes Apr 22, 2024

View reviewed changes

playground/context/excalidraw.ts Outdated Show resolved Hide resolved

playground/index.tsx Outdated Show resolved Hide resolved

playground/Mermaid.tsx Outdated Show resolved Hide resolved

igorwessel added 16 commits April 23, 2024 04:35

build: simple setup vite for playground

f920e96

build: add preview script to see production build

48245fd

chore: remove parcel deps

5b5c3a4

build: use vite to bundle react, excalidraw

900014c

refactor: typo fix for "definition" in playground

e8037fc

build: basic support hmr for test cases

b3505c0

build: maintain same output build format which parcel uses

7b71547

Maybe we won't need any adjustments to the vercel for it to work.

fix: hmr testcase file update not get new definition for button

88c08f0

chore: some minor adjust in tsconfig

ece4a0d

refactor: use glob pattern for warm-up vite

8f149ae

feat: transform playground in react

390f1d0

build: add typecheck for playground

266a594

build: fix typecheck for playground

9d3d496

refactor: use arrow function for testcases component

7cbec3a

refactor: use arrow function for mermaid component

8155f6d

refactor: use arrow function for excalidraw component

9ad7db4

igorwessel added 3 commits April 25, 2024 07:39

refactor: rename mermaid to mermaid digram

96f6505

refactor: remove responsability to get mermaid data in excalidraw

192f306

fix: minor fixes

2475856

vercel bot deployed to Preview April 25, 2024 11:05 View deployment

igorwessel requested a review from ad1992 April 25, 2024 11:09

ad1992 requested changes Apr 29, 2024

View reviewed changes

igorwessel added 5 commits April 29, 2024 07:26

refactor: rename activeTestcase to activeTestcaseIndex

d3716a2

refactor: improve readability for testcase error prop

e540933

refactor: separate a single testcase component in own file

c0752ad

refactor: move error responsability to mermaid diagram

2e09454

refactor: better way to handle active testcase file

378eaf9

vercel bot deployed to Preview April 29, 2024 16:42 View deployment

igorwessel requested a review from ad1992 April 29, 2024 16:43

fix: force re-render when click in button

51f080c

vercel bot deployed to Preview April 30, 2024 10:50 View deployment

feat: show error when occurs in parseMermaid

b9cfd1c

vercel bot deployed to Preview April 30, 2024 11:00 View deployment

rename the onchange handler to handleOnChange and use explicit types

e6ee857

Refactor Single Testcase to render a single testcase

55ac328

Add type attribute to each testcase Use only activeTestCaseIndex and move to index.tsx to simplify and this also removes the hack to force rerender when render to excalidraw button clicked

vercel bot had a problem deploying to Preview May 1, 2024 12:34 Failure

add missing type to class testcase

1fab572

vercel bot deployed to Preview May 1, 2024 12:38 View deployment

fix typo for flowchart testcase

cf65699

vercel bot deployed to Preview May 1, 2024 14:41 View deployment

ad1992 approved these changes May 2, 2024

View reviewed changes

ad1992 merged commit e347696 into excalidraw:master May 2, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build: simple setup vite for playground #52

build: simple setup vite for playground #52

igorwessel commented Apr 12, 2024 •

edited

Loading

vercel bot commented Apr 12, 2024 •

edited

Loading

ad1992 left a comment

igorwessel commented Apr 25, 2024 •

edited

Loading

ad1992 left a comment

ad1992 Apr 29, 2024

igorwessel Apr 29, 2024

ad1992 Apr 29, 2024

igorwessel Apr 29, 2024 •

edited

Loading

igorwessel Apr 29, 2024

ad1992 Apr 29, 2024

igorwessel Apr 29, 2024

ad1992 Apr 29, 2024

igorwessel Apr 29, 2024

ad1992 Apr 29, 2024

igorwessel Apr 29, 2024

ad1992 Apr 29, 2024

igorwessel Apr 29, 2024

ad1992 Apr 29, 2024

igorwessel Apr 29, 2024

ad1992 Apr 29, 2024

igorwessel Apr 29, 2024

igorwessel Apr 30, 2024

ad1992 commented May 1, 2024

ad1992 commented May 1, 2024

igorwessel commented May 1, 2024

ad1992 left a comment

	error={!isCustomTest ? error : null}
	error={isCustomTest ? null : error}


		<MermaidDiagram definition={definition} id={id} />

		{error && activeTestcase === index && (

build: simple setup vite for playground #52

build: simple setup vite for playground #52

Conversation

igorwessel commented Apr 12, 2024 • edited Loading

Description

Test Cases

vercel bot commented Apr 12, 2024 • edited Loading

ad1992 left a comment

Choose a reason for hiding this comment

igorwessel commented Apr 25, 2024 • edited Loading

ad1992 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

igorwessel Apr 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ad1992 commented May 1, 2024

ad1992 commented May 1, 2024

igorwessel commented May 1, 2024

ad1992 left a comment

Choose a reason for hiding this comment

igorwessel commented Apr 12, 2024 •

edited

Loading

vercel bot commented Apr 12, 2024 •

edited

Loading

igorwessel commented Apr 25, 2024 •

edited

Loading

igorwessel Apr 29, 2024 •

edited

Loading