[v3] Initial template support (likely to change)

v3/Taskfile.yaml

@@ -134,3 +134,87 @@ tasks:
       - install-runtime-deps
     cmds:
       - task: build-runtime-all
+
+  recreate-template-dir:
+    dir: internal/templates
+    internal: true
+    silent: true
+    cmds:
+      - rm -rf {{.TEMPLATE_DIR}}
+      - mkdir -p {{.TEMPLATE_DIR}}
+
+  generate-template:
+    dir: internal/templates/{{.TEMPLATE}}
+    deps:
+      - task: recreate-template-dir
+        vars:
+          TEMPLATE_DIR: "{{.TEMPLATE}}"
+    silent: true
+    cmds:
+      - cmd: pnpm create vite frontend --template {{.TEMPLATE}}
+      - cmd: cp -rf ../_base/{{.TEMPLATE}}/* .
+        ignore_error: true
+      - cmd: cp -rf ../_base/default/* .
+        ignore_error: true
+      - cmd: rm frontend/public/vite.svg
+      - cmd: go run ../../../tasks/sed/sed.go replace -dir frontend -old Vite -new Wails -ext .ts,.js,.html -ignore vite.config.js,vite.config.ts,vite-env.d.ts
+      - cmd: go run ../../../tasks/sed/sed.go replace -dir frontend -old vite -new wails -ext .ts,.js,.html -ignore vite.config.js,vite.config.ts,vite-env.d.ts
+      - cmd: go run ../../../tasks/sed/sed.go replace -dir frontend -old wails.svg -new wails.png -ext .ts,.js,.html -ignore vite.config.js,vite.config.ts,vite-env.d.ts
+      - cmd: go run ../../../tasks/sed/sed.go replace -dir frontend -old wailsjs.dev -new wails.io -ext .ts,.js,.html -ignore vite.config.js,vite.config.ts,vite-env.d.ts
+      - cmd: go run ../../../tasks/sed/sed.go replace -dir frontend -old "framework powered by Wails" -new "framework powered by Vite" -ext .ts,.js,.html,.svelte -ignore vite.config.js,vite.config.ts,vite-env.d.ts
+
+  reinstall-cli:
+    dir: cmd/wails
+    internal: true
+    cmds:
+      - go install
+      - echo "Reinstalled wails CLI"
+
+  generate-templates:
+    dir: internal/templates/
+    deps:
+      - task: generate-template
+        vars:
+          TEMPLATE: svelte
+      - task: generate-template
+        vars:
+          TEMPLATE: svelte-ts
+      - task: generate-template
+        vars:
+          TEMPLATE: vue
+      - task: generate-template
+        vars:
+          TEMPLATE: vue-ts
+      - task: generate-template
+        vars:
+          TEMPLATE: react
+      - task: generate-template
+        vars:
+          TEMPLATE: react-ts
+      - task: generate-template
+        vars:
+          TEMPLATE: preact
+      - task: generate-template
+        vars:
+          TEMPLATE: preact-ts
+      - task: generate-template
+        vars:
+          TEMPLATE: lit
+      - task: generate-template
+        vars:
+          TEMPLATE: lit-ts
+      - task: generate-template
+        vars:
+          TEMPLATE: vanilla
+      - task: generate-template
+        vars:
+          TEMPLATE: vanilla-ts
+      - task: generate-template
+        vars:
+          TEMPLATE: react-swc
+      - task: generate-template
+        vars:
+          TEMPLATE: react-swc-ts
+    cmds:
+      - task: reinstall-cli
+      - echo "Generated templates"

v3/examples/build/Taskfile.yml

@@ -20,10 +20,9 @@ tasks:
 
   generate-icons:
     summary: Generates Windows `.ico` and Mac `.icns` files from an image
-    dir: build
     cmds:
       # Generates both .ico and .icns files
-      - wails generate icon -input appicon.png
+      - wails generate icons -input appicon.png
 
   build-prod:
     summary: Creates a production build of the application

v3/go.mod

@@ -6,6 +6,7 @@ require (
 	github.com/go-task/task/v3 v3.20.0
 	github.com/jackmordaunt/icns/v2 v2.2.1
 	github.com/leaanthony/clir v1.5.0
+	github.com/leaanthony/gosod v1.0.3
 	github.com/leaanthony/winicon v1.0.0
 	github.com/pterm/pterm v0.12.51
 	github.com/samber/lo v1.37.0

v3/go.sum

@@ -49,6 +49,10 @@ github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/leaanthony/clir v1.0.4/go.mod h1:k/RBkdkFl18xkkACMCLt09bhiZnrGORoxmomeMvDpE0=
 github.com/leaanthony/clir v1.5.0 h1:zaH7fgsZ5OLfr0YwJBwQ+EYxCjXQsHF+CRudIiZb0KQ=
 github.com/leaanthony/clir v1.5.0/go.mod h1:k/RBkdkFl18xkkACMCLt09bhiZnrGORoxmomeMvDpE0=
+github.com/leaanthony/debme v1.2.1 h1:9Tgwf+kjcrbMQ4WnPcEIUcQuIZYqdWftzZkBr+i/oOc=
+github.com/leaanthony/debme v1.2.1/go.mod h1:3V+sCm5tYAgQymvSOfYQ5Xx2JCr+OXiD9Jkw3otUjiA=
+github.com/leaanthony/gosod v1.0.3 h1:Fnt+/B6NjQOVuCWOKYRREZnjGyvg+mEhd1nkkA04aTQ=
+github.com/leaanthony/gosod v1.0.3/go.mod h1:BJ2J+oHsQIyIQpnLPjnqFGTMnOZXDbvWtRCSG7jGxs4=
 github.com/leaanthony/slicer v1.5.0 h1:aHYTN8xbCCLxJmkNKiLB6tgcMARl4eWmH9/F+S/0HtY=
 github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
 github.com/leaanthony/winicon v1.0.0 h1:ZNt5U5dY71oEoKZ97UVwJRT4e+5xo5o/ieKuHuk8NqQ=
@@ -56,6 +60,7 @@ github.com/leaanthony/winicon v1.0.0/go.mod h1:en5xhijl92aphrJdmRPlh4NI1L6wq3gEm
 github.com/lithammer/fuzzysearch v1.1.5 h1:Ag7aKU08wp0R9QCfF4GoGST9HbmAIeLP7xwMrOBEp1c=
 github.com/lithammer/fuzzysearch v1.1.5/go.mod h1:1R1LRNk7yKid1BaQkmuLQaHruxcC4HmAH30Dh61Ih1Q=
 github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
+github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
 github.com/mattn/go-colorable v0.1.9/go.mod h1:u6P/XSegPjTcexA+o6vUJrdnUu04hMope9wVRipJSqc=
 github.com/mattn/go-colorable v0.1.11 h1:nQ+aFkoE2TMGc0b68U2OKSexC+eq46+XwZzWXHRmPYs=
 github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
@@ -114,8 +119,6 @@ github.com/tc-hib/winres v0.1.6 h1:qgsYHze+BxQPEYilxIz/KCQGaClvI2+yLBAZs+3+0B8=
 github.com/tc-hib/winres v0.1.6/go.mod h1:pe6dOR40VOrGz8PkzreVKNvEKnlE8t4yR8A8naL+t7A=
 github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
-github.com/wailsapp/task/v3 v3.19.1 h1:syDKYaPBXgrXKKSJVEWcOEoSFtZzpvxqlHf90YRukRc=
-github.com/wailsapp/task/v3 v3.19.1/go.mod h1:y7rWakbLR5gFElGgo6rA2dyr6vU/zNIDVfn3S4Of6OI=
 github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 h1:Wn+nhnS+VytzE0PegUzSh4T3hXJCtggKGD/4U5H9+wQ=
 github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6/go.mod h1:zlNLI0E2c2qA6miiuAHtp0Bac8FaGH0tlhA19OssR/8=
 github.com/xo/terminfo v0.0.0-20210125001918-ca9a967f8778 h1:QldyIu/L63oPpyvQmHgvgickp1Yw510KJOqX7H24mg8=

v3/internal/commands/icons.go

@@ -15,17 +15,9 @@ import (
 type IconsOptions struct {
 	Example         bool   `description:"Generate example icon file (appicon.png) in the current directory"`
 	Input           string `description:"The input image file"`
-	Sizes           string `description:"The sizes to generate in .ico file (comma separated)"`
-	WindowsFilename string `description:"The output filename for the Windows icon"`
-	MacFilename     string `description:"The output filename for the Mac icon bundle"`
-}
-
-func (i *IconsOptions) Default() *IconsOptions {
-	return &IconsOptions{
-		Sizes:           "256,128,64,48,32,16",
-		MacFilename:     "icons.icns",
-		WindowsFilename: "icons.ico",
-	}
+	Sizes           string `description:"The sizes to generate in .ico file (comma separated)" default:"256,128,64,48,32,16"`
+	WindowsFilename string `description:"The output filename for the Windows icon" default:"icon.ico"`
+	MacFilename     string `description:"The output filename for the Mac icon bundle" default:"icons.icns"`
 }
 
 func GenerateIcons(options *IconsOptions) error {
@@ -51,7 +43,6 @@ func GenerateIcons(options *IconsOptions) error {
 			return err
 		}
 	}
-
 	iconData, err := os.ReadFile(options.Input)
 	if err != nil {
 		return err

v3/internal/commands/init.go

@@ -1,8 +1,44 @@
 package commands
 
-type InitOptions struct {
+import (
+	"fmt"
+
+	"github.com/wailsapp/wails/v3/internal/flags"
+	"github.com/wailsapp/wails/v3/internal/templates"
+
+	"github.com/pterm/pterm"
+)
+
+func Init(options *flags.Init) error {
+	if options.List {
+		return printTemplates()
 	}
 
-func Init(options *InitOptions) error {
-	return nil
+	if options.Quiet {
+		pterm.DisableOutput()
+	}
+
+	if options.ProjectName == "" {
+		return fmt.Errorf("please use the -n flag to specify a project name")
+	}
+
+	if !templates.ValidTemplateName(options.TemplateName) {
+		return fmt.Errorf("invalid template name: %s. Use -l flag to view available templates", options.TemplateName)
+	}
+
+	return templates.Install(options)
+}
+
+func printTemplates() error {
+	defaultTemplates := templates.GetDefaultTemplates()
+
+	pterm.DefaultSection.Println("Available templates")
+
+	table := pterm.TableData{{"Name", "Description"}}
+	for _, template := range defaultTemplates {
+		table = append(table, []string{template.Name, template.Description})
+	}
+	err := pterm.DefaultTable.WithHasHeader(true).WithBoxed(true).WithData(table).Render()
+	pterm.Println()
+	return err
 }

v3/internal/commands/task.go

@@ -44,7 +44,7 @@ func ListTasks(options *ListTaskOptions) error {
 		return err
 	}
 	if len(tasks) == 0 {
-		return fmt.Errorf("no tasks found. Ensure there is a `Taskfile.yml` in your project. You can generate a default takfile by running `wails generate defaults`")
+		return fmt.Errorf("no tasks found. Ensure there is a `Taskfile.tmpl.yml` in your project. You can generate a default takfile by running `wails generate defaults`")
 	}
 	tableData := [][]string{
 		{"Task", "Summary"},

v3/internal/flags/common.go

@@ -0,0 +1,5 @@
+package flags
+
+type Common struct {
+	NoColour bool `description:"Disable colour in output"`
+}

v3/internal/flags/init.go

@@ -0,0 +1,14 @@
+package flags
+
+type Init struct {
+	Common
+
+	TemplateName string `name:"t" description:"Name of built-in template to use, path to template or template url" default:"vanilla"`
+	ProjectName  string `name:"n" description:"Name of project" default:"."`
+	//CIMode       bool   `name:"ci" description:"CI Mode"`
+	ProjectDir string `name:"d" description:"Project directory" default:"."`
+	Quiet      bool   `name:"q" description:"Suppress output to console"`
+	//InitGit    bool   `name:"g" description:"Initialise git repository"`
+	//IDE        string `name:"ide" description:"Generate IDE project files"`
+	List bool `name:"l" description:"List templates"`
+}

v3/internal/templates/_base/default/Taskfile.tmpl.yml

@@ -0,0 +1,82 @@
+version: '3'
+
+vars:
+  APP_NAME: "{{.ProjectName}}"
+
+tasks:
+
+  pre-build:
+    summary: Pre-build hooks
+
+  post-build:
+    summary: Post-build hooks
+
+  install-frontend-deps:
+    summary: Install frontend dependencies
+    dir: frontend
+    sources:
+      - package.json
+      - package-lock.json
+    generates:
+      - node_modules/*
+    preconditions:
+      - sh: npm version
+        msg: "Looks like npm isn't installed. Npm is part of the Node installer: https://nodejs.org/en/download/"
+    cmds:
+      - npm install
+
+  build-frontend:
+    summary: Build the frontend project
+    dir: frontend
+    deps:
+      - install-frontend-deps
+    cmds:
+      - npm run build
+
+  build:
+    summary: Builds the application
+    cmds:
+      - task: pre-build
+      - task: build-frontend
+      - go build -gcflags=all="-N -l" -o build/bin/{{ "{{.APP_NAME}}" }} main.go
+      - task: post-build
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+
+  generate-icons:
+    summary: Generates Windows `.ico` and Mac `.icns` files from an image
+    dir: build
+    cmds:
+      # Generates both .ico and .icns files
+      - wails generate icons -input appicon.png
+
+  build-app-prod-darwin:
+    summary: Creates a production build of the application
+    cmds:
+      - GOOS=darwin GOARCH={{ "{{.ARCH}}" }} go build -tags production -ldflags="-w -s" -o build/bin/{{ "{{.APP_NAME}}" }}
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+    vars:
+      ARCH: $GOARCH
+
+
+  create-app-bundle:
+    summary: Builds a `.app` bundle
+    cmds:
+      - mkdir -p {{ "{{.APP_NAME}}" }}.app/Contents/{MacOS,Resources}
+      - cp build/icons.icns {{ "{{.APP_NAME}}" }}.app/Contents/Resources
+      - cp build/bin/{{ "{{.APP_NAME}}" }} {{ "{{.APP_NAME}}" }}.app/Contents/MacOS
+      - cp build/Info.plist {{ "{{.APP_NAME}}" }}.app/Contents
+
+  package-darwin-arm64:
+    summary: Packages a production build of the application into a `.app` bundle
+    platform: darwin
+    deps:
+      - task: build-app-prod-darwin
+        vars:
+            ARCH: arm64
+      - generate-icons
+    cmds:
+      - task: create-app-bundle

v3/internal/templates/_base/default/build/Info.plist.tmpl

@@ -0,0 +1,27 @@
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+        <key>CFBundlePackageType</key>
+        <string>APPL</string>
+        <key>CFBundleName</key>
+        <string>{{ "{{.Info.ProductName}}" }}</string>
+        <key>CFBundleExecutable</key>
+        <string>{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleIdentifier</key>
+        <string>com.wails.{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleVersion</key>
+        <string>v1.0.0</string>
+        <key>CFBundleGetInfoString</key>
+        <string>This is a comment</string>
+        <key>CFBundleShortVersionString</key>
+        <string>v1.0.0</string>
+        <key>CFBundleIconFile</key>
+        <string>iconfile</string>
+        <key>LSMinimumSystemVersion</key>
+        <string>10.13.0</string>
+        <key>NSHighResolutionCapable</key>
+        <string>true</string>
+        <key>NSHumanReadableCopyright</key>
+        <string>(c) 2023 My Company Name</string>
+    </dict>
+</plist>

v3/internal/templates/_base/default/build/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "v1.0.0"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "v1.0.0",
+			"CompanyName": "My Company Name",
+			"FileDescription": "A thing that does a thing",
+			"LegalCopyright": "(c) 2023 My Company Name",
+			"ProductName": "My Product Name",
+			"Comments": "This is a comment"
+		}
+	}
+}

v3/internal/templates/_base/default/go.mod.tmpl

@@ -0,0 +1,13 @@
+module changeme
+
+go 1.19
+
+require github.com/wailsapp/wails/v3 v3.0.0-alpha.0
+
+require (
+	github.com/imdario/mergo v0.3.12 // indirect
+	github.com/leaanthony/slicer v1.5.0 // indirect
+	github.com/wailsapp/mimetype v1.4.1 // indirect
+	github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 // indirect
+	golang.org/x/net v0.0.0-20220722155237-a158d28d115b // indirect
+)

v3/internal/templates/_base/default/go.sum.tmpl

@@ -0,0 +1,22 @@
+github.com/imdario/mergo v0.3.12 h1:b6R2BslTbIEToALKP7LxUvijTsNI9TAe80pLWN2g/HU=
+github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
+github.com/leaanthony/slicer v1.5.0 h1:aHYTN8xbCCLxJmkNKiLB6tgcMARl4eWmH9/F+S/0HtY=
+github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
+github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
+github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
+github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 h1:Wn+nhnS+VytzE0PegUzSh4T3hXJCtggKGD/4U5H9+wQ=
+github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6/go.mod h1:zlNLI0E2c2qA6miiuAHtp0Bac8FaGH0tlhA19OssR/8=
+github.com/wailsapp/wails/v3 v3.0.0-alpha.0 h1:T5gqG98Xr8LBf69oxlPkhpsFD59w2SnqUZk6XHj8Zoc=
+github.com/wailsapp/wails/v3 v3.0.0-alpha.0/go.mod h1:OAfO5bP0TSUvCIHZYc6Dqfow/9RqxzHvYtmhWPpo1c0=
+golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b h1:PxfKdU9lEEDYjdIzOtC4qFWgkU2rGHdKlKowJSMN9h0=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.3.0 h1:clyUAQHOM3G0M3f5vQj7LuJrETvjVot3Z5el9nffUtU=
+gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=

v3/internal/templates/_base/default/main.tmpl.go

@@ -0,0 +1,45 @@
+package main
+
+import (
+	"embed"
+	_ "embed"
+	"log"
+
+	"github.com/wailsapp/wails/v3/pkg/options"
+
+	"github.com/wailsapp/wails/v3/pkg/application"
+)
+
+//go:embed frontend/dist
+var assets embed.FS
+
+func main() {
+	app := application.New(options.Application{
+		Name:        "{{.ProjectName}}",
+		Description: "A demo of using raw HTML & CSS",
+		Mac: options.Mac{
+			ApplicationShouldTerminateAfterLastWindowClosed: true,
+		},
+	})
+	// Create window
+	app.NewWebviewWindowWithOptions(&options.WebviewWindow{
+		Title: "Plain Bundle",
+		CSS:   `body { background-color: rgba(255, 255, 255, 0); } .main { color: white; margin: 20%; }`,
+		Mac: options.MacWindow{
+			InvisibleTitleBarHeight: 50,
+			Backdrop:                options.MacBackdropTranslucent,
+			TitleBar:                options.TitleBarHiddenInset,
+		},
+
+		URL: "/",
+		Assets: options.Assets{
+			FS: assets,
+		},
+	})
+
+	err := app.Run()
+
+	if err != nil {
+		log.Fatal(err)
+	}
+}

v3/internal/templates/_base/lit-ts/frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Lit + TS</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="/src/my-element.ts"></script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Wails + Lit</h1>
+    </my-element>
+  </body>
+</html>

v3/internal/templates/_base/lit/frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Lit</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="/src/my-element.js"></script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Wails + Lit</h1>
+    </my-element>
+  </body>
+</html>

v3/internal/templates/_base/preact-ts/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Preact + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

v3/internal/templates/_base/preact/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Preact</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

v3/internal/templates/_base/react-swc-ts/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

v3/internal/templates/_base/react-swc/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

v3/internal/templates/_base/react-ts/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

v3/internal/templates/_base/react/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

v3/internal/templates/_base/svelte-ts/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

v3/internal/templates/_base/svelte/frontend/README.md

@@ -0,0 +1 @@
+# Wails + Svelte

v3/internal/templates/_base/svelte/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Svelte</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

v3/internal/templates/_base/svelte/frontend/src/App.svelte

@@ -0,0 +1,45 @@
+<script>
+  import svelteLogo from './assets/svelte.svg'
+  import Counter from './lib/Counter.svelte'
+</script>
+
+<main>
+  <div>
+    <a href="https://wails.io" target="_blank" rel="noreferrer">
+      <img src="/wails.png" class="logo" alt="Wails Logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank" rel="noreferrer"> 
+      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+    </a>
+  </div>
+  <h1>Wails + Svelte</h1>
+
+  <div class="card">
+    <Counter />
+  </div>
+
+  <p>
+    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Wails!
+  </p>
+
+  <p class="read-the-docs">
+    Click on the Wails and Svelte logos to learn more
+  </p>
+</main>
+
+<style>
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+  .read-the-docs {
+    color: #888;
+  }
+</style>

v3/internal/templates/_base/vanilla-ts/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

v3/internal/templates/_base/vanilla/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

v3/internal/templates/_base/vue-ts/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

v3/internal/templates/_base/vue/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

v3/internal/templates/lit-ts/Taskfile.tmpl.yml

@@ -0,0 +1,82 @@
+version: '3'
+
+vars:
+  APP_NAME: "{{.ProjectName}}"
+
+tasks:
+
+  pre-build:
+    summary: Pre-build hooks
+
+  post-build:
+    summary: Post-build hooks
+
+  install-frontend-deps:
+    summary: Install frontend dependencies
+    dir: frontend
+    sources:
+      - package.json
+      - package-lock.json
+    generates:
+      - node_modules/*
+    preconditions:
+      - sh: npm version
+        msg: "Looks like npm isn't installed. Npm is part of the Node installer: https://nodejs.org/en/download/"
+    cmds:
+      - npm install
+
+  build-frontend:
+    summary: Build the frontend project
+    dir: frontend
+    deps:
+      - install-frontend-deps
+    cmds:
+      - npm run build
+
+  build:
+    summary: Builds the application
+    cmds:
+      - task: pre-build
+      - task: build-frontend
+      - go build -gcflags=all="-N -l" -o build/bin/{{ "{{.APP_NAME}}" }} main.go
+      - task: post-build
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+
+  generate-icons:
+    summary: Generates Windows `.ico` and Mac `.icns` files from an image
+    dir: build
+    cmds:
+      # Generates both .ico and .icns files
+      - wails generate icons -input appicon.png
+
+  build-app-prod-darwin:
+    summary: Creates a production build of the application
+    cmds:
+      - GOOS=darwin GOARCH={{ "{{.ARCH}}" }} go build -tags production -ldflags="-w -s" -o build/bin/{{ "{{.APP_NAME}}" }}
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+    vars:
+      ARCH: $GOARCH
+
+
+  create-app-bundle:
+    summary: Builds a `.app` bundle
+    cmds:
+      - mkdir -p {{ "{{.APP_NAME}}" }}.app/Contents/{MacOS,Resources}
+      - cp build/icons.icns {{ "{{.APP_NAME}}" }}.app/Contents/Resources
+      - cp build/bin/{{ "{{.APP_NAME}}" }} {{ "{{.APP_NAME}}" }}.app/Contents/MacOS
+      - cp build/Info.plist {{ "{{.APP_NAME}}" }}.app/Contents
+
+  package-darwin-arm64:
+    summary: Packages a production build of the application into a `.app` bundle
+    platform: darwin
+    deps:
+      - task: build-app-prod-darwin
+        vars:
+            ARCH: arm64
+      - generate-icons
+    cmds:
+      - task: create-app-bundle

v3/internal/templates/lit-ts/build/Info.plist.tmpl

@@ -0,0 +1,27 @@
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+        <key>CFBundlePackageType</key>
+        <string>APPL</string>
+        <key>CFBundleName</key>
+        <string>{{ "{{.Info.ProductName}}" }}</string>
+        <key>CFBundleExecutable</key>
+        <string>{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleIdentifier</key>
+        <string>com.wails.{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleVersion</key>
+        <string>v1.0.0</string>
+        <key>CFBundleGetInfoString</key>
+        <string>This is a comment</string>
+        <key>CFBundleShortVersionString</key>
+        <string>v1.0.0</string>
+        <key>CFBundleIconFile</key>
+        <string>iconfile</string>
+        <key>LSMinimumSystemVersion</key>
+        <string>10.13.0</string>
+        <key>NSHighResolutionCapable</key>
+        <string>true</string>
+        <key>NSHumanReadableCopyright</key>
+        <string>(c) 2023 My Company Name</string>
+    </dict>
+</plist>

v3/internal/templates/lit-ts/build/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "v1.0.0"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "v1.0.0",
+			"CompanyName": "My Company Name",
+			"FileDescription": "A thing that does a thing",
+			"LegalCopyright": "(c) 2023 My Company Name",
+			"ProductName": "My Product Name",
+			"Comments": "This is a comment"
+		}
+	}
+}

v3/internal/templates/lit-ts/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

v3/internal/templates/lit-ts/frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Lit + TS</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="/src/my-element.ts"></script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Wails + Lit</h1>
+    </my-element>
+  </body>
+</html>

v3/internal/templates/lit-ts/frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/my-element.es.js",
+  "exports": {
+    ".": "./dist/my-element.es.js"
+  },
+  "types": "types/my-element.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "lit": "^2.4.1"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
+  }
+}

v3/internal/templates/lit-ts/frontend/src/assets/lit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>

v3/internal/templates/lit-ts/frontend/src/index.css

@@ -0,0 +1,40 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}

v3/internal/templates/lit-ts/frontend/src/my-element.ts

@@ -0,0 +1,125 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import litLogo from './assets/lit.svg'
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('my-element')
+export class MyElement extends LitElement {
+  /**
+   * Copy for the read the docs hint.
+   */
+  @property()
+  docsHint = 'Click on the Wails and Lit logos to learn more'
+
+  /**
+   * The number of times the button has been clicked.
+   */
+  @property({ type: Number })
+  count = 0
+
+  render() {
+    return html`
+      <div>
+        <a href="https://wails.io" target="_blank">
+          <img src="/wails.png" class="logo" alt="Wails logo" />
+        </a>
+        <a href="https://lit.dev" target="_blank">
+          <img src=${litLogo} class="logo lit" alt="Lit logo" />
+        </a>
+      </div>
+      <slot></slot>
+      <div class="card">
+        <button @click=${this._onClick} part="button">
+          count is ${this.count}
+        </button>
+      </div>
+      <p class="read-the-docs">${this.docsHint}</p>
+    `
+  }
+
+  private _onClick() {
+    this.count++
+  }
+
+  static styles = css`
+    :host {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 2rem;
+      text-align: center;
+    }
+
+    .logo {
+      height: 6em;
+      padding: 1.5em;
+      will-change: filter;
+    }
+    .logo:hover {
+      filter: drop-shadow(0 0 2em #646cffaa);
+    }
+    .logo.lit:hover {
+      filter: drop-shadow(0 0 2em #325cffaa);
+    }
+
+    .card {
+      padding: 2em;
+    }
+
+    .read-the-docs {
+      color: #888;
+    }
+
+    h1 {
+      font-size: 3.2em;
+      line-height: 1.1;
+    }
+
+    a {
+      font-weight: 500;
+      color: #646cff;
+      text-decoration: inherit;
+    }
+    a:hover {
+      color: #535bf2;
+    }
+
+    button {
+      border-radius: 8px;
+      border: 1px solid transparent;
+      padding: 0.6em 1.2em;
+      font-size: 1em;
+      font-weight: 500;
+      font-family: inherit;
+      background-color: #1a1a1a;
+      cursor: pointer;
+      transition: border-color 0.25s;
+    }
+    button:hover {
+      border-color: #646cff;
+    }
+    button:focus,
+    button:focus-visible {
+      outline: 4px auto -webkit-focus-ring-color;
+    }
+
+    @media (prefers-color-scheme: light) {
+      a:hover {
+        color: #747bff;
+      }
+      button {
+        background-color: #f9f9f9;
+      }
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'my-element': MyElement
+  }
+}

v3/internal/templates/lit-ts/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

v3/internal/templates/lit-ts/frontend/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./types",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "Node",
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": false,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

v3/internal/templates/lit-ts/frontend/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

v3/internal/templates/lit-ts/frontend/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/my-element.ts',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: /^lit/,
+    },
+  },
+})

v3/internal/templates/lit-ts/go.mod.tmpl

@@ -0,0 +1,13 @@
+module changeme
+
+go 1.19
+
+require github.com/wailsapp/wails/v3 v3.0.0-alpha.0
+
+require (
+	github.com/imdario/mergo v0.3.12 // indirect
+	github.com/leaanthony/slicer v1.5.0 // indirect
+	github.com/wailsapp/mimetype v1.4.1 // indirect
+	github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 // indirect
+	golang.org/x/net v0.0.0-20220722155237-a158d28d115b // indirect
+)

v3/internal/templates/lit-ts/go.sum.tmpl

@@ -0,0 +1,22 @@
+github.com/imdario/mergo v0.3.12 h1:b6R2BslTbIEToALKP7LxUvijTsNI9TAe80pLWN2g/HU=
+github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
+github.com/leaanthony/slicer v1.5.0 h1:aHYTN8xbCCLxJmkNKiLB6tgcMARl4eWmH9/F+S/0HtY=
+github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
+github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
+github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
+github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 h1:Wn+nhnS+VytzE0PegUzSh4T3hXJCtggKGD/4U5H9+wQ=
+github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6/go.mod h1:zlNLI0E2c2qA6miiuAHtp0Bac8FaGH0tlhA19OssR/8=
+github.com/wailsapp/wails/v3 v3.0.0-alpha.0 h1:T5gqG98Xr8LBf69oxlPkhpsFD59w2SnqUZk6XHj8Zoc=
+github.com/wailsapp/wails/v3 v3.0.0-alpha.0/go.mod h1:OAfO5bP0TSUvCIHZYc6Dqfow/9RqxzHvYtmhWPpo1c0=
+golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b h1:PxfKdU9lEEDYjdIzOtC4qFWgkU2rGHdKlKowJSMN9h0=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.3.0 h1:clyUAQHOM3G0M3f5vQj7LuJrETvjVot3Z5el9nffUtU=
+gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=

v3/internal/templates/lit-ts/main.tmpl.go

@@ -0,0 +1,45 @@
+package main
+
+import (
+	"embed"
+	_ "embed"
+	"log"
+
+	"github.com/wailsapp/wails/v3/pkg/options"
+
+	"github.com/wailsapp/wails/v3/pkg/application"
+)
+
+//go:embed frontend/dist
+var assets embed.FS
+
+func main() {
+	app := application.New(options.Application{
+		Name:        "{{.ProjectName}}",
+		Description: "A demo of using raw HTML & CSS",
+		Mac: options.Mac{
+			ApplicationShouldTerminateAfterLastWindowClosed: true,
+		},
+	})
+	// Create window
+	app.NewWebviewWindowWithOptions(&options.WebviewWindow{
+		Title: "Plain Bundle",
+		CSS:   `body { background-color: rgba(255, 255, 255, 0); } .main { color: white; margin: 20%; }`,
+		Mac: options.MacWindow{
+			InvisibleTitleBarHeight: 50,
+			Backdrop:                options.MacBackdropTranslucent,
+			TitleBar:                options.TitleBarHiddenInset,
+		},
+
+		URL: "/",
+		Assets: options.Assets{
+			FS: assets,
+		},
+	})
+
+	err := app.Run()
+
+	if err != nil {
+		log.Fatal(err)
+	}
+}

v3/internal/templates/lit/Taskfile.tmpl.yml

@@ -0,0 +1,82 @@
+version: '3'
+
+vars:
+  APP_NAME: "{{.ProjectName}}"
+
+tasks:
+
+  pre-build:
+    summary: Pre-build hooks
+
+  post-build:
+    summary: Post-build hooks
+
+  install-frontend-deps:
+    summary: Install frontend dependencies
+    dir: frontend
+    sources:
+      - package.json
+      - package-lock.json
+    generates:
+      - node_modules/*
+    preconditions:
+      - sh: npm version
+        msg: "Looks like npm isn't installed. Npm is part of the Node installer: https://nodejs.org/en/download/"
+    cmds:
+      - npm install
+
+  build-frontend:
+    summary: Build the frontend project
+    dir: frontend
+    deps:
+      - install-frontend-deps
+    cmds:
+      - npm run build
+
+  build:
+    summary: Builds the application
+    cmds:
+      - task: pre-build
+      - task: build-frontend
+      - go build -gcflags=all="-N -l" -o build/bin/{{ "{{.APP_NAME}}" }} main.go
+      - task: post-build
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+
+  generate-icons:
+    summary: Generates Windows `.ico` and Mac `.icns` files from an image
+    dir: build
+    cmds:
+      # Generates both .ico and .icns files
+      - wails generate icons -input appicon.png
+
+  build-app-prod-darwin:
+    summary: Creates a production build of the application
+    cmds:
+      - GOOS=darwin GOARCH={{ "{{.ARCH}}" }} go build -tags production -ldflags="-w -s" -o build/bin/{{ "{{.APP_NAME}}" }}
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+    vars:
+      ARCH: $GOARCH
+
+
+  create-app-bundle:
+    summary: Builds a `.app` bundle
+    cmds:
+      - mkdir -p {{ "{{.APP_NAME}}" }}.app/Contents/{MacOS,Resources}
+      - cp build/icons.icns {{ "{{.APP_NAME}}" }}.app/Contents/Resources
+      - cp build/bin/{{ "{{.APP_NAME}}" }} {{ "{{.APP_NAME}}" }}.app/Contents/MacOS
+      - cp build/Info.plist {{ "{{.APP_NAME}}" }}.app/Contents
+
+  package-darwin-arm64:
+    summary: Packages a production build of the application into a `.app` bundle
+    platform: darwin
+    deps:
+      - task: build-app-prod-darwin
+        vars:
+            ARCH: arm64
+      - generate-icons
+    cmds:
+      - task: create-app-bundle

v3/internal/templates/lit/build/Info.plist.tmpl

@@ -0,0 +1,27 @@
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+        <key>CFBundlePackageType</key>
+        <string>APPL</string>
+        <key>CFBundleName</key>
+        <string>{{ "{{.Info.ProductName}}" }}</string>
+        <key>CFBundleExecutable</key>
+        <string>{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleIdentifier</key>
+        <string>com.wails.{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleVersion</key>
+        <string>v1.0.0</string>
+        <key>CFBundleGetInfoString</key>
+        <string>This is a comment</string>
+        <key>CFBundleShortVersionString</key>
+        <string>v1.0.0</string>
+        <key>CFBundleIconFile</key>
+        <string>iconfile</string>
+        <key>LSMinimumSystemVersion</key>
+        <string>10.13.0</string>
+        <key>NSHighResolutionCapable</key>
+        <string>true</string>
+        <key>NSHumanReadableCopyright</key>
+        <string>(c) 2023 My Company Name</string>
+    </dict>
+</plist>

v3/internal/templates/lit/build/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "v1.0.0"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "v1.0.0",
+			"CompanyName": "My Company Name",
+			"FileDescription": "A thing that does a thing",
+			"LegalCopyright": "(c) 2023 My Company Name",
+			"ProductName": "My Product Name",
+			"Comments": "This is a comment"
+		}
+	}
+}

v3/internal/templates/lit/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

v3/internal/templates/lit/frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Lit</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="/src/my-element.js"></script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Wails + Lit</h1>
+    </my-element>
+  </body>
+</html>

v3/internal/templates/lit/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/my-element.es.js",
+  "exports": {
+    ".": "./dist/my-element.es.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "lit": "^2.4.1"
+  },
+  "devDependencies": {
+    "vite": "^4.0.0"
+  }
+}

v3/internal/templates/lit/frontend/src/assets/lit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>

v3/internal/templates/lit/frontend/src/index.css

@@ -0,0 +1,31 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}

v3/internal/templates/lit/frontend/src/my-element.js

@@ -0,0 +1,129 @@
+import { LitElement, css, html } from 'lit'
+import litLogo from './assets/lit.svg'
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class MyElement extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * Copy for the read the docs hint.
+       */
+      docsHint: { type: String },
+
+      /**
+       * The number of times the button has been clicked.
+       */
+      count: { type: Number },
+    }
+  }
+
+  constructor() {
+    super()
+    this.docsHint = 'Click on the Wails and Lit logos to learn more'
+    this.count = 0
+  }
+
+  render() {
+    return html`
+      <div>
+        <a href="https://wails.io" target="_blank">
+          <img src="/wails.png" class="logo" alt="Wails logo" />
+        </a>
+        <a href="https://lit.dev" target="_blank">
+          <img src=${litLogo} class="logo lit" alt="Lit logo" />
+        </a>
+      </div>
+      <slot></slot>
+      <div class="card">
+        <button @click=${this._onClick} part="button">
+          count is ${this.count}
+        </button>
+      </div>
+      <p class="read-the-docs">${this.docsHint}</p>
+    `
+  }
+
+  _onClick() {
+    this.count++
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        max-width: 1280px;
+        margin: 0 auto;
+        padding: 2rem;
+        text-align: center;
+      }
+
+      .logo {
+        height: 6em;
+        padding: 1.5em;
+        will-change: filter;
+      }
+      .logo:hover {
+        filter: drop-shadow(0 0 2em #646cffaa);
+      }
+      .logo.lit:hover {
+        filter: drop-shadow(0 0 2em #325cffaa);
+      }
+
+      .card {
+        padding: 2em;
+      }
+
+      .read-the-docs {
+        color: #888;
+      }
+
+      a {
+        font-weight: 500;
+        color: #646cff;
+        text-decoration: inherit;
+      }
+      a:hover {
+        color: #535bf2;
+      }
+
+      h1 {
+        font-size: 3.2em;
+        line-height: 1.1;
+      }
+
+      button {
+        border-radius: 8px;
+        border: 1px solid transparent;
+        padding: 0.6em 1.2em;
+        font-size: 1em;
+        font-weight: 500;
+        font-family: inherit;
+        background-color: #1a1a1a;
+        cursor: pointer;
+        transition: border-color 0.25s;
+      }
+      button:hover {
+        border-color: #646cff;
+      }
+      button:focus,
+      button:focus-visible {
+        outline: 4px auto -webkit-focus-ring-color;
+      }
+
+      @media (prefers-color-scheme: light) {
+        a:hover {
+          color: #747bff;
+        }
+        button {
+          background-color: #f9f9f9;
+        }
+      }
+    `
+  }
+}
+
+window.customElements.define('my-element', MyElement)

