Summary

Moved display name setter to shared package to avoid repetition

How did you test this change?

This is not a user interface change.

Move display name setter to shared

[DevTools] front-end for profiling event stack (#24805)

• [DevTools] front-end for profiling event stack

Adds a side-bar to the profiling tab. Users can now select an update event, and are shown the callstack from the originating component. When a source path is available there is now UI to jump to source.

Add FB enabled feature flag: enableProfilerComponentTree for the side-bar.

resolves #24170

[Transition Tracing] Fix excess calls to the transition start callback (#24806)

This PR fixes a bug where we would add a transition to the lanes map every time an update occurs. However, we didn't factor in that there might be multiple updates in a transition, which would cause the transition to be added multiple times to the transitionLanes map.

This changes the transitionLanes object from an Array of Arrays to an Array of Sets so that we only add a transition if it hasn't been added before, avoiding duplicates

[DevTools] Log page URL in internal build (#24799)

• test log

• fix attribute name

• fix lint

• tabs can be empty

• improve coding style per comments

[DevTools] Add column number to viewSourceLineFunction (#24814)

Add column number for viewSourceLineFunction and renamed the function to viewUrlSourceFunction to match the other source function naming conventions

[DevTools] Fix Bugs With Component Stacks (#24815)

This PR:

• Simplifies the code in SidebarEventInfo by passing it the actual clicked event rather than an index.
• Lightly refactored the SidebarEventInfo code so that it can be used for more than just schedulingEvents
• Fixes bug. Previously, whenever a state update event was clicked, we updated the selectedCommitIndex in the ProfilerContext. However, this index is used for the selected commit in the Flamegraph profiler, which caused a bug where if you would change the contents of the event sidebar, the commit sidebar in the Flamegraph profiler would change too. This PR replaces this with the actual event info instead

[DevTools] Resign Timeline Profiler Sidebar (#24816)

This PR:

• Redesigned the sidebar to resemble the flamegraph profiler sidebar and added title and timestamp to the sidebar
• Added ability to copy the component stack (for places where you're unable to link to source)

https://user-images.githubusercontent.com/2735514/176564897-5301d6d4-429a-4ea3-86cd-74427cff4ce6.mov

Land forked reconciler changes (#24817)

This applies forked changes from the "new" reconciler to the "old" one.

Includes:

• d410f0a [FORKED] Bugfix: Offscreen instance is null during setState
• 58bb117 [FORKED] Check for infinite update loops even if unmounted
• 31882b5 [FORKED] Bugfix: Revealing a hidden update
• 17691ac [FORKED] Don't update childLanes until after current render

Add test gate alias for Offscreen (#24749)

Offscreen is only enabled in the www and experimental channels. Instead of listing these on every Offscreen test, I added a test gate alias called enableOffscreen. Makes it easier to grep for these, and edit or remove the channels later.

Track nearest Suspense handler on stack (#24585)

• [FORKED] Add HiddenContext to track if subtree is hidden

This adds a new stack cursor for tracking whether we're rendering inside a subtree that's currently hidden.

This corresponds to the same place where we're already tracking the "base lanes" needed to reveal a hidden subtree — that is, when going from hidden -> visible, the base lanes are the ones that we skipped over when we deferred the subtree. We must includes all the base lanes and their updates in order to avoid an inconsistency with the surrounding content that already committed.

I consolidated the base lanes logic and the hidden logic into the same set of push/pop calls.

This is intended to replace the InvisibleParentContext that is currently part of SuspenseContext, but I haven't done that part yet.

• Add previous commit to forked revisions

• [FORKED] Track nearest Suspense handler on stack

Instead of traversing the return path whenever something suspends to find the nearest Suspense boundary, we can push the Suspense boundary onto the stack before entering its subtree. This doesn't affect the overall algorithm that much, but because we already do all the same logic in the begin phase, we can save some redundant work by tracking that information on the stack instead of recomputing it every time.

• Add previous commit to forked revisions

[Transition Tracing] Refactor Transition Tracing Root Code (#24766)

This PR refactors the transition tracing root code by reusing the tracing marker code. Namely it:

• Refactors the tracing marker code so that it takes a tracing marker instance instead of a tracing marker fiber and rename the stack to markerInstance instead of tracingMarker
• Pushes the root code onto the stack
• Moves the instantiation of root.incompleteTransitions to the begin phase when we are pushing the root to the stack rather than in the commit phase

Revert "[Transition Tracing] Refactor Transition Tracing Root Code (#24766)" (#24829)

This reverts commit 401296310fbc6a9e769936eda6a6d0269e9c84d0 because it's failing on main, likely due to conflict with something that landed before the PR was merged. Need to rebase and fix.

Revert "Revert [Transition Tracing] Refactor Transition Tracing Root Code" (#24830)

• refactor root

• old

• Add comments and push actual marker instance in pushMarkerInstance

• old

• refactor pushRootMarkerInstance

• old

• fix test

Add missing null checks to OffscreenInstance code (#24846)

stateNode is any-typed, so when reading from stateNode we should always cast it to the specific type for that type of work. I noticed a place in the commit phase where OffscreenInstance wasn't being cast. When I added the type assertion, it exposed some type errors where nullable values were being accessed without first being refined.

I added the required null checks without verifying the logic of the existing code. If the existing logic was correct, then the extra null checks won't have any affect on the behavior, because all they do is refine from a nullable type to a non-nullable type in places where the type was assumed to already be non-nullable. But the result looks a bit fishy to me, so I also left behind some TODOs to follow up and verify it's correct.

Suspending inside a hidden tree should not cause fallbacks to appear (#24699)

• [FORKED] Hidden trees should capture Suspense

If something suspends inside a hidden tree, it should not affect anything in the visible part of the UI. This means that Offscreen acts like a Suspense boundary whenever it's in its hidden state.

• Add previous commit to forked revisions

[Transition Tracing] Change Transition Type Passed Pending Transitions (#24856)

This PR changes the type of the object we store in the pending transitions callbacks map. Previously, we were recreating the transition object that we initially created during startTransition. However, we can actually reuse the object instead (and it also gives us a stable way to identify a transition). This PR changes the implementation to reuse the transition object instead of creating a new one

[Transition Tracing] Refactor Code to Remove OffscreeInstance TODOs (#24855)

Refactored code to pass flow and remove TODOs introduced in #24846

[DevTools][Bugfix] Fix DevTools Perf Issue When Unmounting Large React Subtrees (#24863)

We've recently had multiple reports where, if React DevTools was installed, unmounting large React subtrees would take a huge performance hit (ex. from 50ms to 7 seconds).

Digging in more, we realized for every fiber that unmounts, we called untrackFibers, which calls clearTimeout (and does some work manipulating a set, but this wasn't the bulk of the time). We ten call recordUnmount, which adds the timer back. Adding and removing the timer so many times was taking upwards of 50ms per timer add/remove call, which was resulting in exorbitant amounts of time spent in DevTools deleting subtrees.

It looks like we are calling untrackFibers so many times to avoid a race condition with Suspense children where we unmount them twice (first a "virtual" unmount when the suspense boundary is toggled from visible to invisible, and then an actual unmount when the new children are rendered) without modifying fiberIDMap. We can fix this race condition by using the untrackFibersSet as a lock and not calling recordUnmount if the fiber is in the set and hasn't been processed yet. This works because the only way fibers are added in the set is via recordUnmount anyway.

This PR also adds a test to make sure this change doesn't regress the previous behavior.

Before

After

Delete Partial Renderer SSR implementation (#24868)

This removes the old server rendering implementation (the "Partial Renderer"). It was replaced in React 18 with a new streaming implementation (Fizz).

We hadn't removed it from the codebase yet because Facebook hadn't finished rolling out Fizz in production; it's been behind a feature flag while we run performance tests and migrate our internal infrastructure.

The diff to land Fizz will land imminently, and once it does, we can merge this commit.

Defer setState callbacks until component is visible (#24872)

A class component setState callback should not fire if a component is inside a hidden Offscreen tree. Instead, it should wait until the next time the component is made visible.

Land forked reconciler changes (#24878)

This applies forked changes from the "new" reconciler to the "old" one.

Includes:

• 67de5e3 [FORKED] Hidden trees should capture Suspense
• 6ab05ee [FORKED] Track nearest Suspense handler on stack
• 051ac55 [FORKED] Add HiddenContext to track if subtree is hidden

[DevTools] front-end for profiling event stack (#24805)

• [DevTools] front-end for profiling event stack

Adds a side-bar to the profiling tab. Users can now select an update event, and are shown the callstack from the originating component. When a source path is available there is now UI to jump to source.

Add FB enabled feature flag: enableProfilerComponentTree for the side-bar.

resolves #24170

[Transition Tracing] Fix excess calls to the transition start callback (#24806)

This PR fixes a bug where we would add a transition to the lanes map every time an update occurs. However, we didn't factor in that there might be multiple updates in a transition, which would cause the transition to be added multiple times to the transitionLanes map.

This changes the transitionLanes object from an Array of Arrays to an Array of Sets so that we only add a transition if it hasn't been added before, avoiding duplicates

[DevTools] Log page URL in internal build (#24799)

• test log

• fix attribute name

• fix lint

• tabs can be empty

• improve coding style per comments

[DevTools] Add column number to viewSourceLineFunction (#24814)

Add column number for viewSourceLineFunction and renamed the function to viewUrlSourceFunction to match the other source function naming conventions

[DevTools] Fix Bugs With Component Stacks (#24815)

This PR:

• Simplifies the code in SidebarEventInfo by passing it the actual clicked event rather than an index.
• Lightly refactored the SidebarEventInfo code so that it can be used for more than just schedulingEvents
• Fixes bug. Previously, whenever a state update event was clicked, we updated the selectedCommitIndex in the ProfilerContext. However, this index is used for the selected commit in the Flamegraph profiler, which caused a bug where if you would change the contents of the event sidebar, the commit sidebar in the Flamegraph profiler would change too. This PR replaces this with the actual event info instead

[DevTools] Resign Timeline Profiler Sidebar (#24816)

This PR:

• Redesigned the sidebar to resemble the flamegraph profiler sidebar and added title and timestamp to the sidebar
• Added ability to copy the component stack (for places where you're unable to link to source)

https://user-images.githubusercontent.com/2735514/176564897-5301d6d4-429a-4ea3-86cd-74427cff4ce6.mov

Land forked reconciler changes (#24817)

This applies forked changes from the "new" reconciler to the "old" one.

Includes:

• d410f0a [FORKED] Bugfix: Offscreen instance is null during setState
• 58bb117 [FORKED] Check for infinite update loops even if unmounted
• 31882b5 [FORKED] Bugfix: Revealing a hidden update
• 17691ac [FORKED] Don't update childLanes until after current render

Add test gate alias for Offscreen (#24749)

Offscreen is only enabled in the www and experimental channels. Instead of listing these on every Offscreen test, I added a test gate alias called enableOffscreen. Makes it easier to grep for these, and edit or remove the channels later.

Track nearest Suspense handler on stack (#24585)

• [FORKED] Add HiddenContext to track if subtree is hidden

This adds a new stack cursor for tracking whether we're rendering inside a subtree that's currently hidden.

This corresponds to the same place where we're already tracking the "base lanes" needed to reveal a hidden subtree — that is, when going from hidden -> visible, the base lanes are the ones that we skipped over when we deferred the subtree. We must includes all the base lanes and their updates in order to avoid an inconsistency with the surrounding content that already committed.

I consolidated the base lanes logic and the hidden logic into the same set of push/pop calls.

This is intended to replace the InvisibleParentContext that is currently part of SuspenseContext, but I haven't done that part yet.

• Add previous commit to forked revisions

• [FORKED] Track nearest Suspense handler on stack

Instead of traversing the return path whenever something suspends to find the nearest Suspense boundary, we can push the Suspense boundary onto the stack before entering its subtree. This doesn't affect the overall algorithm that much, but because we already do all the same logic in the begin phase, we can save some redundant work by tracking that information on the stack instead of recomputing it every time.

• Add previous commit to forked revisions

[Transition Tracing] Refactor Transition Tracing Root Code (#24766)

This PR refactors the transition tracing root code by reusing the tracing marker code. Namely it:

• Refactors the tracing marker code so that it takes a tracing marker instance instead of a tracing marker fiber and rename the stack to markerInstance instead of tracingMarker
• Pushes the root code onto the stack
• Moves the instantiation of root.incompleteTransitions to the begin phase when we are pushing the root to the stack rather than in the commit phase

Revert "[Transition Tracing] Refactor Transition Tracing Root Code (#24766)" (#24829)

This reverts commit 401296310fbc6a9e769936eda6a6d0269e9c84d0 because it's failing on main, likely due to conflict with something that landed before the PR was merged. Need to rebase and fix.

Revert "Revert [Transition Tracing] Refactor Transition Tracing Root Code" (#24830)

• refactor root

• old

• Add comments and push actual marker instance in pushMarkerInstance

• old

• refactor pushRootMarkerInstance

• old

• fix test

Add missing null checks to OffscreenInstance code (#24846)

stateNode is any-typed, so when reading from stateNode we should always cast it to the specific type for that type of work. I noticed a place in the commit phase where OffscreenInstance wasn't being cast. When I added the type assertion, it exposed some type errors where nullable values were being accessed without first being refined.

I added the required null checks without verifying the logic of the existing code. If the existing logic was correct, then the extra null checks won't have any affect on the behavior, because all they do is refine from a nullable type to a non-nullable type in places where the type was assumed to already be non-nullable. But the result looks a bit fishy to me, so I also left behind some TODOs to follow up and verify it's correct.

Suspending inside a hidden tree should not cause fallbacks to appear (#24699)

• [FORKED] Hidden trees should capture Suspense

If something suspends inside a hidden tree, it should not affect anything in the visible part of the UI. This means that Offscreen acts like a Suspense boundary whenever it's in its hidden state.

• Add previous commit to forked revisions

[Transition Tracing] Change Transition Type Passed Pending Transitions (#24856)

This PR changes the type of the object we store in the pending transitions callbacks map. Previously, we were recreating the transition object that we initially created during startTransition. However, we can actually reuse the object instead (and it also gives us a stable way to identify a transition). This PR changes the implementation to reuse the transition object instead of creating a new one

[Transition Tracing] Refactor Code to Remove OffscreeInstance TODOs (#24855)

Refactored code to pass flow and remove TODOs introduced in #24846

[DevTools][Bugfix] Fix DevTools Perf Issue When Unmounting Large React Subtrees (#24863)

We've recently had multiple reports where, if React DevTools was installed, unmounting large React subtrees would take a huge performance hit (ex. from 50ms to 7 seconds).

Digging in more, we realized for every fiber that unmounts, we called untrackFibers, which calls clearTimeout (and does some work manipulating a set, but this wasn't the bulk of the time). We ten call recordUnmount, which adds the timer back. Adding and removing the timer so many times was taking upwards of 50ms per timer add/remove call, which was resulting in exorbitant amounts of time spent in DevTools deleting subtrees.

It looks like we are calling untrackFibers so many times to avoid a race condition with Suspense children where we unmount them twice (first a "virtual" unmount when the suspense boundary is toggled from visible to invisible, and then an actual unmount when the new children are rendered) without modifying fiberIDMap. We can fix this race condition by using the untrackFibersSet as a lock and not calling recordUnmount if the fiber is in the set and hasn't been processed yet. This works because the only way fibers are added in the set is via recordUnmount anyway.

This PR also adds a test to make sure this change doesn't regress the previous behavior.

Before

After

Delete Partial Renderer SSR implementation (#24868)

This removes the old server rendering implementation (the "Partial Renderer"). It was replaced in React 18 with a new streaming implementation (Fizz).

We hadn't removed it from the codebase yet because Facebook hadn't finished rolling out Fizz in production; it's been behind a feature flag while we run performance tests and migrate our internal infrastructure.

The diff to land Fizz will land imminently, and once it does, we can merge this commit.

Defer setState callbacks until component is visible (#24872)

A class component setState callback should not fire if a component is inside a hidden Offscreen tree. Instead, it should wait until the next time the component is made visible.

Land forked reconciler changes (#24878)

This applies forked changes from the "new" reconciler to the "old" one.

Includes:

• 67de5e3 [FORKED] Hidden trees should capture Suspense
• 6ab05ee [FORKED] Track nearest Suspense handler on stack
• 051ac55 [FORKED] Add HiddenContext to track if subtree is hidden

Yes, 2 times I lost my last changes

Is it possible to prevent closing the window when something changed and is not saved?

refactor: conditionally use useInsertionEffect where available (#3726)

chore: update babel setup, fix rn tests

breaking: remove react-primitives build target

The project appears to be abandonware and I wasn't able to get the tests working adequately against latest react-native.

chore: upgrade a few dependencies

breaking: update react-native aliased components to current stable list

Not every component can take a style prop, so reducing the list to what's actually supported.

breaking refactor: fix build, adjust external export interface

Using the new "exports" package.json syntax

chore: ignore bogus error in stylednativecomponent

chore: update lockfile

refactor: replace git.io within error message (#3733)

fix minor grammar mistakes (#3771)

refactor: iterate on types

chore: update vscode settings

fix: undo bad config change

chore: bump version

chore: drop tslib devDep

chore: upgrade jest

fixed bug #3793 and #3792 (#3794)

Co-authored-by: jasham.qureshi jasham.qureshi@covalensedigital.com

chore: remove unused library

chore: update benchmark bundling

fix: revert to es5 output to preserve perf

I have the same problem, is there any update?

Hi folks,

I think we need an additional button here that responsibility is to adjust the zoom level and position to fit all content like Zoom to fit in Figma

@prancoding Yes, thanks a lot 🙏🏻 so I will close this issue

Hi folks,

I think we need an additional button here that responsibility is to adjust the zoom level and position to fit all content like Zoom to fit in Figma

test: fix failing tests and API (#5823)

• tests: fix failing tests

• fix selection.test.tsx

• fix excalidraw.test.tsx and don't show image export when SaveAsImage is false in UIOptions.canvasActions

• more fixes

• require fake index db in setUp test to fix the tests

• fix regression

fix: line editor points rendering below elements (#5781)

• fix: line editor points rendering below elements

• add test

feat: refetch errored/pending images on collab room init load (#5833)

feat: clean unused images only after 24hrs (local-only) (#5839)

• feat: clean unused images only after 24hrs (local-only)

• fix test

• make optional for now

feat: tweak toolbar shortcuts & remove library shortcut (#5832)

feat: reintroduce x shortcut for freedraw (#5840)

build: stops ignoring .env files from docker context so env variables get set during react app build. (#5809)

build: stops ignoring .env.development and .env.production files from docker context so env variables get set during react app build.

• this fixes the issue where Browse Libraries button link was broken in docker/self-hosted versions of excalidraw

fix: compute dimensions of container correctly when text pasted on container (#5845)

• fix: compute dimensions of container correctly when text pasted on container

• add test

• remove only

fix: Paste clipboard contents into unbound text elements (#5849)

• Fix #5848.

• Add test.

• some tweaks

Co-authored-by: Aakansha Doshi aakansha1216@gmail.com

fix: disable FAST_REFRESH to fix live reload (#5852)

fix: merge existing text with new when pasted (#5856)

• Fix #5855.

• fix test

• tweak

• Add specs

• Add more snaps

Co-authored-by: Aakansha Doshi aakansha1216@gmail.com

build(deps): bump loader-utils from 2.0.2 to 2.0.3 in /dev-docs (#5853)

Bumps loader-utils from 2.0.2 to 2.0.3.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: loader-utils dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

fix: SVG element attributes in icons.tsx (#5871)

Update icons.tsx

build(deps): bump loader-utils from 2.0.2 to 2.0.3 in /src/packages/excalidraw (#5851)

build(deps): bump loader-utils in /src/packages/excalidraw

Bumps loader-utils from 2.0.2 to 2.0.3.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: loader-utils dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

build(deps): bump socket.io-parser from 3.3.2 to 3.3.3 (#5862)

Bumps socket.io-parser from 3.3.2 to 3.3.3.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: socket.io-parser dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

build(deps): bump minimatch from 3.0.4 to 3.1.2 in /src/packages/excalidraw (#5861)

build(deps): bump minimatch in /src/packages/excalidraw

Bumps minimatch from 3.0.4 to 3.1.2.

• Release notes
• Commits

updated-dependencies:

• dependency-name: minimatch dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

fix: Correctly paste contents parsed by JSON.parse() as text. (#5868)

• Fix #5867

• Add test.

• Add tests to clipboard.test.ts

Co-authored-by: Aakansha Doshi aakansha1216@gmail.com

build(deps): bump loader-utils from 2.0.0 to 2.0.4 in /src/packages/utils (#5874)

build(deps): bump loader-utils in /src/packages/utils

Bumps loader-utils from 2.0.0 to 2.0.4.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: loader-utils dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

fix: refresh text dimensions only after font load done (#5878)

• fix: refresh text dimensions only after font load done

• fix snaps

@behnammodi Good idea, but I have 2 notes on the code:

1. it must be done on the app-level, not the editor component level. So put the title update in the src/excalidraw-app/index.tsx same as we do currently.

I haven't checked what will need to be done for you to get the fileHandle outside the editor. To mimic what you're doing currently, you can put the document.title update into onChange() — but I'd want to throttle it or make it conditional based on title change only (I don't feel comfortable updating the title on every change).

2. the title should still contain the app name, so something like

   document.title = fileHandle?.name ? `{fileHandle.name} - {APP_NAME}` : APP_NAME
   

Base on this https://github.com/excalidraw/excalidraw/pull/5824 discussion probably we can skip this PR

Hey!

We were actually thinking of displaying the file name next to the hamburger menu:

It may even be clickable (with a :hover effect) which would save to the file.

How cool, yes it's a good idea and even we can show a * in front of the filename when we have a change after the saved file

* Untitled scene

fix: remove file extension

Yes good idea let me update it

fix: replace if with shorter condition

Co-authored-by: Aakansha Doshi aakansha1216@gmail.com

I don't know how many people use Excalidraw as a standalone web app on macOS or any OS but there is a problem when we're working on many files it would be hard to understand which file is currently opened. so like other application UX we can show the current file name on Title:

Just one thing we have to notice the menu width will be affected if filename length is long

Current situation:

After save with long filename:

But it doesn't look bad

fix: show file name on menu item

Hi folks,

I have started to use Excalidraw for my notes. I save all my Excalidraw files on iCloud. something is a little confusing for me whenever I want to save my file I don't sure which file I'm going to save so this PR maybe could resolve this issue.