Repository: FractalHQ/sveltekit-electron
Branch: master
Commit: 032f059544f5
Files: 24
Total size: 12.8 KB

Directory structure:
gitextract_co7zjf_f/

├── .gitignore
├── .npmrc
├── .prettierrc
├── .vscode/
│   ├── extensions.json
│   └── settings.json
├── LICENSE
├── README.md
├── build.config.json
├── globals.d.ts
├── jsconfig.json
├── package.json
├── src/
│   ├── app.html
│   ├── electron.cjs
│   ├── global.d.ts
│   ├── lib/
│   │   ├── Counter.svelte
│   │   ├── Logo.svelte
│   │   └── utils/
│   │       └── hmr-stores.js
│   ├── preload.cjs
│   └── routes/
│       ├── +layout.js
│       ├── +layout.svelte
│       └── +page.svelte
├── svelte.config.js
├── tsconfig.json
└── vite.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules
.svelte-kit

dist
build
package

.env
.env.*
*.local
!.env.example

yarn-error.log
pnpm-lock.yaml

.DS_Store


================================================
FILE: .npmrc
================================================
engine-strict = true


================================================
FILE: .prettierrc
================================================
{
	"svelteSortOrder": "scripts-markup-styles",
	"htmlWhitespaceSensitivity": "ignore",
	"trailingComma": "all",
	"requirePragma": false,
	"bracketSpacing": true,
	"singleQuote": true,
	"printWidth": 100,
	"useTabs": true,
	"tabWidth": 4,
	"semi": true
}


================================================
FILE: .vscode/extensions.json
================================================
{
  "recommendations": ["svelte.svelte-vscode"]
}


================================================
FILE: .vscode/settings.json
================================================
{
  "[svelte]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "svelte.svelte-vscode"
  }
}


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2022 Braden Wiggins and contributors: https://github.com/fractalhq/sveltekit-electron/graphs/contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
<p align="center">
  <img src="static/sveltekit-electron.svg" />
</p>

# Sveltekit + Electron

Minimal [Sveltekit](https://github.com/sveltejs/kit#readme) + [Electron](https://www.electronjs.org/) starter template.

<br />

## Getting Started

Unfortunately you must use `npm` as there are issues that arise when using `pnpm` or `yarn`

|         |                                             |
| ------- | ------------------------------------------- |
| Clone   | · `npx degit fractalhq/sveltekit-electron ` |
| Install | · `npm install`                             |
| Develop | · `npm run dev`                             |
| Build   | · `npm run build`                           |

In order to eliminate vulnerabilities caused by electron itself, please run `npm update` and `npm audit fix`. This will apply overrides.

<br />

<p align="center">
  <img src="screenshot.png" />
</p>

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Svelte for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)

## Change Build Targets

In the scripts section of package.json you can update the `build:electron` command and change the flags to set the targets, by default it uses `-mwl` which is Mac, Windows, and Linux


================================================
FILE: build.config.json
================================================
{
	"appId": "com.example.app",
	"productName": "Sveltekit Electron",
	"directories": {
		"output": "dist"
	},
	"files": [
		"src/electron.cjs",
		"src/preload.cjs",
		{
			"from": "build",
			"to": ""
		}
	]
}


================================================
FILE: globals.d.ts
================================================
/// <reference types="svelte" />
/// <reference types="vite/client" />


================================================
FILE: jsconfig.json
================================================
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"$lib": ["src/lib"],
			"$lib/*": ["src/lib/*"],
			"/~/*": ["src/*"]
		}
	},
	"exclude": ["node_modules", "build", "dist"]
}


