Wresting with TS and 3.5.beta3 Need Help !

[stuartofmt]

I really do try to solve problems and issues myself but someties (often?) - my lack of knowledge defeats me. This is especially so when I don't know what I'm doing (read javascript and typescript).

I have a plugin that is working fine in 3.4.5 and now I'm trying to port it over to 3.5 ... After hrs of frustration, I'm back to square one and need help.
I'm using Visual Studio Code and have a 3.5.beta environment set up.

I suspect there is an easy / straightforward way and my efforts so far were wildly misguided. Any help would be greatly appreciated. Appologies in advance, I simply dont know where to start in order to get it down to a simpe reproducible set of code.

This is my 3.4.5 code.

<style scoped>
	.iframe-container {
		position: relative;
		background-color: transparent;
	}
	.iframe-container iframe {
	position: absolute;
		top: 0;
		left: 0;
	}			
</style>
 
<template>
		<div class="iframe_container">
			<iframe :src= "myurl" width="100%" :height="tmpHeight" frameborder="0">
				<span>Your browser does not support iFrames</span>
			</iframe>
		</div>
</template>
 
<script>
import {mapState, mapActions} from 'vuex';
import Path from '../../utils/path.js';
import { DisconnectedError, OperationCancelledError } from '../../utils/errors.js';
 
const version = '5.2.3';
const configFile = './DuetLapse3/DuetLapse3.config';
 
export default {
	data() { 
		return{
			version: version,
			myurl: '',
			tmpHeight: "400px"
		};
	},
	methods: {
		...mapActions('machine', {machineDownload: 'download'}),
		
        //file load from @ mintyTrebor modified with return 
		async loadSettingsFromFile() {
			//Load the DuetLapse3.config file
			try {
				const setFileName = Path.combine(this.systemDirectory, configFile);
				const response = await this.machineDownload({ filename: setFileName, type: 'text', showSuccess: false, showError: false });
				this.fileContent = await response;
				//get the ip address
				let pattern = /-duet.*(?:$|\n)/i;
				let match = this.fileContent.match(pattern).toString();
				this.myurl = "http://"+ match.replace('-duet', '').trim();
				// get the port
				pattern = /-port.*(?:$|\n)/i;
				match = this.fileContent.match(pattern).toString();
				this.myurl = this.myurl + ":" + match.replace('-port', '').trim();
				console.log('DuetLapse url is ' + this.myurl);

			} catch (e) {
				if (!(e instanceof DisconnectedError) && !(e instanceof OperationCancelledError)) {
					console.warn(e);
					console.warn("File Does Not Exist");
				}
			}
		},
		getAvailScreenHeight(){
		let tmpHeight = window.innerHeight - 90;
		if(window.document.getElementById("global-container")){
			tmpHeight = tmpHeight - window.document.getElementById("global-container").offsetHeight;
		}
		if(this.showBottomNavigation) {
			tmpHeight = tmpHeight - 56;
		}
		return tmpHeight;
	}
	},
	
	// use computed instead of methods cuz we only want it to run once
	computed:{
		...mapState('machine/model', {
			systemDirectory: (state) => state.directories.system
		}),
		showBottomNavigation() {
		return this.$vuetify.breakpoint.mobile && !this.$vuetify.breakpoint.xsOnly && this.$store.state.settings.bottomNavigation;
		},

		theurl() {
			return this.myurl;
		},
		theheight() {
			return this.tmpHeight;
		}
	},
	mounted() {
		this.loadSettingsFromFile();
		this.getAvailScreenHeight();
	},
 
 
}	
</script>

when I try to build the plugin I get these error:

C:\Users\stuar\Github\DWC3.5.0>npm run build-plugin ../DuetLapse3/plugin/3.5.beta

> duetwebcontrol@3.5.0-beta.3 build-plugin
> node scripts/build-plugin.js ../DuetLapse3/plugin/3.5.beta

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


