Properly support electron

digaus commented 3 years ago

Is your feature request related to a problem? Please describe.

Currently for electron we need to include a bunch of stuff in the index.html and call a different plugin.

Describe the solution you'd like

With https://github.com/capacitor-community/electron this is not needed anymore and we can inlcude it without these hacks.

An example for a plugin can be found here: https://github.com/digaus/community-capacitor-wifi

We should do this before the refactor: https://github.com/capacitor-community/sqlite/issues/1#issuecomment-609435959

jepiqueau commented 3 years ago

@digaus this was on my plan since @capacitor-community/electron is out but i didn't find the time to do it yet. the refactor #1 is not in the plan yet it is a huge task and i certainly do not want to do it alone

jepiqueau commented 3 years ago

@digaus i started the conversion of the electron plugin see https://github.com/capacitor-community/sqlite/tree/dev-electron/electron it builds nicely but when i used it in the angular application see https://github.com/jepiqueau/angular-sqlite-app-starter/tree/dev-electron/electron the build failed

ERROR in ./electron/node_modules/@capacitor-community/electron-core/dist/esm-electron/CapacitorElectronApp.js
Module not found: Error: Can't resolve 'fs' in '/Users/queaujeanpierre/Documents/StencilWebComponent/publishApps/starterApps/angular-sqlite-app-starter/electron/node_modules/@capacitor-community/electron-core/dist/esm-electron'
resolve 'fs' in '/Users/queaujeanpierre/Documents/StencilWebComponent/publishApps/starterApps/angular-sqlite-app-starter/electron/node_modules/@capacitor-community/electron-core/dist/esm-electron'
  Parsed request is a module

i have no idea could you have a look ?

digaus commented 3 years ago

https://github.com/capacitor-community/sqlite/tree/dev-electron/electron

Did you build the electron plugin before installing? Did not have this issue with my plugin. Maybe you can try checkout my plugin and copy your code there?

jepiqueau commented 3 years ago

@digaus Can you share a small app where you use your plugin i need to see the package.json of that app

digaus commented 3 years ago

@digaus Can you share a small app where you use your plugin i need to see the package.json of that app

{
  "name": "Ionic App",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@capacitor-community/electron": "^1.2.3",
    "@capacitor-community/wifi": "file:../../wifi",
    "@capacitor/android": "^2.4.1",
    "@capacitor/core": "2.4.1",
    "@capacitor/ios": "^2.4.1",
    "@ionic/angular": "^5.0.0",
    "node-wifi": "^2.0.13",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "~10.0.5",
    "@angular/compiler": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@angular/language-service": "~10.0.0",
    "@capacitor/cli": "2.4.1",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.12.62",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "description": "An Ionic project"
}

jepiqueau commented 3 years ago

@digaus I have clone your plugin, install it and run npm run build and npm run build-electron an created a blank ionic app with the following package.json

{
  "name": "myApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@capacitor-community/electron": "^1.2.3",
    "@capacitor-community/wifi": "file:../community-capacitor-wifi",
    "@capacitor/core": "2.4.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "node-wifi": "^2.0.13",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "~10.0.5",
    "@angular/compiler": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@angular/language-service": "~10.0.0",
    "@capacitor/cli": "2.4.2",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.12.62",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "description": "An Ionic project"
}

the home page is as follow

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import * as WiFiWebPlugin from '@capacitor-community/wifi';
import * as WiFiElectronPlugin from '@capacitor-community/wifi/electron/dist/esm/electron/src';

const { Wifi, Device } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  wifi: any;

  constructor() {}
  async ngAfterViewInit() {
    const info = await Device.getInfo();
    if (info.platform === "ios" || info.platform === "android") {
      this.wifi = Wifi;
    } else if(info.platform === "electron") {
      this.wifi = WiFiElectronPlugin.Wifi;
    } else {
      this.wifi = WiFiWebPlugin.Wifi ;
    }

    const res = await this.wifi.getIp(); 
  }

}

After this i did

npm run build
npx cap add @capacitor-community/electron
npx cap update
npm run build

in the second build i got the following error

WARNING in Circular dependency detected:
electron/build/index.js -> electron/build/index.js

