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

fix: (vue-3) component rendering #5206

Merged
merged 5 commits into from
Jun 12, 2024

Conversation

Rirax
Copy link
Contributor

@Rirax Rirax commented Jun 3, 2024

Changes Overview

This PR is a step forward in fixing performance issue with large documents migrating from vue 2 to vue 3.
#5031

Implementation Approach

Our approach is to eliminate the use of Teleport to locate elements in the DOM and the need to render the app each time for each new node.
In the proposed changes we return to an implementation close to that of the vue-2 package.
Vue.extends no longer exists in vue-3, so we've added a renderComponent method to VueRenderer.ts, which reproduces its behaviour

Testing Done

Create a document requiring the rendering of more than 2000 vue components

Capture d’écran 2024-06-03 à 22 03 27

Verification Steps

Additional Notes

Checklist

  • I have renamed my PR according to the naming conventions. (e.g. feat: Implement new feature or chore(deps): Update dependencies)
  • My changes do not break the library.
  • I have added tests where applicable.
  • I have followed the project guidelines.
  • I have fixed any lint issues.

Related Issues

#5031

Copy link

netlify bot commented Jun 3, 2024

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit c61047e
🔍 Latest deploy log https://app.netlify.com/sites/tiptap-embed/deploys/66692c3e14bfc40008a111f2
😎 Deploy Preview https://deploy-preview-5206--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Rirax Rirax force-pushed the fix/vue-3-component-rendering branch from c8e5f9c to 7ca826b Compare June 3, 2024 15:32
@Rirax Rirax changed the title Fix/vue 3 component rendering fix: (vue-3) component rendering Jun 3, 2024
@Rirax Rirax mentioned this pull request Jun 4, 2024
4 tasks
@Rirax Rirax force-pushed the fix/vue-3-component-rendering branch from 2085f38 to 2789e08 Compare June 4, 2024 17:29
@Rirax Rirax force-pushed the fix/vue-3-component-rendering branch from 2789e08 to edf61b5 Compare June 4, 2024 18:31
Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very excited to see this thank you @Rirax

I'm not super confident in vue to know where the edge cases might be for something like this. Would it be alright to just put into a beta & see if we get any feedback on it from other users?

@nperez0111
Copy link
Contributor

I think that this approach could potentially help with our react integration as well. I'll need to think on how to actually do that

@nperez0111 nperez0111 merged commit 95a1d4b into ueberdosis:main Jun 12, 2024
14 checks passed
nperez0111 added a commit that referenced this pull request Jun 12, 2024
@nperez0111
Copy link
Contributor

Whoops meant to release on develop not main.
Reverted on main, and cherry-picked to develop

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

Successfully merging this pull request may close these issues.

None yet

2 participants