Overriding a DWC Route from Plugin

NineMile

Q for @chrishamm (I think).

I'm currently writing a plugin to add UI elements for the Probing system we use for the Milo CNC mill.

This includes adding a new menu item, but also involves modifying the existing UI from the plugin itself, to allow us to show further information in the status areas (things like selected tool radius and offsets, modbus status etc).

This is doable straight from a plugin because we can just register our own Vue components with the same name as the DWC ones, and these are loaded instead. All good so far.

I'd like to also modify the job status view, so that we can show relevant information rather than the current view which mostly contains irrelevant information when using it on a CNC machine.

However, I haven't worked out how to do this yet as the Job Status view is a 'route', and I haven't yet worked out how to override the Component loaded by the route.

Do you know if it's possible to override the component that gets loaded when a particular route is triggered? Is there another way to achieve this that I'm missing?

What I absolutely don't want to do is maintain my own fork of DWC - the vast majority of the code and layout works fine for our purposes, and I would much rather distribute everything in a plugin.

chrishamm

@NineMile Well, from a plugin you should be able to access the Vue router instance but I don't know how easy it is to actually replace components in it. AFAIK there was only addRoute. You might get away by adding a beforeEach hook and and by modifying the requested route before the original component is actually rendered. See also https://v3.router.vuejs.org/api/#router-instance-methods

NineMile

@chrishamm Thanks.

In true 'sods law' fashion, about 5 minutes after posting I worked it out - and beforeEach is what I ended up with:

import Vue, { VueConstructor } from "vue";
import { default as VueRouter } from "@/routes";
import OriginalJobStatus from "@/routes/Job/Status.vue";
import JobStatus from "./Job/Status.vue";

// List of original => new components to override
const overrides: [VueConstructor<Vue>, VueConstructor<Vue>][] = [
    [OriginalJobStatus, JobStatus]
];

VueRouter.beforeEach((to, _, next) => {
    overrides.forEach(([original, replacement]) => {
        if (to.matched[0].components.default === original) {
            to.matched[0].components.default = replacement;
        }
    });
    next();
});

NineMile

@chrishamm Just noticed your next branch update in the DWC source

I don't think this warrants a separate topic so I thought I'd ask here - it looks like there's some significant changes to next that I haven't really grokked yet - is the plan for it to support existing plugins?

I ask because I have some plugin plans, and it would be pointless if I were to start now with the current plugin system only to find out that these need to be rewritten to work with next. Interested to hear about your plans for next if you're willing / able to share them?

chrishamm

@NineMile next uses a very different architecture and it has several breaking changes (e.g. Vue/Vuetify v3 instead of v2, Pinia instead of Vuex, and Vite/Rollup instead of Webpack). I don't know if next will actually make it to a final DWC version, it's rather an internal unstable branch and there may be replacement UI which I will not develop.

For now, I suggest you focus on Duet Web Control v3.5/v3.6 instead of that particular branch.

NineMile

@chrishamm Gotcha. Thanks for the info