https://github.com/refzlund/embedded-ai
https://github.com/refzlund/embedded-ai
Last synced: 23 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/refzlund/embedded-ai
- Owner: Refzlund
- Created: 2023-06-21T16:19:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-06T08:30:04.000Z (over 2 years ago)
- Last Synced: 2025-02-23T11:28:26.361Z (8 months ago)
- Language: TypeScript
- Size: 1.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SvelteKit + Electron
## Developing
Developed using [pnpm](https://pnpm.io)
### Electron side of things
In `src/electron` we have the main modules.
- Creating main window
- Creating tray icon
- Adding listeners
`./app-actions` are split modules that brings functionality to
*electron.js*.
- Toggling the visiblity of the application
- Loading vite for the development
`./request-actions` are like requests to a server, in this case the `electron.js` process.
From SvelteKit, we can call the functions and pass data back and forth.
Think of electron.js as the "server" and SvelteKit as the "browser".
This was needed, as `fs` wasn't available in Vite, and so communication back and forth was required.
It has been written to be type-safe.
Modules are applied
```ts
// src/electron/request-actions/index.cts
import { fsRead, fsWrite } from './fs.cjs'
export type Modules = ModuleRecord<{
'fsRead': typeof fsRead
'fsWrite': typeof fsWrite
}>
```
> **Note**
> `'fsRead': typeof fsRead` key and import statement has to be the same.
And can be accessed on the SvelteKit application:
```ts
const { status, body } = await electron.requestAction({
type: 'fsRead',
body: {
relativePath: './settings.json'
}
})
```
Files are relative to `~/.embedded-ai/...`, where `.embedded-ai` can be changed in the settings `src/electron/app-store.cts`
### SvelteKit
SvelteKit uses the `static-adapter`, meaning there is no server.
So it works like you'd expect it to work client-side wise.
Access to things like `process` or `fs` are lmited from my experience.
#### Libraries
- [pug]() compiles pug-template into html-markup using [svelte-preprocess](https://www.npmjs.com/package/svelte-preprocess)
- [sass](https://www.npmjs.com/package/sass) compiles scss to css using [svelte-preprocess](https://www.npmjs.com/package/svelte-preprocess)
- [svelte-awesome-pug](https://www.npmjs.com/package/svelte-awesome-pug) to extend pugs capabilities within Svelte
- [@floating-ui/core](https://www.npmjs.com/package/@floating-ui/core) is the library used for any popovers
- [svelte-floating-ui](https://www.npmjs.com/package/svelte-floating-ui) is an awesome package to apply *floating-ui* in Svelte
- [scss-color-var](https://npmjs.com/package/scss-color-var) maintains the color scheme throughout the app
- [@iconify/svelte]() makes icons easily accessible
- [@iconify/icons-fluent](https://www.npmjs.com/package/@iconify-icons/fluent) is the icon-pack used
- [highlight.js](https://www.npmjs.com/package/highlight.js) adds highlighting to code-blocks
- [showdown](https://www.npmjs.com/package/showdown) converts markdown into HTML