Git Product home page Git Product logo

Comments (18)

jepiqueau avatar jepiqueau commented on June 1, 2024 1

this issue is now fixed

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

@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

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

@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 ?

from sqlite.

digaus avatar digaus commented on June 1, 2024

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?

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

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

from sqlite.

digaus avatar digaus commented on June 1, 2024

@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"
}

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

@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?

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

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

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

@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?

from sqlite.

digaus avatar digaus commented on June 1, 2024

@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)

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

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

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

@digaus Did you copy it manually?

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

@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

from sqlite.

digaus avatar digaus commented on June 1, 2024

@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?

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

@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

from sqlite.

digaus avatar digaus commented on June 1, 2024

@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?

from sqlite.

digaus avatar digaus commented on June 1, 2024

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(/** */)

from sqlite.

jepiqueau avatar jepiqueau commented on June 1, 2024

@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

from sqlite.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.