diff --git a/cmd/templates/svelte/frontend/.gitignore b/cmd/templates/svelte/frontend/.gitignore new file mode 100644 index 00000000..da93220b --- /dev/null +++ b/cmd/templates/svelte/frontend/.gitignore @@ -0,0 +1,4 @@ +/node_modules/ +/public/build/ + +.DS_Store diff --git a/cmd/templates/svelte/frontend/README.md b/cmd/templates/svelte/frontend/README.md new file mode 100644 index 00000000..54bca49c --- /dev/null +++ b/cmd/templates/svelte/frontend/README.md @@ -0,0 +1,104 @@ +*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* + +--- + +# svelte app + +This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. + +To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): + +```bash +npx degit sveltejs/template svelte-app +cd svelte-app +``` + +*Note that you will need to have [Node.js](https://nodejs.org) installed.* + + +## Get started + +Install the dependencies... + +```bash +cd svelte-app +npm install +``` + +...then start [Rollup](https://rollupjs.org): + +```bash +npm run dev +``` + +Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. + +By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. + + +## Building and running in production mode + +To create an optimised version of the app: + +```bash +npm run build +``` + +You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). + + +## Single-page app mode + +By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. + +If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: + +```js +"start": "sirv public --single" +``` + +## Using TypeScript + +This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: + +```bash +node scripts/setupTypeScript.js +``` + +Or remove the script via: + +```bash +rm scripts/setupTypeScript.js +``` + +## Deploying to the web + +### With [Vercel](https://vercel.com) + +Install `vercel` if you haven't already: + +```bash +npm install -g vercel +``` + +Then, from within your project folder: + +```bash +cd public +vercel deploy --name my-project +``` + +### With [surge](https://surge.sh/) + +Install `surge` if you haven't already: + +```bash +npm install -g surge +``` + +Then, from within your project folder: + +```bash +npm run build +surge public my-project.surge.sh +``` diff --git a/cmd/templates/svelte/frontend/package.json.template b/cmd/templates/svelte/frontend/package.json.template new file mode 100644 index 00000000..7e61907d --- /dev/null +++ b/cmd/templates/svelte/frontend/package.json.template @@ -0,0 +1,24 @@ +{ + "name": "{{.NPMProjectName}}", + "author": "{{.Author.Name}}<{{.Author.Email}}>", + "scripts": { + "build": "rollup -c", + "dev": "rollup -c -w", + "start": "sirv public" + }, + "devDependencies": { + "@rollup/plugin-commonjs": "^14.0.0", + "@rollup/plugin-image": "^2.0.5", + "@rollup/plugin-node-resolve": "^8.0.0", + "rollup": "^2.3.4", + "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-svelte": "^6.0.0", + "rollup-plugin-terser": "^7.0.0", + "svelte": "^3.0.0" + }, + "dependencies": { + "sirv-cli": "^1.0.0", + "@wailsapp/runtime": "^1.0.10", + "svelte-simple-modal": "^0.6.0" + } +} diff --git a/cmd/templates/svelte/frontend/public/favicon.png b/cmd/templates/svelte/frontend/public/favicon.png new file mode 100644 index 00000000..7e6f5eb5 Binary files /dev/null and b/cmd/templates/svelte/frontend/public/favicon.png differ diff --git a/cmd/templates/svelte/frontend/public/index.html b/cmd/templates/svelte/frontend/public/index.html new file mode 100644 index 00000000..a9c8fd65 --- /dev/null +++ b/cmd/templates/svelte/frontend/public/index.html @@ -0,0 +1,17 @@ + + + + + + + Svelte app + + + + + + + + + + diff --git a/cmd/templates/svelte/frontend/rollup.config.js b/cmd/templates/svelte/frontend/rollup.config.js new file mode 100644 index 00000000..aa02bab4 --- /dev/null +++ b/cmd/templates/svelte/frontend/rollup.config.js @@ -0,0 +1,77 @@ +import svelte from 'rollup-plugin-svelte'; +import resolve from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; +import livereload from 'rollup-plugin-livereload'; +import { terser } from 'rollup-plugin-terser'; +import image from '@rollup/plugin-image'; + +const production = !process.env.ROLLUP_WATCH; + +function serve() { + let server; + + function toExit() { + if (server) server.kill(0); + } + + return { + writeBundle() { + if (server) return; + server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { + stdio: ['ignore', 'inherit', 'inherit'], + shell: true + }); + + process.on('SIGTERM', toExit); + process.on('exit', toExit); + } + }; +} + +export default { + input: 'src/main.js', + output: { + sourcemap: true, + format: 'iife', + name: 'app', + file: 'public/build/bundle.js' + }, + plugins: [ + image(), + 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('bundle.css'); + } + }), + + // If you have external dependencies installed from + // npm, you'll most likely need these plugins. In + // some cases you'll need additional configuration - + // consult the documentation for details: + // https://github.com/rollup/plugins/tree/master/packages/commonjs + resolve({ + browser: true, + dedupe: ['svelte', 'svelte/transition', 'svelte/internal'] + }), + commonjs(), + + // In dev mode, call `npm run start` once + // the bundle has been generated + !production && serve(), + + // Watch the `public` directory and refresh the + // browser on changes when not in production + !production && livereload('public'), + + // If we're building for production (npm run build + // instead of npm run dev), minify + production && terser() + ], + watch: { + clearScreen: false + } +}; diff --git a/cmd/templates/svelte/frontend/scripts/setupTypeScript.js b/cmd/templates/svelte/frontend/scripts/setupTypeScript.js new file mode 100644 index 00000000..3855f538 --- /dev/null +++ b/cmd/templates/svelte/frontend/scripts/setupTypeScript.js @@ -0,0 +1,125 @@ +// @ts-check + +/** This script modifies the project to support TS code in .svelte files like: + + + + As well as validating the code for CI. + */ + +/** To work on this script: + rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template +*/ + +const fs = require("fs") +const path = require("path") +const { argv } = require("process") + +const projectRoot = argv[2] || path.join(__dirname, "..") + +// Add deps to pkg.json +const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8")) +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", + "tslib": "^2.0.0", + "@tsconfig/svelte": "^1.0.0" +}) + +// Add script for checking +packageJSON.scripts = Object.assign(packageJSON.scripts, { + "validate": "svelte-check" +}) + +// Write the package JSON +fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " ")) + +// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too +const beforeMainJSPath = path.join(projectRoot, "src", "main.js") +const afterMainTSPath = path.join(projectRoot, "src", "main.ts") +fs.renameSync(beforeMainJSPath, afterMainTSPath) + +// Switch the app.svelte file to use TS +const appSveltePath = path.join(projectRoot, "src", "App.svelte") +let appFile = fs.readFileSync(appSveltePath, "utf8") +appFile = appFile.replace(" + +
+
+
+ + +

