I want to use qt's webchannel module with my PySide6 app which uses Nuxtjs with Vuejs for the frontend and backend of storage, though I am running into an issue.
When I use:
new QWebChannel(window.qt.webChannelTransport, (channel: any) => {
this.backend = channel.objects.backend;
});
I get an error saying qt is not defined I tried fixing that by declaring qt in Window interface:
declare global {
interface Window {
qt?: any;
}
}
That did remove the error message but it didn't fix the issue.
Related
I am writing custom plugin and need to create CSS custom properties from inside of it. In SPA mode everything is fine, but SSR mode is where the troubles coming. What I need is just to put my method inside of a mounted() hook. Is it possible?
export default {
install(app, options) {
createCSSVariables()
function createCSSVariables(options) {
const root = document.documentElement // this can't be working on server side :(
root.style.setProperty('--font-family', options.font_family)
root.style.setProperty('---accent', options.colors.accent)
}
}
}
I am using nuxt and could just use 'client' flag in plugin, but since it is for UI library, this will not help much - in this scenario all the elements would flicker right after mount
So I am coding a VueJS and ElectronJS template which can be found here: https://github.com/dev-aethex/electronjstemplate
My code works something like this,
Inside of my Vue component I access a global pre constructed class called MainProcessInterface and when it's constructed it first checks if vue is compiled for running in a development server. If it's in a dev server it will connect to the dev socket which electrons main process will host if electron is in dev mode and not compiled. This method seems to be working great, I had to use a socket because vue dev server is being loaded into electron via loadURL and so vue has no clue what ipcRenderer is. Inside the main process interface, if vue is compiled it will instead use the ipcRenderer.send() method. This is were the problem was born.
As soon as Vue runs thought the TS code, it sees ipcRenderer.send and freaks out while printing an error to the electron window console saying fs.existsSync does not exist or is defined.
I can't find a way around this. I though maybe i'll split MainProcessInterface into 2 peices, one for ipc and the other for websockets. Although it isn't a very good way, so before implementing it, I would like to know if there is a better more proper way of doing such.
I had a similar issue with React. Are you importing the ipcRenderer object somewhere in your build process? You might want to make sure it references the correct variable. I tried to drop this in as a comment but it wouldn't fit:
//index.html (index.ejs) for me... This is in the main HTML entry point
var IPC = null;
try {
IPC = require('electron').ipcRenderer;
console.log('IPC IS: ' + IPC)
} catch (err) {
console.log('CRICITCAL ERROR: IPC NOT ENABLED')
console.log(err)
IPC = null;
}
Then I initialize off that context in React with a startup here:
setTimeout(()=>{
console.log('----------------HACK FIRED POST REHYDRATE')
window.REDUX_STORE.dispatch(
(dispatch, getState) => {
const _state = getState()
if(window.IPC) {
if(_state.osc && _state.osc.on) {
dispatch( reconnectToEos() )
} else {
dispatch( updateStatus('[OSC Startup: DISCONNECTED]', ))
}
console.log('\t------------ELECTRON')
} else {
//Shut off OSC
dispatch( updateOscKey('on', false) )
dispatch( updateStatus('[WebApp, OSC disabled]', ))
console.log('\t------------WEB')
}
}
)
}, 1000)
Basically I'm using a global variable (window.IPC) to initialize my app so I don't import a bad variable in my build process. I have a fair number of Electron APIs where this alleviates the issues with building via Webpack.
I hope this helps!
I'm currently working on internationalizing a system built with single-spa (microfrontends) with applications written on Angular and React.
I started using i18next and it's going pretty well, however, I've found a problem when trying to share the i18next dependency between all the applications.
When two applications are mounted simultaneously on the view the one who loads last overrides the i18next instance and thus the translations for the first one are never found as they were not loaded on the latter.
Thanks in advance!
It is better that I18next will be initialized at the shell level with the shell namespaces, and each internal spa will add its namespaces to the shared instance.
This way you won't have duplication of instance & code.
You can use [i18next.addResourceBundle][1] in order to add translation resources that are related to the current inner app.
i18next.addResourceBundle('en', 'app1/namespace-1', {
// ----------------------------------^ nested namespace allow you to group namespace by inner apps, and avoid namespace collisions
key: 'hello from namespace 1'
});
Pass the i18next instance as props to the inner app.
// root.application.js
import {i18n} from './i18n';
// ------^ shells i18next configured instance
singleSpa.registerApplication({
name: 'app1',
activeWhen,
app,
customProps: { i18n, lang: 'en' }
});
// app1.js
export function mount(props) {
const {i18n, lang} = props;
i18n.addResourceBundle(lang, 'app1/namespace-1', {
key: 'hello from namespace 1',
});
return reactLifecycles.mount(props);
}
Hope that the idea is clear :]
[1]: https://www.i18next.com/how-to/add-or-load-translations#add-after-init
I'm trying to follow this example of how to use aurelia in a multiple page application.
http://patrickwalters.net/creating-multipage-apps-using-aurelia-2/
When i do
aurelia.start().then(a => {
let start = 'app'
a.setRoot(start);
});
i receive the following error:
Unable to find module with ID: app
I already made this work with require. Maybe a thing with webpack?
In the example 'start' receive a string from body element, i just want to make it easy to follow
Webpack requires you to use PLATFORM.moduleName to declare your modulenames, see the docs: https://github.com/aurelia/webpack-plugin/wiki/Managing-dependencies
So you would need to write
import { PLATFORM } from "aurelia-pal";
...
aurelia.start().then(a => {
let start = PLATFORM.moduleName('app');
a.setRoot(start);
});
I am importing expressjs like this:
import { Request, Response, Application, Router } from 'express';
const app: Application = require('express')();
and in typings.json:
"express": "registry:npm/express#4.14.0+20160925001530",
when i type app.close() i get:
[ts] Property 'close' does not exist on type 'Application'.
How can i solve this?
Where can i report this? (if it is a bug)
Am i the only one struggling alot with typescript typings?
The definition of Application provided does not have the method close...Server does and (app:Application).listen returns a Server.
start(){
server = app.listen(options.port, function () {
debug('Server listening on port ' + options.port)
})
}
stop(){
server.close();
}
You can report typings that are Definitely typed here. This is the package coming from npm.
Typescript is hard.