✨ Add support for user-mounted widgets

[Lissy93]

Category: Feature

---

Overview

Just an idea...

This PR would allow a user to mount a custom widget.

Usage:

Create a widget, and mount it into the Widgets directory.
Sub-folders are allowd, so can be mounted as directory.

Then list that widget under appConfig.customWidgets, like:

appConfig:
  theme: colorful
  customWidgets:
  - identifier: my-component  # How the component should be referenced
    component: MyComponent    # Must match the widget component's file name

Then use it like normal:

sections:
- name: Example Section
  widgets:
  - type: my-component

Limitations:

• Rebuild is required
• Currently, must be placed within Components/Widgets directory
• Typo in configuration (file name or identifier) will throw error not handled by UI

Todo:

• Bit more research, to see if there is a better option
• If proceeding, then add docs and update schema

---

Issue Number this comment

New Vars
// TODO

Screenshot N/A

Code Quality Checklist (Please complete)

• All changes are backwards compatible
• All lint checks and tests are passing
• There are no (new) build warnings or errors
• (If a new config option is added) Attribute is outlined in the schema and documented
• (If a new dependency is added) Package is essential, and has been checked out for security or performance
• Bumps version, if new feature added

[netlify]

✅ Deploy Preview for dashy-dev ready!

Name	Link
🔨 Latest commit	51002b4
🔍 Latest deploy log	https://app.netlify.com/sites/dashy-dev/deploys/62b6235783abe10008ed2725
😎 Deploy Preview	https://deploy-preview-761--dashy-dev.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[viezly]

Changes preview:

Legend:

👀 Review pull request on Viezly

[patrickheeney]

This looks great. We could modify the COMPAT object to have the full path to the component. 'adguard-dns-info': '@/components/Widgets/AdGuardDnsInfo.vue',. Then when declaring customWidgets the component could be component: @/any/src/NewWidget.vue so you are not locked to any directory.

Maybe that means you could mount something pre-compiled in node_modules and it might work? Ideal UX would be yarn add dashy-widgets and a post install builds it. Mount the dist directory and add the ones you want to use in customWidgets. My docker dev machine is currently down so I can't test yet.

I think technically you don't need to define customWidgets as the code currently reverts to this.widget.type when detecting the type. This means you could do something like -type: @/any/src/NewWidget.vue and it should work. But maybe it would be better UX having to define customWidgets so you could output an error if the widget doesn't exist in COMPAT rather than fall back to this.widget.type and assume it is a path.

This might address 2 out of 3 limitations. Maybe 3 if its possible to precompile and mount that instead.

[patrickheeney]

I experimented with the vue bundles a little bit trying to figure out the precompiled route. I tried exporting as wc and a lib. Because of the optimizations and bundle chunking I don't think it would be easy to inject that into the page, not without being too hacky. I am not sure https://github.com/FranckFreiburger/vue3-sfc-loader could work for more complex components that have dependencies.

I am thinking the build is probably unavoidable at this point with this approach. The upside is everything is minified and chunked as expected which will probably come in handy with multi-page support and dynamically loading only the chunks that are necessary.

GitHub - FranckFreiburger/vue3-sfc-loader: Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.

Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step. - GitHub - FranckFreiburger/vue3-sfc-loader: Single File Component lo...

[liss-bot]

This PR is stale because it has been open 6 weeks with no activity. Either remove the stale label or comment below with a short update, otherwise this PR will be closed in 5 days.

[patrickheeney]

@Lissy93 Would you be able to share some insight as to why this was closed? No longer interested in the feature, pursuing a different implementation, etc? Thanks!

[liss-bot]

This PR is stale because it has been open 6 weeks with no activity. Either remove the stale label or comment below with a short update, otherwise this PR will be closed in 5 days.