diff --git a/LICENSE b/LICENSE index db14d73..013c338 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2020 Souleh Shaikh +Copyright (c) 2021 Souleh Shaikh Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 8ff9436..e2e4e33 100644 --- a/README.md +++ b/README.md @@ -84,14 +84,15 @@ $ cd create-svelte-electron-app # It should look something like this "dependencies": {}, "devDependencies": { - "@rollup/plugin-commonjs": "^14.0.0", - "@rollup/plugin-node-resolve": "^8.0.0", + "@rollup/plugin-commonjs": "^17.0.0", + "@rollup/plugin-node-resolve": "^11.0.0", "rollup": "^2.3.4", - "rollup-plugin-livereload": "^1.0.0", - "rollup-plugin-svelte": "^5.0.3", - "rollup-plugin-terser": "^6.0.0", + "rollup-plugin-css-only": "^3.1.0", + "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-svelte": "^7.0.0", + "rollup-plugin-terser": "^7.0.0", "sirv-cli": "^1.0.0", - "svelte": "^3.0.0" + "svelte": "^3.0.0", } ``` @@ -118,21 +119,22 @@ $ yarn add electron-serve # or npm i electron-serve ```json "dependencies": { - "electron-serve": "^1.0.0" + "electron-serve": "^1.1.0" }, "devDependencies": { - "@rollup/plugin-commonjs": "^14.0.0", - "@rollup/plugin-node-resolve": "^8.0.0", - "concurrently": "^5.3.0", - "electron": "^9.2.1", - "electron-builder": "^22.8.0", + "@rollup/plugin-commonjs": "^17.0.0", + "@rollup/plugin-node-resolve": "^11.0.0", + "concurrently": "^6.0.2", + "electron": "^12.0.6", + "electron-builder": "^22.10.5", "rollup": "^2.3.4", - "rollup-plugin-livereload": "^1.0.0", - "rollup-plugin-svelte": "^5.0.3", - "rollup-plugin-terser": "^6.0.0", + "rollup-plugin-css-only": "^3.1.0", + "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-svelte": "^7.0.0", + "rollup-plugin-terser": "^7.0.0", "sirv-cli": "^1.0.0", "svelte": "^3.0.0", - "wait-on": "^5.2.0" + "wait-on": "^5.3.0" } ``` @@ -174,7 +176,9 @@ function createWindow() { width: 800, height: 600, webPreferences: { - nodeIntegration: true + nodeIntegration: true, + // enableRemoteModule: true, + // contextIsolation: false }, // Use this in development mode. icon: isDev() ? path.join(process.cwd(), 'public/favicon.png') : path.join(__dirname, 'public/favicon.png'), @@ -247,7 +251,7 @@ app.on('activate', function () { "scripts": { "build": "rollup -c", "dev": "rollup -c -w", - "start": "sirv public", + "start": "sirv public --no-clear", "electron": "wait-on http://localhost:5000 && electron .", "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"", "preelectron-pack": "yarn run build", diff --git a/main.js b/main.js index bbe89b1..e3a8c0f 100644 --- a/main.js +++ b/main.js @@ -18,7 +18,9 @@ function createWindow() { width: 800, height: 600, webPreferences: { - nodeIntegration: true + nodeIntegration: true, + // enableRemoteModule: true, + // contextIsolation: false }, // Use this in development mode. icon: isDev() ? path.join(process.cwd(), 'public/favicon.png') : path.join(__dirname, 'public/favicon.png'), diff --git a/package.json b/package.json index 43f74d6..ef87ae7 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,8 @@ { "name": "create-svelte-electron-app", - "version": "0.1.0", - "description": "A simple starter project to get up and developing quickly with the blend of Svelte and Electron JS for building a Native Desktop App on various OS Platforms like Windows, Linux and macOS using Electron Builder.", + "version": "1.0.0", + "private": true, "main": "main.js", - "author": "Souleh Shaikh ", - "license": "MIT", - "private": false, - "repository": { - "type": "git", - "url": "https://github.com/soulehshaikh99/create-svelte-electron-app" - }, - "bugs": { - "url": "https://github.com/soulehshaikh99/create-svelte-electron-app/issues" - }, "build": { "icon": "public/favicon.png", "productName": "Svelte and Electron App", @@ -27,49 +17,29 @@ "scripts": { "build": "rollup -c", "dev": "rollup -c -w", - "start": "sirv public", + "start": "sirv public --no-clear", "electron": "wait-on http://localhost:5000 && electron .", "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"", "preelectron-pack": "yarn run build", "electron-pack": "electron-builder" }, - "dependencies": { - "electron-serve": "^1.0.0" - }, "devDependencies": { - "@rollup/plugin-commonjs": "^14.0.0", - "@rollup/plugin-node-resolve": "^8.0.0", - "concurrently": "^5.3.0", - "electron": "^9.2.1", - "electron-builder": "^22.8.0", + "@rollup/plugin-commonjs": "^17.0.0", + "@rollup/plugin-node-resolve": "^11.0.0", + "concurrently": "^6.0.2", + "electron": "^12.0.6", + "electron-builder": "^22.10.5", "rollup": "^2.3.4", - "rollup-plugin-livereload": "^1.0.0", - "rollup-plugin-svelte": "^5.0.3", - "rollup-plugin-terser": "^6.0.0", + "rollup-plugin-css-only": "^3.1.0", + "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-svelte": "^7.0.0", + "rollup-plugin-terser": "^7.0.0", "sirv-cli": "^1.0.0", "svelte": "^3.0.0", - "wait-on": "^5.2.0" + "wait-on": "^5.3.0" }, - "keywords": [ - "cross-platform", - "native-app", - "installed-app", - "desktop-applications", - "windows", - "linux", - "macos", - "html", - "css", - "javascript", - "front-end", - "compiler", - "svelte", - "rollup", - "electron", - "electron-builder", - "electron-serve", - "concurrently", - "wait-on", - "webapp" - ] -} \ No newline at end of file + "dependencies": { + "electron-serve": "^1.1.0" + } +} + diff --git a/rollup.config.js b/rollup.config.js index 6a95234..e8965ec 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,14 +1,15 @@ import svelte from 'rollup-plugin-svelte'; -import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; +import resolve from '@rollup/plugin-node-resolve'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; +import css from 'rollup-plugin-css-only'; const production = !process.env.ROLLUP_WATCH; function serve() { let server; - + function toExit() { if (server) server.kill(0); } @@ -37,14 +38,14 @@ export default { }, plugins: [ svelte({ - // enable run-time checks when not in production - dev: !production, - // we'll extract any component CSS out into - // a separate file - better for performance - css: css => { - css.write('public/build/bundle.css'); + compilerOptions: { + // enable run-time checks when not in production + dev: !production } }), + // we'll extract any component CSS out into + // a separate file - better for performance + css({ output: 'bundle.css' }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In diff --git a/scripts/setupTypeScript.js b/scripts/setupTypeScript.js index 964d55b..1eb6b77 100644 --- a/scripts/setupTypeScript.js +++ b/scripts/setupTypeScript.js @@ -24,8 +24,8 @@ const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.j packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { "svelte-check": "^1.0.0", "svelte-preprocess": "^4.0.0", - "@rollup/plugin-typescript": "^4.0.0", - "typescript": "^3.9.3", + "@rollup/plugin-typescript": "^8.0.0", + "typescript": "^4.0.0", "tslib": "^2.0.0", "@tsconfig/svelte": "^1.0.0" }) @@ -62,25 +62,17 @@ import typescript from '@rollup/plugin-typescript';`) // Replace name of entry point rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`) -// Add preprocess to the svelte config, this is tricky because there's no easy signifier. -// Instead we look for `css:` then the next `}` and add the preprocessor to that -let foundCSS = false -let match - -// https://regex101.com/r/OtNjwo/1 -const configEditor = new RegExp(/css:.|\n*}/gmi) -while (( match = configEditor.exec(rollupConfig)) != null) { - if (foundCSS) { - const endOfCSSIndex = match.index + 1 - rollupConfig = rollupConfig.slice(0, endOfCSSIndex) + ",\n preprocess: sveltePreprocess()," + rollupConfig.slice(endOfCSSIndex); - break - } - if (match[0].includes("css:")) foundCSS = true -} - +// Add preprocessor +rollupConfig = rollupConfig.replace( + 'compilerOptions:', + 'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:' +); // Add TypeScript -rollupConfig = rollupConfig.replace("commonjs(),", 'commonjs(),\n\t\ttypescript({ sourceMap: !production }),') +rollupConfig = rollupConfig.replace( + 'commonjs(),', + 'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),' +); fs.writeFileSync(rollupConfigPath, rollupConfig) // Add TSConfig @@ -88,7 +80,7 @@ const tsconfig = `{ "extends": "@tsconfig/svelte/tsconfig.json", "include": ["src/**/*"], - "exclude": ["node_modules/*", "__sapper__/*", "public/*"], + "exclude": ["node_modules/*", "__sapper__/*", "public/*"] }` const tsconfigPath = path.join(projectRoot, "tsconfig.json") fs.writeFileSync(tsconfigPath, tsconfig) @@ -112,7 +104,7 @@ if (!argv[2]) { } // Adds the extension recommendation -fs.mkdirSync(path.join(projectRoot, ".vscode")) +fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true }) fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{ "recommendations": ["svelte.svelte-vscode"] } @@ -122,4 +114,4 @@ console.log("Converted to TypeScript.") if (fs.existsSync(path.join(projectRoot, "node_modules"))) { console.log("\nYou will need to re-run your dependency manager to get started.") -} \ No newline at end of file +} diff --git a/src/App.svelte b/src/App.svelte index 438809f..10faec7 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,23 +1,11 @@
-

Welcome to {appName} App!

- Svelte Logo +

Hello {name}!

Visit the Svelte tutorial to learn how to build Svelte apps.

-