Building DWC plugins with plain Javascript

resam

I'm trying to convert one of my Tampermonkey scripts to a DWC plugin and struggle to find the correct way of compiling everything so that DWC actually serves my .js files and executes them in the browser.

I've looked at https://github.com/Duet3D/DSF-Plugins/tree/master/EndstopsMonitor but the build instructions seem a bit out of context - and I couldn't match the instruction up with the DWC repo either.

Are plain plugins with Javascript supported or does everything need to be Vue? Looking at the EndstopsMonitor downloadable zip, it seems everything is webpack'd? DWC always installs my zip file just fine - but obviously it silently swallows any potential errors I might have introduced.

I just want to execute some lines of JS code that I previously had in a Tampermonkey script to insert a few buttons and text fields - I am well aware of the "dangers" by messing around with the DOM too much and that Vue might not like any of it - but thats the "easiest for me" approach.

@MintyTrebor it sounds like you have figured it out for your BtnCmd, but I couldn't find any magical "packaging" commands in your repo either...

Sindarius

@resam If you are not looking to setup any pages/tabs for your plugin you could simply start your javascript in the index.js of your plugin. If you create a plugin with just an index.js and put the following in you'll see the ticks show up every second in the console.

setInterval(() => {
    console.log(Date.now())
}, 1000)

As soon as the plugin is loaded the console will start getting updated time. I am assuming you are using TamperMonkey to fidget with the DOM on the rest of the site. You should be able to initialize it in your index.js. Granted I don't personally recommend tampering with the DOM on the DWC cause you could break bindings that are used to render information.

Once you've built your instance of DWC with your plugin using npm run build You'll have chunks in the dist js/css folders that match the webpack chunk which will go into your zip file. There's no auto-packaging in place today.

MintyTrebor

@resam - @Sindarius is correct you can just execute on the index.js, although I do not know how that may impact "other" installed plugins. My build/packaging process its essentially what @Sindarius said:

(assuming DWC v3.3)

npm run build

create a folder for working eg - 'releasexxx'
create 'dwc' folder in 'releasexxx'
copy pluginname.xx from dist/js and dist/css into 'releasexxx/dwc'
create/update plugin.json and copy into 'releasexxx'
compress 'dwc' folder and plugin.json into pluginname.zip inside the 'releasexxx' folder

chrishamm

@resam TBH I've never tried plain JavaScript plugins with DWC but I see no reason why they would not work. You'd only have to create a plugin manifest and add your JS file with the ID in the filename to the plugin's dwc directory, ZIP it, and then install it. The Webpack loader code should import your JS file as usual using a plain <script> tag as soon as it's started.

resam

Ok - so here is how you can take full advantage of the pre-compile steps from DuetWebControl (skip ahead if you don't have a complex plugin):

git clone https://github.com/Duet3D/DuetWebControl.git
cd DuetWebControl
git checkout v3.3-dev
npm install

Then call a heart and blood pressure specialist doctor due to:
25 vulnerabilities (13 moderate, 12 high) and tons of this library is no longer supported messages...

Then add the following snippet to the big plugin array/list at the bottom of src/plugins/index.js to include your new plugin:

	new DwcPlugin({
		id: 'MyNewPluginID',
		name: 'My-New-Plugin',
		author: 'Thomas Kriechbaumer',
		version,
		loadDwcResources: () => import(
			/* webpackChunkName: "MyNewPluginID" */
			'./MyNewPluginID/index.js'
		)
	}),

Then continue with:

# still in the root dir of DuetWebControl repo
cd src/plugins/
mkdir MyNewPluginID
cd MyNewPluginID
echo 'console.log("Hello World!");' > index.js
npm run build

This will create 4 new files with MyNewPluginID.123abc.<different-extensions> under dist/js/. Copy those into your plugin ZIP file under dwc/js/.

And essentially all this can be shortened by directly doing this:

Create a ZIP file with these files:

MyNewPluginID.zip
  - plugin.json
  - dwc/
    - js/
      - MyNewPluginID.js

With plugin.json being this:

{
    "id": "MyNewPluginID",
    "name": "My-New-Plugin",
    "author": "Thomas Kriechbaumer",
    "version": "1.0.0",
    "license": "MIT",
    "homepage": "http://example.com",
}

(observe that I did not mention dwcFiles - it will figure itself out that there is a .js file to copy into the right place.

With MyNewPluginID.js being this:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([
    ["MyNewPluginID"], {
        "./src/plugins/MyNewPluginID/index.js": function (e, t, n) {
            "use strict";

             console.log("Hello World");
             // YOUR CODE HERE!
        }
    }
]);

Not sure if this is the best way to build new plugins, but it worked for me.

Sindarius

@resam yep that is essentially the process for building a plugin. Sorry my earlier post I assumed you had gotten to the point of making the plugin.

theKM

@resam , this was handy info, but took a bit more scratching around to see that the script files need to be in 'dwc' directory...

MyNewPluginID.zip
  - plugin.json
  -  dwc/js/
    - MyNewPluginID.afbaaab6.js
    - MyNewPluginID.afbaaab6.js.gz
    - MyNewPluginID.afbaaab6.js.map
    - MyNewPluginID.afbaaab6.js.map.gz

resam

@thekm true, I'm missing the dwc folder, but are you missing the js folder inside of it?

Thanks - I've updated my above post!

theKM

@resam ...I simply tried renaming js to dwc and it worked... apparently if uploaded to the controller through DWC, it throws js files into the js directory and CSS into the css directory. Not sure what it does if you use a more complicated structure for some reason...