\  Building for production...[BABEL] Note: The code generator has deoptimised the styling of C:\Users\stuar\Github\DWC3.5.0\node_modules\vuetify\dist\vuetify.js as it exceeds the max of 500KB.
-  Building for production...

 ERROR  Failed to compile with 2 errors                                                                      12:00:48 PM
 error  in ./src/plugins/DuetLapse3/DuetLapse3.vue?vue&type=script&lang=js&

Module not found: Error: Can't resolve '../../utils/path.js' in 'C:\Users\stuar\Github\DWC3.5.0\src\plugins\DuetLapse3'

 error  in ./src/plugins/DuetLapse3/DuetLapse3.vue?vue&type=script&lang=js&

Module not found: Error: Can't resolve '../../utils/errors.js' in 'C:\Users\stuar\Github\DWC3.5.0\src\plugins\DuetLapse3'

 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at C:\Users\stuar\Github\DWC3.5.0\node_modules\@vue\cli-service\lib\commands\build\index.js:207:23
    at C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\webpack.js:148:8
    at C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at Cache.shutdown (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\Cache.js:150:23)
    at C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\Compiler.js:1228:15
    at Hook.eval [as callAsync] (eval at create (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.close (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\Compiler.js:1221:23)
    at C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\webpack.js:147:16
    at finalCallback (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\Compiler.js:441:32)
    at C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\Compiler.js:458:13
    at Hook.eval [as callAsync] (eval at create (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:33:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at onCompiled (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\Compiler.js:456:21)
    at C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\lib\Compiler.js:1199:17
    at eval (eval at create (C:\Users\stuar\Github\DWC3.5.0\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:14:1)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

At this point I changed the code with <script lang = "ts">. I have no idea if this is necessary but it seemed like a good idea at the time.

VSC then reports errors that I cannot make go away. In particular the two does not exist on type{} errors

The last one I can make go away because of an example from @MintyTrebor by editing this line (adding !)

tmpHeight = tmpHeight - window.document.getElementById("global-container")!.offsetHeight;

and for good measure this line (adding :boolean), also from an example from @MintyTrebor

		showBottomNavigation(): boolean {
		return this.$vuetify.breakpoint.mobile && !this.$vuetify.breakpoint.xsOnly && this.$store.state.settings.bottomNavigation;
		},

When I try to build the plugin, with just these three changes I get this wonderful (and voluminous) response

Build Errors.txt

[MintyTrebor]

@stuartofmt A few things that may help you..
In VS code make sure you have the typescript extensions/plugins installed and enabled, this will highlight the issues in your code for you and help you research/find fixes.

Compare your vuex includes and import statements to some of the standard DWC 3.5 component pages, you should notice the difference between 3.4 and 3.5 (most notably the lack of .js extensions etc), and also changes to how mapactions etc are now used.

Do a little research on typescript vs javascript. When I first tried to convert ReleaseMgr to typescript many of the issues I experienced were be down to things like declaring types for variables/objects etc. eg

isConnected(): boolean { return store.getters["isConnected"]; }

in simple terms the : boolean is the typescript method of stating that isConnected() will return a boolean value.

Typescript can take a bit of getting used to, but it really pays dividends in the long run, as it provides a much stricter way of using javascript which ultimately reduces bugs. It also helps in your development environment - for example with the typescript extensions VSCode knows when you try and assign a string value to a boolean object/variable and will highlight the issue before you compile.

There is significantly more detail to it all but this should at least get you started.

I hope this helps.

Additionally try this developer bias AI tool, I've found it quite useful : https://www.phind.com/

try entering "how do I declare a variable type in typescript" it can explain things much better than I can - in a lot less time too

[stuartofmt]

@MintyTrebor
Thanks, I'll try some more. Sadly, I'm only interested in "getting it to worK" as I have little interest in becoming a javascript / typescript programmer

I've used strongly and stricktly typed languages in the past e.g ADA , pascal, fortran (yes I'm THAT old) and understand (and support) the intent.

What has me confused, more than anything, is the apparent mix of javascript and typescript in DWC and even BtnCmd. Although, I can see that some of that might be due to a level of inheritance.

I do have the typescript extension enabled in VSCode - that is what is complaining about the does not exist on type {} error.

Thank again for the pointers - lets see how I progress ...

[MintyTrebor]

@stuartofmt Looked at your code on github - I don't think you have to switch to typescript, you just need to change the way you use the inbuilt DWC functions (which is all I did with BtnCmd). Have a look at this:

<style scoped>
	.iframe-container {
		position: relative;
		background-color: transparent;
	}
	.iframe-container iframe {
	position: absolute;
		top: 0;
		left: 0;
	}			
</style>
 
<template>
		<div class="iframe_container">
			<iframe :src= "myurl" width="100%" :height="tmpHeight" frameborder="0">
				<span>Your browser does not support iFrames</span>
			</iframe>
		</div>
</template>
 
<script>

//import {mapState, mapActions} from 'vuex';
import Path from '@/utils/path';
import store from "@/store";
import { DisconnectedError, OperationCancelledError } from "@/utils/errors";
 
const version = '0.0.1';
const configFile = './DuetLapse3/DuetLapse3.config';
 
export default {
	data() { 
		return{
			version: version,
			myurl: '',
			tmpHeight: "400px",
			fileContent: ""
		};
	},
	methods: {
		//...mapActions('machine', {machineDownload: 'download'}),
		
        //file load from @ mintyTrebor modified with return 
		async loadSettingsFromFile() {
			//Load the DuetLapse3.config file
			try {
				const setFileName = Path.combine(this.systemDirectory, configFile);
				const response = await store.dispatch("machine/download", { filename: setFileName, type: 'text', showSuccess: false, showError: false});
				this.fileContent = await response;
				//get the ip address
				let pattern = /-duet.*(?:$|\n)/i;
				let match = this.fileContent.match(pattern).toString();
				this.myurl = "http://"+ match.replace('-duet', '').trim();
				// get the port
				pattern = /-port.*(?:$|\n)/i;
				match = this.fileContent.match(pattern).toString();
				this.myurl = this.myurl + ":" + match.replace('-port', '').trim();
				console.log('DuetLapse url is ' + this.myurl);

			} catch (e) {
				if (!(e instanceof DisconnectedError) && !(e instanceof OperationCancelledError)) {
					console.warn(e);
					console.warn("File Does Not Exist");
				}
			}
		},
		getAvailScreenHeight(){
		let tmpHeight = window.innerHeight - 90;
		if(window.document.getElementById("global-container")){
			tmpHeight = tmpHeight - window.document.getElementById("global-container").offsetHeight;
		}
		if(this.showBottomNavigation) {
			tmpHeight = tmpHeight - 56;
		}
		return tmpHeight;
	}
	},
	
	// use computed instead of methods cuz we only want it to run once
	computed:{
		systemDirectory() {
			return store.state.machine.model.directories.system;
		},
		showBottomNavigation() {
		return this.$vuetify.breakpoint.mobile && !this.$vuetify.breakpoint.xsOnly && this.$store.state.settings.bottomNavigation;
		},

		theurl() {
			return this.myurl;
		},
		theheight() {
			return this.tmpHeight;
		}
	},
	mounted() {
		this.loadSettingsFromFile();
		this.getAvailScreenHeight();
	},
 
 
}	
</script>
 

I updated your code to use the new DWC functions/methods. It compiles fine on my dev environment, and loaded in the browser, but I do not have an SBC setup to fully test.

[stuartofmt]

@MintyTrebor said in Wresting with TS and 3.5.beta3 Need Help !:

@stuartofmt Looked at your code on github - I don't think you have to switch to typescript, you just need to change the way you use the inbuilt DWC functions (which is all I did with BtnCmd).

Many, many thanks. The need to switch (or not) to typescript was one of the things that I was very unsure of. Most of what I had read said "should not be necessary".
I had no idea about the change to the inbuilt functions - given a few weeks by myself, I may have stumbled on to that fact

I've compiled and tested on my end and everything is workin just fine. Again THANK YOU !!