================================================
FILE: package.json
================================================
{
	"name": "sveltekit-electron",
	"version": "0.0.1",
	"private": true,
	"description": "Minimal Sveltekit + Electron starter template.",
	"main": "src/electron.cjs",
	"type": "module",
	"author": "Braden Wiggins",
	"scripts": {
		"dev": "cross-env NODE_ENV=dev npm run dev:all",
		"dev:all": "concurrently -n=svelte,electron -c='#ff3e00',blue \"npm run dev:svelte\" \"npm run dev:electron\"",
		"dev:svelte": "vite dev",
		"dev:electron": "electron src/electron.cjs",
		"build": "cross-env NODE_ENV=production npm run build:svelte && npm run build:electron",
		"build:svelte": "vite build",
		"build:electron": "electron-builder -mwl --config build.config.json"
	},
	"engines": {
		"npm": ">=7",
		"yarn": "use npm - https://github.com/FractalHQ/sveltekit-electron/issues/12#issuecomment-1068399385"
	},
	"browserslist": [
		"Chrome 89"
	],
	"dependencies": {
		"electron-context-menu": "^3.6.1",
		"electron-reloader": "^1.2.3",
		"electron-serve": "^1.1.0",
		"electron-window-state": "^5.0.3"
	},
	"devDependencies": {
		"@sveltejs/adapter-static": "2.0.1",
		"@sveltejs/kit": "1.14.0",
		"@typescript-eslint/eslint-plugin": "^5.56.0",
		"@typescript-eslint/parser": "^5.56.0",
		"concurrently": "^7.6.0",
		"cross-env": "^7.0.3",
		"dotenv": "^16.0.3",
		"electron": "^23.2.0",
		"electron-builder": "^23.6.0",
		"electron-connect": "^0.6.3",
		"electron-packager": "^17.1.1",
		"electron-updater": "^5.3.0",
		"eslint": "^8.36.0",
		"eslint-config-prettier": "^8.8.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"npm-run-all": "^4.1.5",
		"prettier": "^2.8.7",
		"prettier-plugin-svelte": "^2.10.0",
		"sass": "^1.60.0",
		"svelte": "^3.57.0",
		"svelte-check": "^3.1.4",
		"svelte-preprocess": "^5.0.3",
		"tslib": "^2.5.0",
		"typescript": "^4.9.4",
		"vite": "^4.0.4"
	},
	"overrides": {
		"electron": {
			"got": "^12.5.1"
		}
	}
}


================================================
FILE: src/app.html
================================================
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Sveltekit + Electron</title>
		%sveltekit.head%
	</head>
	<body>
		<div id="svelte">%sveltekit.body%</div>
	</body>
</html>


================================================
FILE: src/electron.cjs
================================================
const windowStateManager = require('electron-window-state');
const { app, BrowserWindow, ipcMain } = require('electron');
const contextMenu = require('electron-context-menu');
const serve = require('electron-serve');
const path = require('path');

try {
	require('electron-reloader')(module);
} catch (e) {
	console.error(e);
}

const serveURL = serve({ directory: '.' });
const port = process.env.PORT || 5173;
const dev = !app.isPackaged;
let mainWindow;

function createWindow() {
	let windowState = windowStateManager({
		defaultWidth: 800,
		defaultHeight: 600,
	});

	const mainWindow = new BrowserWindow({
		backgroundColor: 'whitesmoke',
		titleBarStyle: 'hidden',
		autoHideMenuBar: true,
		trafficLightPosition: {
			x: 17,
			y: 32,
		},
		minHeight: 450,
		minWidth: 500,
		webPreferences: {
			enableRemoteModule: true,
			contextIsolation: true,
			nodeIntegration: true,
			spellcheck: false,
			devTools: dev,
			preload: path.join(__dirname, 'preload.cjs'),
		},
		x: windowState.x,
		y: windowState.y,
		width: windowState.width,
		height: windowState.height,
	});

	windowState.manage(mainWindow);

	mainWindow.once('ready-to-show', () => {
		mainWindow.show();
		mainWindow.focus();
	});

	mainWindow.on('close', () => {
		windowState.saveState(mainWindow);
	});

	return mainWindow;
}

contextMenu({
	showLookUpSelection: false,
	showSearchWithGoogle: false,
	showCopyImage: false,
	prepend: (defaultActions, params, browserWindow) => [
		{
			label: 'Make App 💻',
		},
	],
});

function loadVite(port) {
	mainWindow.loadURL(`http://localhost:${port}`).catch((e) => {
		console.log('Error loading URL, retrying', e);
		setTimeout(() => {
			loadVite(port);
		}, 200);
	});
}

function createMainWindow() {
	mainWindow = createWindow();
	mainWindow.once('close', () => {
		mainWindow = null;
	});

	if (dev) loadVite(port);
	else serveURL(mainWindow);
}

app.once('ready', createMainWindow);
app.on('activate', () => {
	if (!mainWindow) {
		createMainWindow();
	}
});
app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') app.quit();
});

ipcMain.on('to-main', (event, count) => {
	return mainWindow.webContents.send('from-main', `next count is ${count + 1}`);
});


================================================
FILE: src/global.d.ts
================================================
/// <reference types="@sveltejs/kit" />
/// <reference types="svelte" />
/// <reference types="vite/client" />
declare interface Window {
	electron: any;
}


================================================
FILE: src/lib/Counter.svelte
================================================
<script lang="ts">
	import { getStore } from '$lib/utils/hmr-stores';

	export let id: string;
	export let agent: string;

	const count = getStore(id, 0);

	const handleClick = () => {
		$count += 1;
	};

	$: if (window.electron) {
		window.electron.send('to-main', $count);
	}
</script>

<button {id} on:click={handleClick}>
	Send Clicks to {agent}: {$count}
</button>

