📂 Publicly Accessible base folder for a website

2021-05-03 15:50:31 +05:30
parent f475a5eec5
commit 7bca26c357
9 changed files with 1023 additions and 838 deletions
--- a/2
+++ b/2
@@ -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
--- 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",
--- 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'),
--- 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 <author.souleh@thegeekytutor.com>",
-  "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"
-  ]
-}
+  "dependencies": {
+    "electron-serve": "^1.1.0"
+  }
+}
+
--- 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
--- 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.")
-}
+}
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,23 +1,11 @@
 <script>
-	export let appName;
+	export let name;
 </script>

 <main>
-	<h1>Welcome to {appName} App!</h1>
-	<img src="/favicon.png" alt="Svelte Logo" />
+	<h1>Hello {name}!</h1>
 	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 </main>
-<footer>
-	<nav>
-		<a href="https://svelte.dev/docs">API</a>
-		<a href="https://svelte.dev/examples">Examples</a>
-		<a href="https://svelte.dev/repl/hello-world">REPL</a>
-		<a href="https://svelte.dev/blog">Blog</a>
-		<a href="https://svelte.dev/faq">FAQ</a>
-		<a href="https://discord.com/invite/yy75DKs">Discord</a>
-		<a href="https://github.com/sveltejs/svelte">GitHub</a>
-	</nav>
-</footer>

 <style>
 	main {
@@ -28,26 +16,10 @@
 	}

 	h1 {
-		color: #676778;
-		text-transform: uppercase;
-		font-size: 2.4em;
-		font-weight: 700;
-	}
-
-	img {
-		height: 40vmin;
-		margin: 0.8em;
-	}
-
-	nav {
-		display: flex;
-		justify-content: center;
-	}
-
-	nav a {
-		margin: 16px;
-		margin-top: 24px;
 		color: #ff3e00;
+		text-transform: uppercase;
+		font-size: 4em;
+		font-weight: 100;
 	}

 	@media (min-width: 640px) {
--- a/src/main.js
+++ b/src/main.js
@@ -3,7 +3,7 @@ import App from './App.svelte';
 const app = new App({
 	target: document.body,
 	props: {
-		appName: 'Electron-Svelte'
+		name: 'world'
 	}
 });

--- a/yarn.lock
+++ b/yarn.lock