Add support for Alpine morph and custom morphers #597
Conversation
|
I created a demo project and recorded a video to show how it works: |
|
@adamghill, when you have time, could you please take a look at 5f240f5 where I document the future state of custom morphers and let me know if you have any feedback? Thanks! |
|
@adamghill, everything except tests is ready for the review. If you're OK with my work so far, can you please pick it up from here. Alternatively, can you please help me understand which tests should I add and modify to make it work? Thanks! |
imankulov
changed the title
| } | ||
|
|
||
| morph(dom, htmlElement) { | ||
| if (htmlElement) { |
There was a problem hiding this comment.
@adamghill, frankly, I couldn't understand why morph is sometimes called with an empty string as "htmlElement".
adamghill
force-pushed
the
experiment/alpine-morph
branch
from
cff17b6 to
8ddec42
Compare
To replace morphdom wih Alpine morph:
Add to your base template:
<script defer src="https://unpkg.com/@alpinejs/morph@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
Add to your settings:
UNICORN = {
"MORPHER": "alpine",
}
Ref: https://alpinejs.dev/plugins/morph
Add "Custom Morphers" document page. The documentation assumes that we support two morphers: "morphdom" and "alpine", and that each morpher can be configured with the "MORPHER_OPTIONS" attribute. Besides, RELOAD_SCRIPT_ELEMENTS moves from the top level to a morpher-specific setting, and is considered an option that is only supported by morphdom.
- Define AlpineMorpher and MorphdomMorpher classes with morph() methods.
- Instantiate one of the morphers in the {% unicorn_scripts %} templatetag and
pass it to Unicorn.init()
- Update the message sender to use component.morpher.morph()
Add the namespace similarly to how it's done for "unicorn:data"
Skip morphing if htmlElement is an empty string.
adamghill
force-pushed
the
experiment/alpine-morph
branch
from
8ddec42 to
458686c
Compare
This looks like a good start! I'll probably tweak it a bit when I get a change, but thanks for writing up all of this. I rebased |
|
Thanks a lot for picking up where I left off, @adamghill! I'm looking forward to having these changes merged. 🙌 |
Make it possible to use as Unicorn.getMorpher() in the minimized script.
By the time we run the constructor, Alpine may not be loaded yet.
imankulov
force-pushed
the
experiment/alpine-morph
branch
from
a6a83af to
4995b26
Compare
|
Here is the summary of the last commits that I made yesterday and today. I was almost ready to use "alpine-morph" in production, but then I found that alpine.min.js, which is used when DEBUG is False, is not up-to-date with the source code. Additionally, the getMorpher() function needs to be moved to a Unicorn namespace so that it can be accessed from the minified version. Finally, I discovered that Alpine and Alpine morph will be loaded after our script (as they are loaded with <script defer>), which causes the Alpine morpher constructor to throw an "Alpine not found" exception. To address these changes:
In addition to this, I created a separate PR #604 to ensure that unicorn.min.js is always up to date with the source code. |
|
@imankulov Thanks for all your work for this PR. This got merged into |
|
@imankulov I ended up releasing 0.56.1 with another fix for the Alpine morpher. Can you try it out and let me know if you run into any problems? |
|
@adamghill, I have tested version 0.56.1 with my codebase that uses the Alpine morpher, and everything appears to be functioning correctly 🎉 Thank you very much for completing and merging the PR. |
To replace morphdom wih Alpine morph:
Add to your base template:
Add to your settings:
Ref: https://alpinejs.dev/plugins/morph