ERROR in ../community-capacitor-wifi/electron/dist/esm/electron/src/plugin.js
Module not found: Error: Can't resolve 'child_process' in '/Users/queaujeanpierre/Documents/Ionic5Apps/community-capacitor-wifi/electron/dist/esm/electron/src'
resolve 'child_process' in '/Users/queaujeanpierre/Documents/Ionic5Apps/community-capacitor-wifi/electron/dist/esm/electron/src'
  Parsed request is a module
  using description file: /Users/queaujeanpierre/Documents/Ionic5Apps/community-capacitor-wifi/package.json (relative path: ./electron/dist/esm/electron/src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
...

What is wrong in the home page?

jepiqueau commented 3 years ago

@digaus i found the issue, i will look i sqlite works now thanks for your help

jepiqueau commented 3 years ago

@digaus well i made yours wifi working now if i duplicate from the folder wifi and rename it wifi2 go in the code change the Wifi by Wifi2 run npm build and npm build-electron then add it to the home page

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import * as WiFiWebPlugin from '@capacitor-community/wifi';
import * as WiFi2WebPlugin from '@capacitor-community/wifi2';

const { Wifi, Device,  Wifi2 } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  wifi: any;
  wifi2: any;

  constructor() {}
  async ngAfterViewInit() {
    const info = await Device.getInfo();
    if (info.platform === "ios" || info.platform === "android") {
      this.wifi = Wifi;
      this.wifi2 = Wifi2;
    } else if(info.platform === "electron") {
      this.wifi = Wifi;
      this.wifi2 = Wifi2;
      console.log('in electron platform this.wifi ' + this.wifi.config.name + " " + this.wifi.config.platforms)
      console.log('in electron platform this.wifi2 ' + this.wifi2.config.name + " " + this.wifi2.config.platforms)
    } else {
      this.wifi = WiFiWebPlugin.Wifi ;
      this.wifi2 = WiFi2WebPlugin.Wifi2 ;
      console.log('in web platform this.wifi ' + this.wifi.config.name + " " + this.wifi.config.platforms)
      console.log('in web platform this.wifi2 ' + this.wifi2.config.name + " " + this.wifi2.config.platforms)
    }

    const res = await this.wifi.getIP(); 
    console.log("res " + JSON.stringify(res))
    const res2 = await this.wifi2.getIP(); 
    console.log("res2 " + JSON.stringify(res2))
  }

i got the following result

vendor-es2015.js:61744 Angular is running in development mode. Call enableProdMode() to enable production mode.
home-home-module-es2015.js:5798 in electron platform this.wifi Wifi electron
home-home-module-es2015.js:5799 in electron platform this.wifi2 Wifi2 web
home-home-module-es2015.js:5811 res {"ip":"192.168.1.78"}
home-home-module-es2015.js:138 in web plugin not implemented
home-home-module-es2015.js:5813 res2 {"ip":null}

As you can see when using wifi the this.wifi got the correct platform electron , using wifi2 the this.wifi2 got the wrong platform web and then return not implemented It is exactly the same behaviour i have now with sqlite. Have you build electron itself or did something else when creating the wifi plugin?

digaus commented 3 years ago

@jepiqueau That looks odd. Maybe you forgot to change to Wifi2 somewhere. Anyways You should propably just generate a fresh plugin and copy your code there.

I also just import and use it like this (no need to declare or modify the variables):

import '@capacitor-community/wifi';

import { Component } from '@angular/core';
import { FilesystemDirectory, GetUriResult, PluginRegistry, Plugins } from '@capacitor/core';
import { Platform } from '@ionic/angular';

const { Wifi, Filesystem }: PluginRegistry = Plugins;

  Wifi.getIP().then(console.log)
  Wifi.getSSID().then(console.log)

jepiqueau commented 3 years ago

@digaus Did you do anything special to have your plugin into the electron/plugins/plugin.js-e6306aba0ce2b64828951551d09b09c3.js file of your app ?

jepiqueau commented 3 years ago

@digaus Did you copy it manually?

jepiqueau commented 3 years ago

@digaus I finally found the solution, in fact each time you add a new plugin to an existing app you have to remove the electron platform an redo a npx cap add @capacitor-community/electron because it is during that process that there is Updating Electron Plugins process

digaus commented 3 years ago

@digaus I finally found the solution, in fact each time you add a new plugin to an existing app you have to remove the electron platform an redo a npx cap add @capacitor-community/electron because it is during that process that there is Updating Electron Plugins process

Oh yeah I thought that was obvious ;) calling npx cap sync @capacitor-community/electron should work aswell or?

jepiqueau commented 3 years ago

@digaus are you also doing npx cap copy @capacitor-community/electron as when doing npx cap copy you got a warning [warn] The electron platform is deprecated! Now for the sqlite plugin the question is where do i install the sqlite3 package in the plugin or in the app because i was doing electron-rebuild -f -w sqlite3 in the app before. I am currently trying to figure out

digaus commented 3 years ago

@digaus are you also doing npx cap copy @capacitor-community/electron as when doing npx cap copy you got a warning [warn] The electron platform is deprecated! Now for the sqlite plugin the question is where do i install the sqlite3 package in the plugin or in the app because i was doing electron-rebuild -f -w sqlite3 in the app before. I am currently trying to figure out

I am always doing npx cap sync @capacitor-community/electron but will check later. I added my node dependency by just running npm install node-wifi on the app which uses the plugin. So maybe just add it there aswell?

jepiqueau commented 3 years ago

this issue is now fixed

digaus commented 3 years ago

Your definitions look strange:

    const info = await Device.getInfo();
     if (info.platform === "ios" || info.platform === "android") {
       this._sqlite = CapacitorSQLite;
     } else if(info.platform === "electron") {
       this._sqlite = CapacitorSQLPlugin.CapacitorSQLiteElectron;
     } else {
       this._sqlite = CapacitorSQLPlugin.CapacitorSQLite;
     }

There is no need to make this cases. Just use

 import * from  '@capacitor-community/sqlite';
 const { CapacitorSQLite} = Plugins;

 CapacitorSQLite.open(/** */)

jepiqueau commented 3 years ago

@digaus Do you want me to add you as a contributor as you spent quite a time in supporting me till i get there. Thanks for your help

capacitor-community / sqlite

Properly support electron #42