5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-03 04:11:05 +08:00

Update Svelte to Vite 3 (#1643)

Updates to svelte template.
Refactor url detector to strip ANSI codes at point of source
Ignore frontend if external dev server used.
[AssetServer] WebSockets can always directly be forwarded to the handler

Co-authored-by: stffabi <stffabi@users.noreply.github.com>

Co-authored-by: stffabi <stffabi@users.noreply.github.com>
This commit is contained in:
Lea Anthony 2022-07-24 20:20:02 +10:00 committed by GitHub
parent 7b656c49c2
commit 0f7bd65815
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 185 additions and 168 deletions

View File

@ -264,7 +264,7 @@ func AddSubcommand(app *clir.Cli, w io.Writer) error {
// Show dev server URL in terminal after 3 seconds // Show dev server URL in terminal after 3 seconds
go func() { go func() {
time.Sleep(3 * time.Second) time.Sleep(3 * time.Second)
LogGreen("\n\nTo develop in the browser, navigate to: %s", devServerURL) LogGreen("\n\nTo develop in the browser and call your bound Go methods from Javascript, navigate to: %s", devServerURL)
}() }()
// Watch for changes and trigger restartApp() // Watch for changes and trigger restartApp()

View File

@ -2,11 +2,11 @@ package dev
import ( import (
"bufio" "bufio"
"bytes"
"github.com/acarl005/stripansi"
"net/url" "net/url"
"os" "os"
"strings" "strings"
"github.com/acarl005/stripansi"
) )
// stdoutScanner acts as a stdout target that will scan the incoming // stdoutScanner acts as a stdout target that will scan the incoming
@ -24,17 +24,17 @@ func NewStdoutScanner() *stdoutScanner {
// Write bytes to the scanner. Will copy the bytes to stdout // Write bytes to the scanner. Will copy the bytes to stdout
func (s *stdoutScanner) Write(data []byte) (n int, err error) { func (s *stdoutScanner) Write(data []byte) (n int, err error) {
match := bytes.Index(data, []byte("> Local:")) input := stripansi.Strip(string(data))
match := strings.Index(input, "Local:")
if match != -1 { if match != -1 {
sc := bufio.NewScanner(strings.NewReader(string(data))) sc := bufio.NewScanner(strings.NewReader(input))
for sc.Scan() { for sc.Scan() {
line := sc.Text() line := sc.Text()
index := strings.Index(line, "Local:") index := strings.Index(line, "Local:")
if index == -1 || len(line) < 7 { if index == -1 || len(line) < 7 {
continue continue
} }
line = strings.TrimSpace(line[index+6:]) viteServerURL := strings.TrimSpace(line[index+6:])
viteServerURL := stripansi.Strip(line)
LogGreen("Vite Server URL: %s", viteServerURL) LogGreen("Vite Server URL: %s", viteServerURL)
_, err := url.Parse(viteServerURL) _, err := url.Parse(viteServerURL)
if err != nil { if err != nil {

View File

@ -18,6 +18,13 @@ export interface Size {
h: number; h: number;
} }
export interface Screen {
isCurrent: boolean;
isPrimary: boolean;
width: number
height: number
}
// Environment information such as platform, buildtype, ... // Environment information such as platform, buildtype, ...
export interface EnvironmentInfo { export interface EnvironmentInfo {
buildType: string; buildType: string;
@ -171,6 +178,10 @@ export function WindowUnminimise(): void;
// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels. // Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void; export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
export function ScreenGetAll(): Promise<Screen[]>;
// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl) // [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
// Opens the given URL in the system browser. // Opens the given URL in the system browser.
export function BrowserOpenURL(url: string): void; export function BrowserOpenURL(url: string): void;

View File

@ -109,10 +109,6 @@ export function WindowSetMinSize(width, height) {
window.runtime.WindowSetMinSize(width, height); window.runtime.WindowSetMinSize(width, height);
} }
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}
export function WindowSetPosition(x, y) { export function WindowSetPosition(x, y) {
window.runtime.WindowSetPosition(x, y); window.runtime.WindowSetPosition(x, y);
} }
@ -153,6 +149,10 @@ export function WindowSetBackgroundColour(R, G, B, A) {
window.runtime.WindowSetBackgroundColour(R, G, B, A); window.runtime.WindowSetBackgroundColour(R, G, B, A);
} }
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}
export function BrowserOpenURL(url) { export function BrowserOpenURL(url) {
window.runtime.BrowserOpenURL(url); window.runtime.BrowserOpenURL(url);
} }

View File

@ -0,0 +1,8 @@
import './style.css'
import App from './App.svelte'
const app = new App({
target: document.getElementById('app')
})
export default app

View File

@ -1,26 +0,0 @@
html {
background-color: rgba(27, 38, 54, 1);
text-align: center;
color: white;
}
body {
margin: 0;
color: white;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: local(""),
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
}
#app {
height: 100vh;
text-align: center;
}

View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="./src/style.css" rel="stylesheet">
<title>{{.ProjectName}}</title> <title>{{.ProjectName}}</title>
</head> </head>
<body> <body>

View File

@ -0,0 +1,8 @@
import './style.css'
import App from './App.svelte'
const app = new App({
target: document.getElementById('app')
})
export default app

View File

@ -1,26 +0,0 @@
html {
background-color: rgba(27, 38, 54, 1);
text-align: center;
color: white;
}
body {
margin: 0;
color: white;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: local(""),
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
}
#app {
height: 100vh;
text-align: center;
}

View File

@ -71,7 +71,7 @@ var templates = []*template{
ShortName: "Svelte", ShortName: "Svelte",
Description: "Svelte + Vite development server", Description: "Svelte + Vite development server",
Assets: svelte, Assets: svelte,
FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore", "frontend/src/assets/svelte.png"}, FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore", "frontend/src/app.css", "frontend/src/assets/svelte.svg"},
DirsToDelete: []string{"frontend/public", "frontend/src/lib"}, DirsToDelete: []string{"frontend/public", "frontend/src/lib"},
}, },
{ {
@ -79,81 +79,81 @@ var templates = []*template{
ShortName: "Svelte-TS", ShortName: "Svelte-TS",
Description: "Svelte + TS + Vite development server", Description: "Svelte + TS + Vite development server",
Assets: sveltets, Assets: sveltets,
FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore", "frontend/src/assets/svelte.png"}, FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore", "frontend/src/app.css", "frontend/src/assets/svelte.svg"},
DirsToDelete: []string{"frontend/public", "frontend/src/lib"}, DirsToDelete: []string{"frontend/public", "frontend/src/lib"},
}, },
{ //{
Name: "Lit + Vite", // Name: "Lit + Vite",
ShortName: "Lit", // ShortName: "Lit",
Description: "Lit + Vite development server", // Description: "Lit + Vite development server",
Assets: lit, // Assets: lit,
FilesToDelete: []string{"frontend/index.html", "frontend/vite.config.js"}, // FilesToDelete: []string{"frontend/index.html", "frontend/vite.config.js"},
}, //},
{ //{
Name: "Lit + Vite (Typescript)", // Name: "Lit + Vite (Typescript)",
ShortName: "Lit-TS", // ShortName: "Lit-TS",
Description: "Lit + TS + Vite development server", // Description: "Lit + TS + Vite development server",
Assets: litts, // Assets: litts,
FilesToDelete: []string{"frontend/index.html", "frontend/src/favicon.svg"}, // FilesToDelete: []string{"frontend/index.html", "frontend/src/favicon.svg"},
}, //},
{ //{
Name: "Vue + Vite", // Name: "Vue + Vite",
ShortName: "Vue", // ShortName: "Vue",
Description: "Vue + Vite development server", // Description: "Vue + Vite development server",
Assets: vue, // Assets: vue,
FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore"}, // FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore"},
DirsToDelete: []string{"frontend/src/assets", "frontend/src/components", "frontend/public"}, // DirsToDelete: []string{"frontend/src/assets", "frontend/src/components", "frontend/public"},
}, //},
{ //{
Name: "Vue + Vite (Typescript)", // Name: "Vue + Vite (Typescript)",
ShortName: "Vue-TS", // ShortName: "Vue-TS",
Description: "Vue + Vite development server", // Description: "Vue + Vite development server",
Assets: vuets, // Assets: vuets,
FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore"}, // FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore"},
DirsToDelete: []string{"frontend/src/assets", "frontend/src/components", "frontend/public"}, // DirsToDelete: []string{"frontend/src/assets", "frontend/src/components", "frontend/public"},
}, //},
{ //{
Name: "React + Vite", // Name: "React + Vite",
ShortName: "React", // ShortName: "React",
Description: "React + Vite development server", // Description: "React + Vite development server",
Assets: react, // Assets: react,
FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.svg", "frontend/.gitignore", "frontend/index.html"}, // FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.svg", "frontend/.gitignore", "frontend/index.html"},
}, //},
{ //{
Name: "React + Vite (Typescript)", // Name: "React + Vite (Typescript)",
ShortName: "React-TS", // ShortName: "React-TS",
Description: "React + Vite development server", // Description: "React + Vite development server",
Assets: reactts, // Assets: reactts,
FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.svg", "frontend/.gitignore", "frontend/index.html"}, // FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.svg", "frontend/.gitignore", "frontend/index.html"},
}, //},
{ //{
Name: "Preact + Vite", // Name: "Preact + Vite",
ShortName: "Preact", // ShortName: "Preact",
Description: "Preact + Vite development server", // Description: "Preact + Vite development server",
Assets: preact, // Assets: preact,
FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.jsx", "frontend/.gitignore", "frontend/index.html"}, // FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.jsx", "frontend/.gitignore", "frontend/index.html"},
}, //},
{ //{
Name: "Preact + Vite (Typescript)", // Name: "Preact + Vite (Typescript)",
ShortName: "Preact-TS", // ShortName: "Preact-TS",
Description: "Preact + Vite development server", // Description: "Preact + Vite development server",
Assets: preactts, // Assets: preactts,
FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.tsx", "frontend/.gitignore", "frontend/index.html"}, // FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.tsx", "frontend/.gitignore", "frontend/index.html"},
}, //},
{ //{
Name: "Vanilla + Vite", // Name: "Vanilla + Vite",
ShortName: "Vanilla", // ShortName: "Vanilla",
Description: "Vanilla + Vite development server", // Description: "Vanilla + Vite development server",
Assets: vanilla, // Assets: vanilla,
FilesToDelete: []string{"frontend/.gitignore", "frontend/index.html", "frontend/favicon.svg", "frontend/main.js", "frontend/style.css"}, // FilesToDelete: []string{"frontend/.gitignore", "frontend/index.html", "frontend/favicon.svg", "frontend/main.js", "frontend/style.css"},
}, //},
{ //{
Name: "Vanilla + Vite (Typescript)", // Name: "Vanilla + Vite (Typescript)",
ShortName: "Vanilla-TS", // ShortName: "Vanilla-TS",
Description: "Vanilla + Vite development server", // Description: "Vanilla + Vite development server",
Assets: vanillats, // Assets: vanillats,
FilesToDelete: []string{"frontend/.gitignore", "frontend/index.html", "frontend/favicon.svg", "frontend/src/main.ts", "frontend/src/style.css"}, // FilesToDelete: []string{"frontend/.gitignore", "frontend/index.html", "frontend/favicon.svg", "frontend/src/main.ts", "frontend/src/style.css"},
}, //},
} }
func main() { func main() {

View File

@ -10,13 +10,13 @@
"check": "svelte-check --tsconfig ./tsconfig.json" "check": "svelte-check --tsconfig ./tsconfig.json"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30", "@sveltejs/vite-plugin-svelte": "^1.0.1",
"@tsconfig/svelte": "^2.0.1", "@tsconfig/svelte": "^3.0.0",
"svelte": "^3.44.0", "svelte": "^3.49.0",
"svelte-check": "^2.2.7", "svelte-check": "^2.8.0",
"svelte-preprocess": "^4.9.8", "svelte-preprocess": "^4.10.7",
"tslib": "^2.3.1", "tslib": "^2.4.0",
"typescript": "^4.5.4", "typescript": "^4.6.4",
"vite": "^2.9.9" "vite": "^3.0.0"
} }
} }