Welcome to your new wails/svelte project.

+

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

+ + +
+
+
+
+ + \ No newline at end of file diff --git a/cmd/templates/svelte/frontend/src/components/HelloWorld.svelte b/cmd/templates/svelte/frontend/src/components/HelloWorld.svelte new file mode 100644 index 00000000..10948498 --- /dev/null +++ b/cmd/templates/svelte/frontend/src/components/HelloWorld.svelte @@ -0,0 +1,18 @@ + + +
+

+
+ + \ No newline at end of file diff --git a/cmd/templates/svelte/frontend/src/components/ModalContent.svelte b/cmd/templates/svelte/frontend/src/components/ModalContent.svelte new file mode 100644 index 00000000..37ce80fb --- /dev/null +++ b/cmd/templates/svelte/frontend/src/components/ModalContent.svelte @@ -0,0 +1,7 @@ + + +

+ {message} +

\ No newline at end of file diff --git a/cmd/templates/svelte/frontend/src/logo.png b/cmd/templates/svelte/frontend/src/logo.png new file mode 100644 index 00000000..31fc8249 Binary files /dev/null and b/cmd/templates/svelte/frontend/src/logo.png differ diff --git a/cmd/templates/svelte/frontend/src/main.js b/cmd/templates/svelte/frontend/src/main.js new file mode 100644 index 00000000..2646517e --- /dev/null +++ b/cmd/templates/svelte/frontend/src/main.js @@ -0,0 +1,13 @@ +import App from './App.svelte'; + +import * as Wails from '@wailsapp/runtime'; + +let app; + +Wails.Init(() => { + app = new App({ + target: document.body, + }); +}); + +export default app; \ No newline at end of file diff --git a/cmd/templates/svelte/go.mod.template b/cmd/templates/svelte/go.mod.template new file mode 100644 index 00000000..78038106 --- /dev/null +++ b/cmd/templates/svelte/go.mod.template @@ -0,0 +1,5 @@ +module {{.BinaryName}} + +require ( + github.com/wailsapp/wails {{.WailsVersion}} +) \ No newline at end of file diff --git a/cmd/templates/svelte/main.go.template b/cmd/templates/svelte/main.go.template new file mode 100644 index 00000000..b5718c49 --- /dev/null +++ b/cmd/templates/svelte/main.go.template @@ -0,0 +1,27 @@ +package main + +import ( + "github.com/leaanthony/mewn" + "github.com/wailsapp/wails" +) + +func basic() string { + return "World!" +} + +func main() { + js := mewn.String("./frontend/public/build/bundle.js") + css := mewn.String("./frontend/public/build/bundle.css") + + app := wails.CreateApp(&wails.AppConfig{ + Width: 1024, + Height: 768, + Title: "{{.Name}}", + JS: js, + CSS: css, + Colour: "#131313", + }) + + app.Bind(basic) + app.Run() +} diff --git a/cmd/templates/svelte/template.json b/cmd/templates/svelte/template.json new file mode 100755 index 00000000..0b1c0ba3 --- /dev/null +++ b/cmd/templates/svelte/template.json @@ -0,0 +1,14 @@ +{ + "name": "Svelte", + "version": "1.0.0", + "shortdescription": "A basic Svelte template", + "description": "A basic Svelte template", + "install": "npm install", + "build": "npm run build", + "author": "Tim Kipp ", + "created": "2020-09-06 13:06:10.469848 -0700 PDT m=+213.578828559", + "frontenddir": "frontend", + "serve": "npm run dev", + "bridge": "src", + "wailsdir": "" +}