How to define electron only packages?

[stuartcusack]

I’m building an Electron app and I want to use this Electron package:
https://github.com/bithavoc/node-desktop-idle

This package is specifically made for node / electron so the code will not work on a regular single page app.

My question is, how do I require and use this package in Electron mode only? Electron is completely new to me so I have no idea. I’m hoping there’s any easy way to define Electron packages in quasar.conf but I can’t figure it out.

Thank you.

[stuartcusack]

I made some progress…

Here is my electron-main.js file. My code is highlighted as MYCODE. It’s mostly the default electron-main.js file:

import { app, BrowserWindow } from 'electron'

// **MYCODE**: 
//  I don't think import works for this package but require does
var desktopIdle = require('desktop-idle');

/**
 * Set `__statics` path to static files in production;
 * The reason we are setting it here is that the path needs to be evaluated at runtime
 */
if (process.env.PROD) {
  global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\')
}

let mainWindow

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    useContentSize: true
  })

  mainWindow.loadURL(process.env.APP_URL)

  // **MYCODE**: 
  // Is this how we communicate with Vue??
  // Send the idle time to our web renderer every three seconds
  // I will check within my app for this message
  setInterval(function(){ 
    mainWindow.webContents.send("set-idle-time", desktopIdle.getIdleTime()); 
  }, 3000);

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

Then within any component or page component I can do this:

mounted: function() {

  if (this.$q.platform.is.electron) {
    
    this.$q.electron.ipcRenderer.on('set-idle-time', (e, time) => {
        
       console.log(time);

    })}
}

This works fine but please let me know if any body knows of a nicer or cleaner way to load electron only packages.

[stuartcusack]

I’m trying to fix the spacing in my code above but “content flagged as spam by Askimet??”

[metalsadman]

@stuartcusack said in How to define electron only packages?:

I’m trying to fix the spacing in my code above but “content flagged as spam by Askimet??”

just wait few mins and submit your edit again.

[stuartcusack]

@metalsadman thank you. The throttling seems a bit excessive in this forum. Bloody askimet. Reminds me of WordPress.

Loving quasar though. Will update this post if I find a better way to use Electron packages.

[Hawkeye64]

@stuartcusack You could also use this package instead: https://www.npmjs.com/package/idle-vue

[stuartcusack]

Cheers. I’m not sure if that package handles desktop applications though. Browsers don’t have access to desktop idle time and that’s important for my needs (it’s an electron app). Maybe it does support desktop platforms but they don’t seem to mention it.

My above solution seems to work well so far.