electron-react-boilerplate icon indicating copy to clipboard operation
electron-react-boilerplate copied to clipboard

Can't use electron store in webpack TS template

Open yosle opened this issue 8 months ago • 1 comments

Prerequisites

  • [ x] Using npm
  • [x ] Using an up-to-date main branch
  • [ x] Using latest version of devtools. Check the docs for how to update
  • [ x] Tried solutions mentioned in #400
  • [ x] For issue in production release, add devtools output of DEBUG_PROD=true npm run build && npm start

Expected Behavior

When instantiating a new Store in main.ts , get and set method should be available.

Current Behavior

the only method available is store.openInEditor

Steps to Reproduce

1 - Install the boilerplate template for TS.

Part of my preload.ts:

const electronHandler = {
  ipcRenderer: {
    sendMessage(channel: Channels, ...args: unknown[]) {
      ipcRenderer.send(channel, ...args);
    },
    on(channel: Channels, func: (...args: unknown[]) => void) {
      const subscription = (_event: IpcRendererEvent, ...args: unknown[]) =>
        func(...args);
      ipcRenderer.on(channel, subscription);

      return () => {
        ipcRenderer.removeListener(channel, subscription);
      };
    },
    once(channel: Channels, func: (...args: unknown[]) => void) {
      ipcRenderer.once(channel, (_event, ...args) => func(...args));
    },
  },
  electronStore: {
    get(key: string) {
      return ipcRenderer.sendSync('electron-store-get', key);
    },
    set(property: string, val: string) {
      ipcRenderer.send('electron-store-set', property, val);
    },
  },
};

contextBridge.exposeInMainWorld('electron', electronHandler);

export type ElectronHandler = typeof electronHandler;

This is the preload.d.ts:

declare global {
  // eslint-disable-next-line no-unused-vars
  interface Window {
    electron: ElectronHandler;
    electronStore: {
      get: (key: string) => any;
      set: (key: string, val: any) => void;
      // any other methods you've defined...
    };
  }
}

Part of main.ts:


type StoreType = {
  isRainbow: boolean;
  unicorn?: string;
};

const store = new Store()<StoreType>;
....

ipcMain.on('ipc-example', async (event, key, val) => {
  store.set(key, val);
  // Property 'set' does not exist on type 'ElectronStore<Record<string, unknown>>'
});

Context

I'm unable to use electron-store in this project

Your Environment

  • Node version : 20.12.2
  • electron-react-boilerplate version or branch : amin TS template
  • Operating System and version : Ubuntu Linux 20.04
  • Link to your project :

yosle avatar May 27 '24 03:05 yosle