5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-02 16:33: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
go func() {
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()

View File

@ -2,11 +2,11 @@ package dev
import (
"bufio"
"bytes"
"github.com/acarl005/stripansi"
"net/url"
"os"
"strings"
"github.com/acarl005/stripansi"
)
// 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
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 {
sc := bufio.NewScanner(strings.NewReader(string(data)))
sc := bufio.NewScanner(strings.NewReader(input))
for sc.Scan() {
line := sc.Text()
index := strings.Index(line, "Local:")
if index == -1 || len(line) < 7 {
continue
}
line = strings.TrimSpace(line[index+6:])
viteServerURL := stripansi.Strip(line)
viteServerURL := strings.TrimSpace(line[index+6:])
LogGreen("Vite Server URL: %s", viteServerURL)
_, err := url.Parse(viteServerURL)
if err != nil {

View File

@ -18,6 +18,13 @@ export interface Size {
h: number;
}
export interface Screen {
isCurrent: boolean;
isPrimary: boolean;
width: number
height: number
}
// Environment information such as platform, buildtype, ...
export interface EnvironmentInfo {
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.
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)
// Opens the given URL in the system browser.
export function BrowserOpenURL(url: string): void;

View File

@ -109,10 +109,6 @@ export function WindowSetMinSize(width, height) {
window.runtime.WindowSetMinSize(width, height);
}
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}
export function 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);
}
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}
export function 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>
<meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="./src/style.css" rel="stylesheet">
<title>{{.ProjectName}}</title>
</head>
<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",
Description: "Svelte + Vite development server",
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"},
},
{
@ -79,81 +79,81 @@ var templates = []*template{
ShortName: "Svelte-TS",
Description: "Svelte + TS + Vite development server",
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"},
},
{
Name: "Lit + Vite",
ShortName: "Lit",
Description: "Lit + Vite development server",
Assets: lit,
FilesToDelete: []string{"frontend/index.html", "frontend/vite.config.js"},
},
{
Name: "Lit + Vite (Typescript)",
ShortName: "Lit-TS",
Description: "Lit + TS + Vite development server",
Assets: litts,
FilesToDelete: []string{"frontend/index.html", "frontend/src/favicon.svg"},
},
{
Name: "Vue + Vite",
ShortName: "Vue",
Description: "Vue + Vite development server",
Assets: vue,
FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore"},
DirsToDelete: []string{"frontend/src/assets", "frontend/src/components", "frontend/public"},
},
{
Name: "Vue + Vite (Typescript)",
ShortName: "Vue-TS",
Description: "Vue + Vite development server",
Assets: vuets,
FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore"},
DirsToDelete: []string{"frontend/src/assets", "frontend/src/components", "frontend/public"},
},
{
Name: "React + Vite",
ShortName: "React",
Description: "React + Vite development server",
Assets: react,
FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.svg", "frontend/.gitignore", "frontend/index.html"},
},
{
Name: "React + Vite (Typescript)",
ShortName: "React-TS",
Description: "React + Vite development server",
Assets: reactts,
FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.svg", "frontend/.gitignore", "frontend/index.html"},
},
{
Name: "Preact + Vite",
ShortName: "Preact",
Description: "Preact + Vite development server",
Assets: preact,
FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.jsx", "frontend/.gitignore", "frontend/index.html"},
},
{
Name: "Preact + Vite (Typescript)",
ShortName: "Preact-TS",
Description: "Preact + Vite development server",
Assets: preactts,
FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.tsx", "frontend/.gitignore", "frontend/index.html"},
},
{
Name: "Vanilla + Vite",
ShortName: "Vanilla",
Description: "Vanilla + Vite development server",
Assets: vanilla,
FilesToDelete: []string{"frontend/.gitignore", "frontend/index.html", "frontend/favicon.svg", "frontend/main.js", "frontend/style.css"},
},
{
Name: "Vanilla + Vite (Typescript)",
ShortName: "Vanilla-TS",
Description: "Vanilla + Vite development server",
Assets: vanillats,
FilesToDelete: []string{"frontend/.gitignore", "frontend/index.html", "frontend/favicon.svg", "frontend/src/main.ts", "frontend/src/style.css"},
},
//{
// Name: "Lit + Vite",
// ShortName: "Lit",
// Description: "Lit + Vite development server",
// Assets: lit,
// FilesToDelete: []string{"frontend/index.html", "frontend/vite.config.js"},
//},
//{
// Name: "Lit + Vite (Typescript)",
// ShortName: "Lit-TS",
// Description: "Lit + TS + Vite development server",
// Assets: litts,
// FilesToDelete: []string{"frontend/index.html", "frontend/src/favicon.svg"},
//},
//{
// Name: "Vue + Vite",
// ShortName: "Vue",
// Description: "Vue + Vite development server",
// Assets: vue,
// FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore"},
// DirsToDelete: []string{"frontend/src/assets", "frontend/src/components", "frontend/public"},
//},
//{
// Name: "Vue + Vite (Typescript)",
// ShortName: "Vue-TS",
// Description: "Vue + Vite development server",
// Assets: vuets,
// FilesToDelete: []string{"frontend/index.html", "frontend/.gitignore"},
// DirsToDelete: []string{"frontend/src/assets", "frontend/src/components", "frontend/public"},
//},
//{
// Name: "React + Vite",
// ShortName: "React",
// Description: "React + Vite development server",
// Assets: react,
// FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.svg", "frontend/.gitignore", "frontend/index.html"},
//},
//{
// Name: "React + Vite (Typescript)",
// ShortName: "React-TS",
// Description: "React + Vite development server",
// Assets: reactts,
// FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.svg", "frontend/.gitignore", "frontend/index.html"},
//},
//{
// Name: "Preact + Vite",
// ShortName: "Preact",
// Description: "Preact + Vite development server",
// Assets: preact,
// FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.jsx", "frontend/.gitignore", "frontend/index.html"},
//},
//{
// Name: "Preact + Vite (Typescript)",
// ShortName: "Preact-TS",
// Description: "Preact + Vite development server",
// Assets: preactts,
// FilesToDelete: []string{"frontend/src/index.css", "frontend/src/favicon.svg", "frontend/src/logo.tsx", "frontend/.gitignore", "frontend/index.html"},
//},
//{
// Name: "Vanilla + Vite",
// ShortName: "Vanilla",
// Description: "Vanilla + Vite development server",
// Assets: vanilla,
// FilesToDelete: []string{"frontend/.gitignore", "frontend/index.html", "frontend/favicon.svg", "frontend/main.js", "frontend/style.css"},
//},
//{
// Name: "Vanilla + Vite (Typescript)",
// ShortName: "Vanilla-TS",
// Description: "Vanilla + Vite development server",
// Assets: vanillats,
// FilesToDelete: []string{"frontend/.gitignore", "frontend/index.html", "frontend/favicon.svg", "frontend/src/main.ts", "frontend/src/style.css"},
//},
}
func main() {

View File

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

View File

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

View File

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

View File

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

View File

@ -18,6 +18,13 @@ export interface Size {
h: number;
}
export interface Screen {
isCurrent: boolean;
isPrimary: boolean;
width: number
height: number
}
// Environment information such as platform, buildtype, ...
export interface EnvironmentInfo {
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.
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)
// Opens the given URL in the system browser.
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);
}
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}
export function BrowserOpenURL(url) {
window.runtime.BrowserOpenURL(url);
}
@ -160,7 +164,3 @@ export function Environment() {
export function Quit() {
window.runtime.Quit();
}
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}