v3/internal/templates/lit/frontend/vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/my-element.js',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: /^lit/,
+    },
+  },
+})

v3/internal/templates/lit/go.mod.tmpl

@@ -0,0 +1,13 @@
+module changeme
+
+go 1.19
+
+require github.com/wailsapp/wails/v3 v3.0.0-alpha.0
+
+require (
+	github.com/imdario/mergo v0.3.12 // indirect
+	github.com/leaanthony/slicer v1.5.0 // indirect
+	github.com/wailsapp/mimetype v1.4.1 // indirect
+	github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 // indirect
+	golang.org/x/net v0.0.0-20220722155237-a158d28d115b // indirect
+)

v3/internal/templates/lit/go.sum.tmpl

@@ -0,0 +1,22 @@
+github.com/imdario/mergo v0.3.12 h1:b6R2BslTbIEToALKP7LxUvijTsNI9TAe80pLWN2g/HU=
+github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
+github.com/leaanthony/slicer v1.5.0 h1:aHYTN8xbCCLxJmkNKiLB6tgcMARl4eWmH9/F+S/0HtY=
+github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
+github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
+github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
+github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 h1:Wn+nhnS+VytzE0PegUzSh4T3hXJCtggKGD/4U5H9+wQ=
+github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6/go.mod h1:zlNLI0E2c2qA6miiuAHtp0Bac8FaGH0tlhA19OssR/8=
+github.com/wailsapp/wails/v3 v3.0.0-alpha.0 h1:T5gqG98Xr8LBf69oxlPkhpsFD59w2SnqUZk6XHj8Zoc=
+github.com/wailsapp/wails/v3 v3.0.0-alpha.0/go.mod h1:OAfO5bP0TSUvCIHZYc6Dqfow/9RqxzHvYtmhWPpo1c0=
+golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b h1:PxfKdU9lEEDYjdIzOtC4qFWgkU2rGHdKlKowJSMN9h0=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.3.0 h1:clyUAQHOM3G0M3f5vQj7LuJrETvjVot3Z5el9nffUtU=
+gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=

