Skip to content

Revamp custom widget guide #2080

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

Merged
merged 2 commits into from
May 24, 2025
Merged

Revamp custom widget guide #2080

merged 2 commits into from
May 24, 2025

Conversation

ryan-pratt
Copy link
Contributor

No description provided.

@ryan-pratt ryan-pratt requested a review from jmthomas May 20, 2025 21:29
Copy link

codecov bot commented May 20, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.14%. Comparing base (f80a07a) to head (c015655).
Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2080      +/-   ##
==========================================
- Coverage   79.17%   79.14%   -0.03%     
==========================================
  Files         631      631              
  Lines       47531    47536       +5     
  Branches      754      754              
==========================================
- Hits        37631    37621      -10     
- Misses       9817     9832      +15     
  Partials       83       83              
Flag Coverage Δ
python 84.08% <ø> (-0.08%) ⬇️
ruby-api 71.36% <ø> (ø)
ruby-backend 82.91% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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.

Copy link
Member

@jmthomas jmthomas left a comment

Choose a reason for hiding this comment

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

Nice updates ... this will be much easier to follow.

// If you need to access telemetry data:
created() {
// This is provided by the Widget mixin
this.addSubscription({ item: this.itemName })
Copy link
Member

Choose a reason for hiding this comment

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

I couldn't find addSubscription anywhere. Plus you're not even using this except for console.log. Perhaps this should just go away. You need to import VWidget.js mixin for typical value widgets.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's what I get for hurriedly asking Claude to do the example code right before I push 🤦‍♂️

},
rollupOptions: {
external: ['vue', 'vuetify'],
},
Copy link
Member

Choose a reason for hiding this comment

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

Our example widgets (BigWidget, HelloworldWidget) also have these lines:

  plugins: [vue(), VitePluginStyleInject()],
  resolve: {
    extensions: [...DEFAULT_EXTENSIONS, '.vue'], // not recommended but saves us from having to change every SFC import
  },

Are these not needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Lol, I think my logic was that those are specific to building a widget with Vue, but they can use any framework (or no framework), so I omitted it. But that doesn't make sense since this guide is for Vue. I'll add it


If you look at the bottom of the Demo's [plugin.txt](https://github.com/OpenC3/cosmos/blob/main/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/plugin.txt) file you'll see we declare the widgets:
If you have an existing plugin, start in the root directory for that plugin. If you do not yet have a plugin, start by using the [Plugin Generator](../getting-started/generators#plugin-generator) to create one.
Copy link
Member

Choose a reason for hiding this comment

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

We should add a note to the effect that you either have widgets or tools in your plugin but not both. I remember having both caused a lot of weird build issues.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

TIL

@ryan-pratt ryan-pratt requested a review from jmthomas May 23, 2025 16:16
Copy link

Copy link
Member

@jmthomas jmthomas left a comment

Choose a reason for hiding this comment

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

Did you regenerate the docs folder when you made these changes?

I'll regen in #2082 if not.

@jmthomas jmthomas merged commit 8ba09ba into main May 24, 2025
30 checks passed
@jmthomas jmthomas deleted the docs/widgets branch May 24, 2025 18:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants