feat: Vue AFM bridge

[aryan02420]

Hey, awesome project! 🎉

I wanted to create some custom widgets using Vue, and since you already have packages for React and Svelte, I decided to contribute the Vue binding code.

The API of the Vue binding is very similar to the @anywidget/react package. The major difference is that instead of returning a getter-setter pair from useModelState, we return a ShallowRef which can be mutated directly (eg. value++). This is more idiomatic to Vue's reactivity system.

Current Status

I haven't figured out how to get HMR to work, so for now, you’ll need to restart the kernel for updated JS/CSS files to be picked up. If this can be addressed in a patch release, great! Otherwise, I’ll revisit it in a few days to troubleshoot further.

Demo

You can check out a demo of this package on the branch aryan02420:demo/vue-bridge.

[changeset-bot]

⚠️ No Changeset found

Latest commit: a820edc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[manzt]

Thank you very much for the contribution. I have been on vacation and traveling and will be able to take a look this week. I really appreciate your patience.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.73%. Comparing base (12ca2f8) to head (a820edc).
Report is 317 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #854      +/-   ##
==========================================
- Coverage   98.45%   96.73%   -1.72%     
==========================================
  Files           8        9       +1     
  Lines         452      551      +99     
==========================================
+ Hits          445      533      +88     
- Misses          7       18      +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[manzt]

Wow, thanks so much for the contribution! I'm not super familiar with the idiomatic Vue patterns so I really appreciate the thought that went into this. Tried it out and things worked really well.

I agree, we can try to sort out HMR in a separate PR!

[manzt]

Thanks again for the contribution! Released https://github.com/manzt/anywidget/releases/tag/%40anywidget%2Fvue%400.1.0