<style>
	button {
		font-family: inherit;
		font-size: inherit;
		padding: 1em 2em;
		color: #ff3e00;
		background-color: rgba(255, 62, 0, 0.1);
		border-radius: 2em;
		border: 2px solid rgba(255, 62, 0, 0);
		outline: none;
		width: 200px;
		font-variant-numeric: tabular-nums;
	}
	button:focus {
		border: 2px solid #ff3e00;
	}
	button:active {
		background-color: rgba(255, 62, 0, 0.2);
	}
</style>


================================================
FILE: src/lib/Logo.svelte
================================================
<script>
	import { fly } from 'svelte/transition';
	import { onMount } from 'svelte';
	let visible = false;
	onMount(() => (visible = true));
</script>

{#if visible}
	<img
		src="/sveltekit-electron.svg"
		alt="Svelte Logo"
		draggable="false"
		in:fly={{ y: 100, duration: 1500 }}
	/>
{:else}
	<div style="height: 16rem" />
{/if}

<style>
	img {
		height: 16rem;
		width: 16rem;
		user-select: none;
	}
</style>


================================================
FILE: src/lib/utils/hmr-stores.js
================================================
// Customized HMR-safe stores
// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js
import { writable } from 'svelte/store';

/**
 * @type { Record<string, import('svelte/store').Writable<any>> }
 */
let stores = {};

/**
 * @template T
 * @param { string } id
 * @param { T } initialValue
 * @returns { import('svelte/store').Writable<T> }
 */
export function getStore(id, initialValue) {
	return stores[id] || (stores[id] = writable(initialValue));
}

// preserve the store across HMR updates
if (import.meta.hot) {
	if (import.meta.hot.data.stores) {
		stores = import.meta.hot.data.stores;
	}
	import.meta.hot.accept();
	import.meta.hot.dispose(() => {
		import.meta.hot.data.stores = stores;
	});
}


================================================
FILE: src/preload.cjs
================================================
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
	send: (channel, data) => {
		ipcRenderer.send(channel, data);
	},
	sendSync: (channel, data) => {
		ipcRenderer.sendSync(channel, data);
	},
	receive: (channel, func) => {
		ipcRenderer.on(channel, (event, ...args) => func(...args));
	},
});


================================================
FILE: src/routes/+layout.js
================================================
export const ssr = false;


================================================
FILE: src/routes/+layout.svelte
================================================
<script lang="ts">
	import { onMount } from 'svelte';

	let ready: boolean = false;
	onMount(() => (ready = true));
</script>

<div class="dragbar" />

{#if ready}
	<slot />
{/if}

<style>
	.dragbar {
		-webkit-app-region: drag;
		position: absolute;
		z-index: 100;
		height: 40px;
		width: 100%;
	}
</style>


================================================
FILE: src/routes/+page.svelte
================================================
<script lang="ts">
	import Counter from '$lib/Counter.svelte';
	import Logo from '$lib/Logo.svelte';
	import { browser } from '$app/environment';

	let desktop: string;

	if (window.electron && browser) {
		window.electron.receive('from-main', (data: any) => {
			desktop = `Received Message "${data}" from Electron`;
			console.log(desktop);
		});
	}

	const agent = window.electron ? 'Electron' : 'Browser';
</script>

<main>
	<Logo />

	<h1>Hello {agent}!</h1>

	<Counter id="0" {agent} />

	{#if desktop}
		<br />
		<br />
		{desktop}
	{/if}
</main>

<style>
	:root {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
			Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	:global(body) {
		margin: 0;
		padding: 0;
	}

	main {
		padding: 2em 1em 1em 1em;
		text-align: center;
		animation: fade 1s;
		margin: 0 auto;
	}

	@keyframes fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
</style>


================================================
FILE: svelte.config.js
================================================
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({
			fallback: 'index.html',
		}),
		prerender: { entries: [] },
	},
};

export default config;


================================================
FILE: tsconfig.json
================================================
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"module": "esnext",
		"target": "es2020",
		"moduleResolution": "node",
		"strict": true,
		"types": ["vite/client", "node"],
		"typeRoots": ["node_modules/@types"],
		"lib": ["ESNext"],
		/**
			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
			to enforce using \`import type\` instead of \`import\` for Types.
		*/
		"importsNotUsedAsValues": "error",
		"isolatedModules": true,
		/**
			To have warnings/errors of the Svelte compiler at the correct position,
			enable source maps by default.
		*/
		"sourceMap": true,
		"esModuleInterop": true,
		"skipLibCheck": true,
		"forceConsistentCasingInFileNames": true,
		"baseUrl": ".",
		"allowJs": true,
		"checkJs": false,
		"paths": {
			"$lib": ["src/lib"],
			"$lib/*": ["src/lib/*"],
			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"]
		}
	},
	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte", "src/electron.js"]
}


================================================
FILE: vite.config.js
================================================
import { sveltekit } from '@sveltejs/kit/vite';

const config = {
	plugins: [sveltekit()],
};

export default config;