View File

@ -1,3 +1,4 @@
import './style.css'
import App from './App.svelte' import App from './App.svelte'
const app = new App({ const app = new App({

View File

@ -1,9 +1,9 @@
{ {
"extends": "@tsconfig/svelte/tsconfig.json", "extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"target": "esnext", "target": "ESNext",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"module": "esnext", "module": "ESNext",
"resolveJsonModule": true, "resolveJsonModule": true,
"baseUrl": ".", "baseUrl": ".",
/** /**

View File

@ -1,8 +1,8 @@
{ {
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"module": "esnext", "module": "ESNext",
"moduleResolution": "node" "moduleResolution": "Node"
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

View File

@ -18,6 +18,13 @@ export interface Size {
h: number; h: number;
} }
export interface Screen {
isCurrent: boolean;
isPrimary: boolean;
width: number
height: number
}
// Environment information such as platform, buildtype, ... // Environment information such as platform, buildtype, ...
export interface EnvironmentInfo { export interface EnvironmentInfo {
buildType: string; buildType: string;
@ -171,6 +178,10 @@ export function WindowUnminimise(): void;
// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels. // Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void; export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
export function ScreenGetAll(): Promise<Screen[]>;
// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl) // [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
// Opens the given URL in the system browser. // Opens the given URL in the system browser.
export function BrowserOpenURL(url: string): void; export function BrowserOpenURL(url: string): void;

View File

@ -149,6 +149,10 @@ export function WindowSetBackgroundColour(R, G, B, A) {
window.runtime.WindowSetBackgroundColour(R, G, B, A); window.runtime.WindowSetBackgroundColour(R, G, B, A);
} }
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}
export function BrowserOpenURL(url) { export function BrowserOpenURL(url) {
window.runtime.BrowserOpenURL(url); window.runtime.BrowserOpenURL(url);
} }
@ -160,7 +164,3 @@ export function Environment() {
export function Quit() { export function Quit() {
window.runtime.Quit(); window.runtime.Quit();
} }
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}

View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="./src/style.css" rel="stylesheet">
<title>{{.ProjectName}}</title> <title>{{.ProjectName}}</title>
</head> </head>
<body> <body>

View File

@ -1,8 +1,8 @@
{ {
"compilerOptions": { "compilerOptions": {
"moduleResolution": "node", "moduleResolution": "Node",
"target": "esnext", "target": "ESNext",
"module": "esnext", "module": "ESNext",
/** /**
* svelte-preprocess cannot figure out whether you have * svelte-preprocess cannot figure out whether you have
* a value or a type, so tell TypeScript to enforce using * a value or a type, so tell TypeScript to enforce using

View File

@ -9,8 +9,8 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30", "@sveltejs/vite-plugin-svelte": "^1.0.1",
"svelte": "^3.44.0", "svelte": "^3.49.0",
"vite": "^2.9.9" "vite": "^3.0.0"
} }
} }

View File

@ -1,3 +1,4 @@
import './style.css'
import App from './App.svelte' import App from './App.svelte'
const app = new App({ const app = new App({

View File

@ -18,6 +18,13 @@ export interface Size {
h: number; h: number;
} }
export interface Screen {
isCurrent: boolean;
isPrimary: boolean;
width: number
height: number
}
// Environment information such as platform, buildtype, ... // Environment information such as platform, buildtype, ...
export interface EnvironmentInfo { export interface EnvironmentInfo {
buildType: string; buildType: string;
@ -171,6 +178,10 @@ export function WindowUnminimise(): void;
// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels. // Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void; export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
export function ScreenGetAll(): Promise<Screen[]>;
// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl) // [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
// Opens the given URL in the system browser. // Opens the given URL in the system browser.
export function BrowserOpenURL(url: string): void; export function BrowserOpenURL(url: string): void;

View File

@ -149,6 +149,10 @@ export function WindowSetBackgroundColour(R, G, B, A) {
window.runtime.WindowSetBackgroundColour(R, G, B, A); window.runtime.WindowSetBackgroundColour(R, G, B, A);
} }
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}
export function BrowserOpenURL(url) { export function BrowserOpenURL(url) {
window.runtime.BrowserOpenURL(url); window.runtime.BrowserOpenURL(url);
} }
@ -160,7 +164,3 @@ export function Environment() {
export function Quit() { export function Quit() {
window.runtime.Quit(); window.runtime.Quit();
} }
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}

View File

@ -69,6 +69,12 @@ func (d *AssetServer) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
header.Add(HeaderCacheControl, "no-cache") header.Add(HeaderCacheControl, "no-cache")
} }
if isWebSocket(req) {
// WebSockets can always directly be forwarded to the handler
d.handler.ServeHTTP(rw, req)
return
}
path := req.URL.Path path := req.URL.Path
switch path { switch path {
case "", "/", "/index.html": case "", "/", "/index.html":

View File

@ -6,6 +6,7 @@ import (
"fmt" "fmt"
"io" "io"
"net/http" "net/http"
"strings"
"golang.org/x/net/html" "golang.org/x/net/html"
) )
@ -16,6 +17,7 @@ const (
HeaderContentLength = "Content-Length" HeaderContentLength = "Content-Length"
HeaderUserAgent = "User-Agent" HeaderUserAgent = "User-Agent"
HeaderCacheControl = "Cache-Control" HeaderCacheControl = "Cache-Control"
HeaderUpgrade = "Upgrade"
WailsUserAgentValue = "wails.io" WailsUserAgentValue = "wails.io"
) )
@ -106,3 +108,8 @@ func findFirstTag(htmlnode *html.Node, tagName string) *html.Node {
result = extractor(htmlnode) result = extractor(htmlnode)
return result return result
} }
func isWebSocket(req *http.Request) bool {
upgrade := req.Header.Get(HeaderUpgrade)
return strings.EqualFold(upgrade, "websocket")
}

View File

@ -3,12 +3,13 @@ package s
import ( import (
"crypto/md5" "crypto/md5"
"fmt" "fmt"
"github.com/bitfield/script"
"io" "io"
"io/ioutil" "io/ioutil"
"os" "os"
"path/filepath" "path/filepath"
"strings" "strings"
"github.com/bitfield/script"
) )
var ( var (
@ -55,13 +56,19 @@ func RENAME(source string, target string) {
checkError(err) checkError(err)
} }
// DELETE a file. // MUSTDELETE a file.
func DELETE(filename string) { func MUSTDELETE(filename string) {
log("DELETE %s", filename) log("DELETE %s", filename)
err := os.Remove(filepath.Join(CWD(), filename)) err := os.Remove(filepath.Join(CWD(), filename))
checkError(err) checkError(err)
} }
// DELETE a file.
func DELETE(filename string) {
log("DELETE %s", filename)
_ = os.Remove(filepath.Join(CWD(), filename))
}
func CD(dir string) { func CD(dir string) {
err := os.Chdir(dir) err := os.Chdir(dir)
checkError(err) checkError(err)