Feat: Support Vuetify V4 - #45
Conversation
May be left-over from the dir change in July, need to confirm
Had to ignore the large-files commit hook
I believe at this point I'll need to alter the top-level trame packages
Since these typos are from Vuetify themselves, we can't do much here
I'm fine if this is removed before merging to master, just found it helpful for development
I notice this seemed to all work without it when I build the wheel via: `python -m build .`, added in case something relies on this file
|
Just a |
Oh whoop, looking at the blame now it seems only semantic release should be touching the version in pyproject and the |
This reverts commit 692ebf4.
|
I've looked through the code and things are reasonable. The missing part is really testing it, but I'm trusting you are trying that part on your end. Also you should put your example(s) inside the |
This contained a few important changes. First, Vite now calls the created CSS bundle the same name as the fileName specified in the config, not style.css like in v4. Secondly, Vite no longer globally injects environment variables (like process.env.NODE_ENV), so they must be explicitly defined in the Vite config so Vite can swap them out in the bundle during build This commit also bumps the transient dependencies via `npm upgrade`, as `npm audit` was flagging a few of them as containing vulnerabilities
This seems unused, confirmed the wheel still builds without it
I split up my examples from my external repo into more individual ones here in the path specified. As per the discussion about getting rid of some of the layouts for v4, I've re-implemented a drawer layout to serve as the basic.py example for v4. So if someone wants it they have some starter code to work with. The other examples are fairly cut-and-dry just showing off how to use the new lab component, although for VProgress I got a bit creative and made it an example on how to use Trame asynchronous to make a loading bar since that's likely the use-case for something like this. I did name the folder vuetify4, should I update the other folders from say vue3 -> vuetify3? Other than that the only remaining things for this PR is |
|
Sure you can reorganize the example directory. |
|
For all the new examples, try to use the TrameApp base class. |
|
Realized I built the examples around SinglePageLayout, since only VAppLayout exists now they've been updated to use that instead and I've removed DrawerLayout and SinglePageLayout from Vuetify4's exported layouts |
|
From my point of view, that PR is ready. Let me know if you feel we should merge it or old off a little bit more. |
I'll make the wheel one more time to be sure and do a final run-through over v3 and v4. Nothing since my previous run through yesterday happened that should have broken anything, but will make sure. I'll post a comment when I'm certain |
|
Alright, ran through a vuetify 3 Trame project with the wheel and it lined up exactly with trame-vuetify as currently on pypi. Then I ran though my Trame project migrated to use the vuetify 4 features and everything worked fine there as well. I feel confident this is good to merge. Thank you for all your help during the review! I wouldn't have caught those |
|
Just run one vuetify2 example using your wheel. (make sure you clear cache or use a different port) |
|
Once I have your green light on running a vue2/vuetify2 example, I'll merge it. |
|
Ran it on Edit: To be certain I copy pasted basic.py from this repo into another repo with the wheel installed and it also ran fine there after refreshing my cache |
2 participants
Description
This PR adds Vuetify v4 support to Trame Vuetify.
Version Bump + Backwards Compatibility
This should all be backwards compatible, as I generated the latest wheel containing these changes and used it in a large codebase without making any modifications and v3 seems to function just the same as it did before.
Due to this, I'm unsure if I was correct in updating the version of
trame-vuetifyitself to v4.x.x, or if this should simply be a minor version bump.Build Script
While building/testing this back and forth I ended up combining the commands mentioned in the
js-libs's READMEs into a single script, and writing another README on how to build the components using it (and thenpm buildstep). I added it to the MR in case you would consider it useful as well, if not I can have it removed.Examples?
I was unsure if the examples belong here or should be somewhere else, or even if the items produced fit with a more traditional example. As a result they live in the following repo: https://github.com/snacksbro/trame-vuetify4-demo
This contains 3 main files:
V4 Exclusive Components
At the time of this writing, the 4 new lab components are these:
Proper Migration
I also spent some time porting over an existing Trame project to properly migrate to Vuetify V4 and can say its not too much trouble. Most of it was find/replace references to removed utility classes. I didn't notice any bugs in any of their components. Had I used their CSS reset stylesheet this likely would have been trivial, although I'm sure they'll eventually deprecate the work-around in future updates to V4.
Minor Questions
trame_vuetify/module/contains files likevue3.pyandvue3_lab.py, I assume to provide backwards compatibility with projects an older import method. I didn't make a similar stub for V4 since nobody's using it yet.