# @kalphax/core

> Add the following code to your Electron project.

Latest version **1.2.1** (published 2020-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kalphax/core
pnpm add @kalphax/core
yarn add @kalphax/core
bun add @kalphax/core
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2020-07-07 |
| First published | 2020-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 (+55 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | matthew-downs-kpx |
| Keywords | electron, ipc |

## Links

- npm: https://www.npmjs.com/package/@kalphax/core
- Repository: https://github.com/kalphax/core
- Homepage: https://github.com/kalphax/core#readme
- Issues: https://github.com/kalphax/core/issues
- npm.io page: https://npm.io/package/@kalphax/core

## Dependencies (2)

- [electron](https://npm.io/package/electron.md) ^9.0.5
- [deep-state-observer](https://npm.io/package/deep-state-observer.md) ^3.18.0

## Recent versions

- 1.2.1 (latest) — 2020-07-07
- 1.2.0 — 2020-07-07
- 1.1.2 — 2020-07-07
- 1.1.1 — 2020-07-06
- 1.1.0 — 2020-07-06

## README

# Kalphax

### Project Setup

Add the following code to your Electron project.

_declarations.d.ts_
```
import { Bridge } from '@kalphax/core';

declare global {
    interface Window {
        [x: string]: <T>() => Promise<T>;
    }
}
```

_main.ts (Electron main process)_
```
ipcMain.on('to.myFunction', (event, value: string) => {
    // ...
    return `You provided value: ${value}`;
});
```

_preload.ts (Electron preloader)_
```
import { contextBridge } from 'electron';

contextBridge.exposeInMainWorld('api', {
    myFunction: async (value: string): Promise<string> => {
        // Spawn a bridge with the following channels
        const myBridge = new Bridge({
            channels: {
                senders: ['to.myFunction'],
                receivers: ['from.myFunction']
            }
        });
        
        // Give the signal to ipcMain to run myFunction
        myBridge.send<string>('to.myFunction', value);

        // Wait for ipcMain to finish its process and return a value
        const result = await myBridge.receive<string>('from.myFunction');

        // Unsubscribe all listeners
        myBridge.dispose();

        return result;
    }
});
```

-----

### Accessing a bridge

Accessing a property from your bridge is easy. Simply call `window.api.<property>`. For instance, if your context bridge looks like the one in the example above, you would call `window.api.myFunction.send` and `window.api.myFunction.receive`.

Here are some examples on how to utilize the IPC bridge.

##### Vanilla
```
<body>
    <div id="myFunctionResult"></div>

    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', function() {
            window.api.myFunction().then(data => {
                document.getElementById('myFunctionResult').innerText = data;
            });
        });
    </script>
</body>
```

##### React
```
import React, { useState } from 'react';

const MyComponent = () => {
    const [loading, setLoading] = useState<boolean>(true);
    const [runningMyFunction, setRunningMyFunction] = useState<boolean>(false);
    const [errorMyFunction, setErrorMyFunction] = useState<boolean>(false);
    const [myFunctionResult, setMyFunctionResult] = useState<string>();

    if (loading && !fetchingUniqueId) {
        setFetchingUniqueId(true);
        window.api.myFunction('from.myFunction')
            .then((data: string) => setMyFunctionResult(data))
            .catch(() => setErrorMyFunction(true))
            .finally(() => setRunningMyFunction(false));
    }

    if (loading && myFunctionResult !== undefined || errorMyFunction) {
        setLoading(false);
    }

    return (
        <div>{myFunctionResult}</div>
    )
}
```

---
_Source: https://npm.io/package/@kalphax/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._