v3/internal/templates/lit/main.tmpl.go

@@ -0,0 +1,45 @@
+package main
+
+import (
+	"embed"
+	_ "embed"
+	"log"
+
+	"github.com/wailsapp/wails/v3/pkg/options"
+
+	"github.com/wailsapp/wails/v3/pkg/application"
+)
+
+//go:embed frontend/dist
+var assets embed.FS
+
+func main() {
+	app := application.New(options.Application{
+		Name:        "{{.ProjectName}}",
+		Description: "A demo of using raw HTML & CSS",
+		Mac: options.Mac{
+			ApplicationShouldTerminateAfterLastWindowClosed: true,
+		},
+	})
+	// Create window
+	app.NewWebviewWindowWithOptions(&options.WebviewWindow{
+		Title: "Plain Bundle",
+		CSS:   `body { background-color: rgba(255, 255, 255, 0); } .main { color: white; margin: 20%; }`,
+		Mac: options.MacWindow{
+			InvisibleTitleBarHeight: 50,
+			Backdrop:                options.MacBackdropTranslucent,
+			TitleBar:                options.TitleBarHiddenInset,
+		},
+
+		URL: "/",
+		Assets: options.Assets{
+			FS: assets,
+		},
+	})
+
+	err := app.Run()
+
+	if err != nil {
+		log.Fatal(err)
+	}
+}