View File

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

View File

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

View File

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

View File

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

View File

@ -18,6 +18,13 @@ export interface Size {
h: number;
}
export interface Screen {
isCurrent: boolean;
isPrimary: boolean;
width: number
height: number
}
// Environment information such as platform, buildtype, ...
export interface EnvironmentInfo {
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.
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)
// Opens the given URL in the system browser.
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);
}
export function ScreenGetAll() {
return window.runtime.ScreenGetAll();
}
export function BrowserOpenURL(url) {
window.runtime.BrowserOpenURL(url);
}
@ -160,7 +164,3 @@ export function Environment() {
export function 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")
}
if isWebSocket(req) {
// WebSockets can always directly be forwarded to the handler
d.handler.ServeHTTP(rw, req)
return
}
path := req.URL.Path
switch path {
case "", "/", "/index.html":

View File

@ -6,6 +6,7 @@ import (
"fmt"
"io"
"net/http"
"strings"
"golang.org/x/net/html"
)
@ -16,6 +17,7 @@ const (
HeaderContentLength = "Content-Length"
HeaderUserAgent = "User-Agent"
HeaderCacheControl = "Cache-Control"
HeaderUpgrade = "Upgrade"
WailsUserAgentValue = "wails.io"
)
@ -106,3 +108,8 @@ func findFirstTag(htmlnode *html.Node, tagName string) *html.Node {
result = extractor(htmlnode)
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 (
"crypto/md5"
"fmt"
"github.com/bitfield/script"
"io"
"io/ioutil"
"os"
"path/filepath"
"strings"
"github.com/bitfield/script"
)
var (
@ -55,13 +56,19 @@ func RENAME(source string, target string) {
checkError(err)
}
// DELETE a file.
func DELETE(filename string) {
// MUSTDELETE a file.
func MUSTDELETE(filename string) {
log("DELETE %s", filename)
err := os.Remove(filepath.Join(CWD(), filename))
checkError(err)
}
// DELETE a file.
func DELETE(filename string) {
log("DELETE %s", filename)
_ = os.Remove(filepath.Join(CWD(), filename))
}
func CD(dir string) {
err := os.Chdir(dir)
checkError(err)