[WIP][Live] New data-rerender mode for handling custom JavaScript #519
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This was referenced Nov 2, 2022
bendavies
reviewed
Nov 2, 2022
| - ``mode`` includes ``diff`` & ``complete`` (default). ``diff`` is the | ||
| default mode used by live components where the new element is | ||
| "morphed" onto the existing element by applying a diff of changes. However, | ||
| as soon as you specify ``data-render``, ``complete`` becomes the default |
There was a problem hiding this comment.
Suggested change
| as soon as you specify ``data-render``, ``complete`` becomes the default | |
| as soon as you specify ``data-rerender``, ``complete`` becomes the default |
bendavies
reviewed
Nov 2, 2022
|
|
||
| .. code-block:: twig | ||
| <div data-render""> |
There was a problem hiding this comment.
Suggested change
| <div data-render""> | |
| <div data-rerender=""> |
|
Very nice idea, i hope it gets implemented <3 |
|
Replaced by #728 |
weaverryan
added a commit
that referenced
this pull request
Mar 16, 2023
…xternal JavaScript (weaverryan) This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Live] Smart Rendering! Mix/match live components with external JavaScript | Q | A | ------------- | --- | Bug fix? | yesish | New feature? | yes | Tickets | Fixes #702, Fixes #490, Fixes #515, Fixes #270, Fixes Bug H on #102, Fixes #354 Replaces #519 | License | MIT Hi! This fixes the biggest pain-point with LiveComponents: mixing them with custom JavaScript. Before this PR, a lot of things were difficult/weird: keeping modals open, collapsing content (#702), using JS widgets like Autocomplete or a date picker, and more. The best part? Everything works automatically with you needing to do anything. With this PR, a new philosophy is born: **start with a live component, then mix in any "extras" you want with Stimulus controllers**. The new "smart rendering" system isn't designed to catch everything (see the docs), but I think it will catch 95%+ of the situations. Here are 2 cool things that now work out-of-the-box: A) ux-autocomplete + Live components works perfectly now - even if the available options completely change - the "dependent form fields" example has been updated to use autocomplete on both fields 🔥 https://user-images.githubusercontent.com/121003/224790239-3b723fa0-1eb7-4f27-bd71-a04bf32687f1.mp4 B) I added a new demo of Live Components + Autocomplete + Chartjs. What you see is done without needing to write any JavaScript: https://user-images.githubusercontent.com/121003/224789304-ac1228a8-57eb-4797-8df0-245bd767872b.mp4 ### How Does it Work? If you care about the technical details, we leverage a `MutationObserver` to watch your component for changes made by anything *other* than live components. Those changes are "tracked". Then, during re-render, we use that info to *keep* those custom changes. Cheers! Commits ------- d142431 [Live] Smart Rendering! Mix/match live components with external JavaScript
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi!
Just the docs to start. This aims to address the biggest pain-point with live components currently: when you have add custom JavaScript to your component HTML (e.g. a date picker). If that JS modifies the markup at all (e.g. adding classes or elements), when the component re-renders, those changes are "removed" and the custom JS stops working.
This adds a very flexible model for re-rendering. However, I think the
data-rerender="if(startDate)"will handle 95% of use-cases because it will:A) Avoid re-rendering the component in most cases (e.g. similar to
data-live-ignorecurrentlyB) But if some specific
LivePropchanges (e.g.startDatefor a date picker), then it will do acompletere-render of that element, where the old element is completely replaced by a new one. That's important because it will re-trigger theconnect()method on any Stimulus controllers on (or inside) this element, which will allow them to completely re-initialize the JavaScript.Please let me know if you think this will fit your use-case. And if, not, please tell me why!
Cheers!