v3/internal/templates/preact-ts/Taskfile.tmpl.yml

@@ -0,0 +1,82 @@
+version: '3'
+
+vars:
+  APP_NAME: "{{.ProjectName}}"
+
+tasks:
+
+  pre-build:
+    summary: Pre-build hooks
+
+  post-build:
+    summary: Post-build hooks
+
+  install-frontend-deps:
+    summary: Install frontend dependencies
+    dir: frontend
+    sources:
+      - package.json
+      - package-lock.json
+    generates:
+      - node_modules/*
+    preconditions:
+      - sh: npm version
+        msg: "Looks like npm isn't installed. Npm is part of the Node installer: https://nodejs.org/en/download/"
+    cmds:
+      - npm install
+
+  build-frontend:
+    summary: Build the frontend project
+    dir: frontend
+    deps:
+      - install-frontend-deps
+    cmds:
+      - npm run build
+
+  build:
+    summary: Builds the application
+    cmds:
+      - task: pre-build
+      - task: build-frontend
+      - go build -gcflags=all="-N -l" -o build/bin/{{ "{{.APP_NAME}}" }} main.go
+      - task: post-build
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+
+  generate-icons:
+    summary: Generates Windows `.ico` and Mac `.icns` files from an image
+    dir: build
+    cmds:
+      # Generates both .ico and .icns files
+      - wails generate icons -input appicon.png
+
+  build-app-prod-darwin:
+    summary: Creates a production build of the application
+    cmds:
+      - GOOS=darwin GOARCH={{ "{{.ARCH}}" }} go build -tags production -ldflags="-w -s" -o build/bin/{{ "{{.APP_NAME}}" }}
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+    vars:
+      ARCH: $GOARCH
+
+
+  create-app-bundle:
+    summary: Builds a `.app` bundle
+    cmds:
+      - mkdir -p {{ "{{.APP_NAME}}" }}.app/Contents/{MacOS,Resources}
+      - cp build/icons.icns {{ "{{.APP_NAME}}" }}.app/Contents/Resources
+      - cp build/bin/{{ "{{.APP_NAME}}" }} {{ "{{.APP_NAME}}" }}.app/Contents/MacOS
+      - cp build/Info.plist {{ "{{.APP_NAME}}" }}.app/Contents
+
+  package-darwin-arm64:
+    summary: Packages a production build of the application into a `.app` bundle
+    platform: darwin
+    deps:
+      - task: build-app-prod-darwin
+        vars:
+            ARCH: arm64
+      - generate-icons
+    cmds:
+      - task: create-app-bundle

v3/internal/templates/preact-ts/build/Info.plist.tmpl

@@ -0,0 +1,27 @@
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+        <key>CFBundlePackageType</key>
+        <string>APPL</string>
+        <key>CFBundleName</key>
+        <string>{{ "{{.Info.ProductName}}" }}</string>
+        <key>CFBundleExecutable</key>
+        <string>{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleIdentifier</key>
+        <string>com.wails.{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleVersion</key>
+        <string>v1.0.0</string>
+        <key>CFBundleGetInfoString</key>
+        <string>This is a comment</string>
+        <key>CFBundleShortVersionString</key>
+        <string>v1.0.0</string>
+        <key>CFBundleIconFile</key>
+        <string>iconfile</string>
+        <key>LSMinimumSystemVersion</key>
+        <string>10.13.0</string>
+        <key>NSHighResolutionCapable</key>
+        <string>true</string>
+        <key>NSHumanReadableCopyright</key>
+        <string>(c) 2023 My Company Name</string>
+    </dict>
+</plist>

v3/internal/templates/preact-ts/build/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "v1.0.0"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "v1.0.0",
+			"CompanyName": "My Company Name",
+			"FileDescription": "A thing that does a thing",
+			"LegalCopyright": "(c) 2023 My Company Name",
+			"ProductName": "My Product Name",
+			"Comments": "This is a comment"
+		}
+	}
+}

v3/internal/templates/preact-ts/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

v3/internal/templates/preact-ts/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Preact + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

v3/internal/templates/preact-ts/frontend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "preact": "^10.11.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.4.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
+  }
+}

v3/internal/templates/preact-ts/frontend/src/app.css

@@ -0,0 +1,25 @@
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

v3/internal/templates/preact-ts/frontend/src/app.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'preact/hooks'
+import preactLogo from './assets/preact.svg'
+import './app.css'
+
+export function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/vite.svg" class="logo" alt="Vite logo" />
+        </a>
+        <a href="https://preactjs.com" target="_blank">
+          <img src={preactLogo} class="logo preact" alt="Preact logo" />
+        </a>
+      </div>
+      <h1>Vite + Preact</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/app.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p class="read-the-docs">
+        Click on the Vite and Preact logos to learn more
+      </p>
+    </>
+  )
+}

v3/internal/templates/preact-ts/frontend/src/assets/preact.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>

v3/internal/templates/preact-ts/frontend/src/index.css

@@ -0,0 +1,70 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

v3/internal/templates/preact-ts/frontend/src/main.tsx

@@ -0,0 +1,5 @@
+import { render } from 'preact'
+import { App } from './app'
+import './index.css'
+
+render(<App />, document.getElementById('app') as HTMLElement)

v3/internal/templates/preact-ts/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

v3/internal/templates/preact-ts/frontend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

v3/internal/templates/preact-ts/frontend/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

v3/internal/templates/preact-ts/frontend/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [preact()],
+})

v3/internal/templates/preact-ts/go.mod.tmpl

@@ -0,0 +1,13 @@
+module changeme
+
+go 1.19
+
+require github.com/wailsapp/wails/v3 v3.0.0-alpha.0
+
+require (
+	github.com/imdario/mergo v0.3.12 // indirect
+	github.com/leaanthony/slicer v1.5.0 // indirect
+	github.com/wailsapp/mimetype v1.4.1 // indirect
+	github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 // indirect
+	golang.org/x/net v0.0.0-20220722155237-a158d28d115b // indirect
+)

v3/internal/templates/preact-ts/go.sum.tmpl

@@ -0,0 +1,22 @@
+github.com/imdario/mergo v0.3.12 h1:b6R2BslTbIEToALKP7LxUvijTsNI9TAe80pLWN2g/HU=
+github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
+github.com/leaanthony/slicer v1.5.0 h1:aHYTN8xbCCLxJmkNKiLB6tgcMARl4eWmH9/F+S/0HtY=
+github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
+github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
+github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
+github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6 h1:Wn+nhnS+VytzE0PegUzSh4T3hXJCtggKGD/4U5H9+wQ=
+github.com/wailsapp/wails/v2 v2.3.2-0.20230117193915-45c3a501d9e6/go.mod h1:zlNLI0E2c2qA6miiuAHtp0Bac8FaGH0tlhA19OssR/8=
+github.com/wailsapp/wails/v3 v3.0.0-alpha.0 h1:T5gqG98Xr8LBf69oxlPkhpsFD59w2SnqUZk6XHj8Zoc=
+github.com/wailsapp/wails/v3 v3.0.0-alpha.0/go.mod h1:OAfO5bP0TSUvCIHZYc6Dqfow/9RqxzHvYtmhWPpo1c0=
+golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b h1:PxfKdU9lEEDYjdIzOtC4qFWgkU2rGHdKlKowJSMN9h0=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.3.0 h1:clyUAQHOM3G0M3f5vQj7LuJrETvjVot3Z5el9nffUtU=
+gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=

v3/internal/templates/preact-ts/main.tmpl.go

@@ -0,0 +1,45 @@
+package main
+
+import (
+	"embed"
+	_ "embed"
+	"log"
+
+	"github.com/wailsapp/wails/v3/pkg/options"
+
+	"github.com/wailsapp/wails/v3/pkg/application"
+)
+
+//go:embed frontend/dist
+var assets embed.FS
+
+func main() {
+	app := application.New(options.Application{
+		Name:        "{{.ProjectName}}",
+		Description: "A demo of using raw HTML & CSS",
+		Mac: options.Mac{
+			ApplicationShouldTerminateAfterLastWindowClosed: true,
+		},
+	})
+	// Create window
+	app.NewWebviewWindowWithOptions(&options.WebviewWindow{
+		Title: "Plain Bundle",
+		CSS:   `body { background-color: rgba(255, 255, 255, 0); } .main { color: white; margin: 20%; }`,
+		Mac: options.MacWindow{
+			InvisibleTitleBarHeight: 50,
+			Backdrop:                options.MacBackdropTranslucent,
+			TitleBar:                options.TitleBarHiddenInset,
+		},
+
+		URL: "/",
+		Assets: options.Assets{
+			FS: assets,
+		},
+	})
+
+	err := app.Run()
+
+	if err != nil {
+		log.Fatal(err)
+	}
+}

v3/internal/templates/preact/Taskfile.tmpl.yml

@@ -0,0 +1,82 @@
+version: '3'
+
+vars:
+  APP_NAME: "{{.ProjectName}}"
+
+tasks:
+
+  pre-build:
+    summary: Pre-build hooks
+
+  post-build:
+    summary: Post-build hooks
+
+  install-frontend-deps:
+    summary: Install frontend dependencies
+    dir: frontend
+    sources:
+      - package.json
+      - package-lock.json
+    generates:
+      - node_modules/*
+    preconditions:
+      - sh: npm version
+        msg: "Looks like npm isn't installed. Npm is part of the Node installer: https://nodejs.org/en/download/"
+    cmds:
+      - npm install
+
+  build-frontend:
+    summary: Build the frontend project
+    dir: frontend
+    deps:
+      - install-frontend-deps
+    cmds:
+      - npm run build
+
+  build:
+    summary: Builds the application
+    cmds:
+      - task: pre-build
+      - task: build-frontend
+      - go build -gcflags=all="-N -l" -o build/bin/{{ "{{.APP_NAME}}" }} main.go
+      - task: post-build
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+
+  generate-icons:
+    summary: Generates Windows `.ico` and Mac `.icns` files from an image
+    dir: build
+    cmds:
+      # Generates both .ico and .icns files
+      - wails generate icons -input appicon.png
+
+  build-app-prod-darwin:
+    summary: Creates a production build of the application
+    cmds:
+      - GOOS=darwin GOARCH={{ "{{.ARCH}}" }} go build -tags production -ldflags="-w -s" -o build/bin/{{ "{{.APP_NAME}}" }}
+    env:
+      CGO_CFLAGS: "-mmacosx-version-min=10.13"
+      CGO_LDFLAGS: "-mmacosx-version-min=10.13"
+    vars:
+      ARCH: $GOARCH
+
+
+  create-app-bundle:
+    summary: Builds a `.app` bundle
+    cmds:
+      - mkdir -p {{ "{{.APP_NAME}}" }}.app/Contents/{MacOS,Resources}
+      - cp build/icons.icns {{ "{{.APP_NAME}}" }}.app/Contents/Resources
+      - cp build/bin/{{ "{{.APP_NAME}}" }} {{ "{{.APP_NAME}}" }}.app/Contents/MacOS
+      - cp build/Info.plist {{ "{{.APP_NAME}}" }}.app/Contents
+
+  package-darwin-arm64:
+    summary: Packages a production build of the application into a `.app` bundle
+    platform: darwin
+    deps:
+      - task: build-app-prod-darwin
+        vars:
+            ARCH: arm64
+      - generate-icons
+    cmds:
+      - task: create-app-bundle

v3/internal/templates/preact/build/Info.plist.tmpl

@@ -0,0 +1,27 @@
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+        <key>CFBundlePackageType</key>
+        <string>APPL</string>
+        <key>CFBundleName</key>
+        <string>{{ "{{.Info.ProductName}}" }}</string>
+        <key>CFBundleExecutable</key>
+        <string>{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleIdentifier</key>
+        <string>com.wails.{{ "{{.ProjectName}}" }}</string>
+        <key>CFBundleVersion</key>
+        <string>v1.0.0</string>
+        <key>CFBundleGetInfoString</key>
+        <string>This is a comment</string>
+        <key>CFBundleShortVersionString</key>
+        <string>v1.0.0</string>
+        <key>CFBundleIconFile</key>
+        <string>iconfile</string>
+        <key>LSMinimumSystemVersion</key>
+        <string>10.13.0</string>
+        <key>NSHighResolutionCapable</key>
+        <string>true</string>
+        <key>NSHumanReadableCopyright</key>
+        <string>(c) 2023 My Company Name</string>
+    </dict>
+</plist>

v3/internal/templates/preact/build/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "v1.0.0"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "v1.0.0",
+			"CompanyName": "My Company Name",
+			"FileDescription": "A thing that does a thing",
+			"LegalCopyright": "(c) 2023 My Company Name",
+			"ProductName": "My Product Name",
+			"Comments": "This is a comment"
+		}
+	}
+}

v3/internal/templates/preact/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

v3/internal/templates/preact/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/wails.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wails + Preact</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

v3/internal/templates/preact/frontend/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "preact": "^10.11.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.4.0",
+    "vite": "^4.0.0"
+  }
+}

v3/internal/templates/preact/frontend/src/app.css

@@ -0,0 +1,25 @@
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

v3/internal/templates/preact/frontend/src/app.jsx

@@ -0,0 +1,32 @@
+import { useState } from 'preact/hooks'
+import preactLogo from './assets/preact.svg'
+import './app.css'
+
+export function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/vite.svg" class="logo" alt="Vite logo" />
+        </a>
+        <a href="https://preactjs.com" target="_blank">
+          <img src={preactLogo} class="logo preact" alt="Preact logo" />
+        </a>
+      </div>
+      <h1>Vite + Preact</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/app.jsx</code> and save to test HMR
+        </p>
+      </div>
+      <p class="read-the-docs">
+        Click on the Vite and Preact logos to learn more
+      </p>
+    </>
+  )
+}

v3/internal/templates/preact/frontend/src/assets/preact.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>

v3/internal/templates/preact/frontend/src/index.css

@@ -0,0 +1,70 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

v3/internal/templates/preact/frontend/src/main.jsx

@@ -0,0 +1,5 @@
+import { render } from 'preact'
+import { App } from './app'
+import './index.css'
+
+render(<App />, document.getElementById('app'))