Compare commits
2 Commits
2c2f70ef44
...
593815b923
| Author | SHA1 | Date | |
|---|---|---|---|
| 593815b923 | |||
| b83d236d65 |
@ -4,10 +4,11 @@
|
||||
## Links
|
||||
|
||||
- [gorm](https://gorm.io/docs/)
|
||||
- [SQLite ERD](https://www.convertcsv.com/sqlite-online.htm)
|
||||
- [Svelte5](https://svelte.dev/docs/svelte/what-are-runes)
|
||||
- [SvelteRouting](https://github.com/EmilTholin/svelte-routing)
|
||||
- [Flowbyte UI lib](https://flowbite-svelte.com/docs/pages/introduction)
|
||||
- [Tailwind](https://tailwindcss.com/docs/flex-basis)
|
||||
- [Svelte5](https://svelte.dev/docs/svelte/what-are-runes)
|
||||
- [SQLite ERD](https://www.convertcsv.com/sqlite-online.htm)
|
||||
|
||||
## Fixes
|
||||
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
# Svelte + TS + Vite
|
||||
|
||||
This template should help get you started developing with Svelte and TypeScript in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/)
|
||||
|
||||
+ [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||
|
||||
## Need an official Svelte framework?
|
||||
|
||||
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its
|
||||
serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less,
|
||||
and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
|
||||
|
||||
## Technical considerations
|
||||
|
||||
**Why use this over SvelteKit?**
|
||||
|
||||
- It brings its own routing solution which might not be preferable for some users.
|
||||
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
|
||||
`vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
|
||||
|
||||
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account
|
||||
the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the
|
||||
other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte
|
||||
project.
|
||||
|
||||
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been
|
||||
structured similarly to SvelteKit so that it is easy to migrate.
|
||||
|
||||
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
|
||||
|
||||
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash
|
||||
references keeps the default TypeScript setting of accepting type information from the entire workspace, while also
|
||||
adding `svelte` and `vite/client` type information.
|
||||
|
||||
**Why include `.vscode/extensions.json`?**
|
||||
|
||||
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to
|
||||
install the recommended extension upon opening the project.
|
||||
|
||||
**Why enable `allowJs` in the TS template?**
|
||||
|
||||
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of
|
||||
JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds:
|
||||
not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing
|
||||
JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
|
||||
|
||||
**Why is HMR not preserving my local component state?**
|
||||
|
||||
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr`
|
||||
and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the
|
||||
details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
|
||||
|
||||
If you have state that's important to retain within a component, consider creating an external store which would not be
|
||||
replaced by HMR.
|
||||
|
||||
```ts
|
||||
// store.ts
|
||||
// An extremely simple external store
|
||||
import { writable } from 'svelte/store'
|
||||
export default writable(0)
|
||||
```
|
||||
@ -1,18 +1,23 @@
|
||||
<script lang="ts">
|
||||
import "./app.css";
|
||||
import { Router, Route, Link } from "svelte-routing";
|
||||
import { Router, Route, Link, navigate } from "svelte-routing";
|
||||
import Home from "./routes/Home.svelte";
|
||||
import "./app.css";
|
||||
import { Navbar, NavBrand, DarkMode } from "flowbite-svelte";
|
||||
let url: string = $state();
|
||||
import { Navbar, DarkMode, Heading } from "flowbite-svelte";
|
||||
import { HomeOutline } from "flowbite-svelte-icons";
|
||||
let url: string = $state("/");
|
||||
</script>
|
||||
|
||||
<main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-800">
|
||||
<Router bind:url>
|
||||
<Navbar>
|
||||
<NavBrand>
|
||||
<Link to="/">HOME</Link>
|
||||
</NavBrand>
|
||||
<Navbar color="form">
|
||||
<button
|
||||
class="grid grid-cols-3 items-center"
|
||||
onclick={() => navigate("/")}
|
||||
>
|
||||
<HomeOutline />
|
||||
<span class="col-span-2">HOME</span>
|
||||
</button>
|
||||
<DarkMode />
|
||||
</Navbar>
|
||||
<Route path="/"><Home /></Route>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
DeleteThing,
|
||||
NewThing,
|
||||
} from "../../wailsjs/go/things/Service";
|
||||
import { things } from "../../wailsjs/go/models";
|
||||
import { model } from "../../wailsjs/go/models";
|
||||
import {
|
||||
Label,
|
||||
Input,
|
||||
@ -19,7 +19,7 @@
|
||||
} from "flowbite-svelte";
|
||||
|
||||
let name: string = $state();
|
||||
let thingsList: things.Thing[] = $state([]);
|
||||
let thingsList: model.Thing[] = $state([]);
|
||||
|
||||
function update() {
|
||||
GetThings().then((ts) => {
|
||||
@ -53,7 +53,6 @@
|
||||
<TableHead>
|
||||
<TableHeadCell>ID</TableHeadCell>
|
||||
<TableHeadCell>Name</TableHeadCell>
|
||||
|
||||
<TableHeadCell>Delete</TableHeadCell>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
||||
@ -5,6 +5,7 @@ export default {
|
||||
content: [
|
||||
"./src/**/*.{html,js,svelte,ts}",
|
||||
"./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
|
||||
"./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}",
|
||||
],
|
||||
darkMode: 'selector',
|
||||
theme: {
|
||||
|
||||
@ -1,8 +1,25 @@
|
||||
export namespace things {
|
||||
export namespace model {
|
||||
|
||||
export class SubThing {
|
||||
ID: number;
|
||||
ThingID: number;
|
||||
Name: string;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new SubThing(source);
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ('string' === typeof source) source = JSON.parse(source);
|
||||
this.ID = source["ID"];
|
||||
this.ThingID = source["ThingID"];
|
||||
this.Name = source["Name"];
|
||||
}
|
||||
}
|
||||
export class Thing {
|
||||
ID: number;
|
||||
Name: string;
|
||||
Subthings: SubThing[];
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new Thing(source);
|
||||
@ -12,7 +29,26 @@ export namespace things {
|
||||
if ('string' === typeof source) source = JSON.parse(source);
|
||||
this.ID = source["ID"];
|
||||
this.Name = source["Name"];
|
||||
this.Subthings = this.convertValues(source["Subthings"], SubThing);
|
||||
}
|
||||
|
||||
convertValues(a: any, classs: any, asMap: boolean = false): any {
|
||||
if (!a) {
|
||||
return a;
|
||||
}
|
||||
if (a.slice && a.map) {
|
||||
return (a as any[]).map(elem => this.convertValues(elem, classs));
|
||||
} else if ("object" === typeof a) {
|
||||
if (asMap) {
|
||||
for (const key of Object.keys(a)) {
|
||||
a[key] = new classs(a[key]);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
return new classs(a);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
10
frontend/wailsjs/go/things/Service.d.ts
vendored
10
frontend/wailsjs/go/things/Service.d.ts
vendored
@ -1,9 +1,15 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
import {things} from '../models';
|
||||
import {model} from '../models';
|
||||
|
||||
export function AddSubThing(arg1:number,arg2:string):Promise<void>;
|
||||
|
||||
export function DeleteSubThing(arg1:number):Promise<void>;
|
||||
|
||||
export function DeleteThing(arg1:number):Promise<void>;
|
||||
|
||||
export function GetThings():Promise<Array<things.Thing>>;
|
||||
export function GetSubThings(arg1:number):Promise<Array<model.SubThing>>;
|
||||
|
||||
export function GetThings():Promise<Array<model.Thing>>;
|
||||
|
||||
export function NewThing(arg1:string):Promise<void>;
|
||||
|
||||
@ -2,10 +2,22 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function AddSubThing(arg1, arg2) {
|
||||
return window['go']['things']['Service']['AddSubThing'](arg1, arg2);
|
||||
}
|
||||
|
||||
export function DeleteSubThing(arg1) {
|
||||
return window['go']['things']['Service']['DeleteSubThing'](arg1);
|
||||
}
|
||||
|
||||
export function DeleteThing(arg1) {
|
||||
return window['go']['things']['Service']['DeleteThing'](arg1);
|
||||
}
|
||||
|
||||
export function GetSubThings(arg1) {
|
||||
return window['go']['things']['Service']['GetSubThings'](arg1);
|
||||
}
|
||||
|
||||
export function GetThings() {
|
||||
return window['go']['things']['Service']['GetThings']();
|
||||
}
|
||||
|
||||
11
go.mod
11
go.mod
@ -1,8 +1,12 @@
|
||||
module wails-svelte-tailwind-ts
|
||||
module wails-template
|
||||
|
||||
go 1.23
|
||||
|
||||
require github.com/wailsapp/wails/v2 v2.9.2
|
||||
require (
|
||||
github.com/wailsapp/wails/v2 v2.9.2
|
||||
gorm.io/driver/sqlite v1.5.7
|
||||
gorm.io/gorm v1.25.12
|
||||
)
|
||||
|
||||
require (
|
||||
github.com/bep/debounce v1.2.1 // indirect
|
||||
@ -10,6 +14,8 @@ require (
|
||||
github.com/godbus/dbus/v5 v5.1.0 // indirect
|
||||
github.com/google/uuid v1.3.0 // indirect
|
||||
github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
|
||||
github.com/jinzhu/inflection v1.0.0 // indirect
|
||||
github.com/jinzhu/now v1.1.5 // indirect
|
||||
github.com/labstack/echo/v4 v4.10.2 // indirect
|
||||
github.com/labstack/gommon v0.4.0 // indirect
|
||||
github.com/leaanthony/go-ansi-parser v1.6.0 // indirect
|
||||
@ -18,6 +24,7 @@ require (
|
||||
github.com/leaanthony/u v1.1.0 // indirect
|
||||
github.com/mattn/go-colorable v0.1.13 // indirect
|
||||
github.com/mattn/go-isatty v0.0.19 // indirect
|
||||
github.com/mattn/go-sqlite3 v1.14.22 // indirect
|
||||
github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect
|
||||
github.com/pkg/errors v0.9.1 // indirect
|
||||
github.com/rivo/uniseg v0.4.4 // indirect
|
||||
|
||||
10
go.sum
10
go.sum
@ -11,6 +11,10 @@ github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
|
||||
github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
|
||||
github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
|
||||
github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
|
||||
github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
|
||||
github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
|
||||
github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
|
||||
github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
|
||||
github.com/labstack/echo/v4 v4.10.2 h1:n1jAhnq/elIFTHr1EYpiYtyKgx4RW9ccVgkqByZaN2M=
|
||||
github.com/labstack/echo/v4 v4.10.2/go.mod h1:OEyqf2//K1DFdE57vw2DRgWY0M7s65IVQO2FzvI4J5k=
|
||||
github.com/labstack/gommon v0.4.0 h1:y7cvthEAEbU0yHOf4axH8ZG2NH8knB9iNSoTO8dyIk8=
|
||||
@ -35,6 +39,8 @@ github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27k
|
||||
github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
|
||||
github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
|
||||
github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
|
||||
github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
|
||||
github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
|
||||
github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 h1:KoWmjvw+nsYOo29YJK9vDA65RGE3NrOnUtO7a+RF9HU=
|
||||
github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8/go.mod h1:HKlIX3XHQyzLZPlr7++PzdhaXEj94dEiJgZDTsxEqUI=
|
||||
github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
|
||||
@ -92,3 +98,7 @@ gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C
|
||||
gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
|
||||
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||
gorm.io/driver/sqlite v1.5.7 h1:8NvsrhP0ifM7LX9G4zPB97NwovUakUxc+2V2uuf3Z1I=
|
||||
gorm.io/driver/sqlite v1.5.7/go.mod h1:U+J8craQU6Fzkcvu8oLeAQmi50TkwPEhHDEjQZXDah4=
|
||||
gorm.io/gorm v1.25.12 h1:I0u8i2hWQItBq1WfE0o2+WuL9+8L21K9e2HHSTE/0f8=
|
||||
gorm.io/gorm v1.25.12/go.mod h1:xh7N7RHfYlNc5EmcI/El95gXusucDrQnHXe0+CgWcLQ=
|
||||
|
||||
6
main.go
6
main.go
@ -2,7 +2,8 @@ package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"wails-svelte-tailwind-ts/things"
|
||||
"wails-template/model"
|
||||
"wails-template/things"
|
||||
|
||||
"github.com/wailsapp/wails/v2"
|
||||
"github.com/wailsapp/wails/v2/pkg/options"
|
||||
@ -15,7 +16,8 @@ var assets embed.FS
|
||||
func main() {
|
||||
// Create an instance of the app structure
|
||||
app := NewApp()
|
||||
things := things.NewThingsService()
|
||||
db := model.InitDB()
|
||||
things := &things.Service{DB: db}
|
||||
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
|
||||
29
model/model.go
Normal file
29
model/model.go
Normal file
@ -0,0 +1,29 @@
|
||||
package model
|
||||
|
||||
import (
|
||||
"log"
|
||||
|
||||
"gorm.io/driver/sqlite"
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
type Thing struct {
|
||||
ID int
|
||||
Name string
|
||||
Subthings []SubThing
|
||||
}
|
||||
|
||||
type SubThing struct {
|
||||
ID int
|
||||
ThingID int
|
||||
Name string
|
||||
}
|
||||
|
||||
func InitDB() *gorm.DB {
|
||||
db, err := gorm.Open(sqlite.Open("things.db"))
|
||||
if err != nil {
|
||||
log.Panic(err)
|
||||
}
|
||||
db.AutoMigrate(&Thing{}, &SubThing{})
|
||||
return db
|
||||
}
|
||||
@ -1,43 +1,54 @@
|
||||
package things
|
||||
|
||||
import "slices"
|
||||
import (
|
||||
"log"
|
||||
"wails-template/model"
|
||||
|
||||
type Thing struct {
|
||||
ID int
|
||||
Name string
|
||||
}
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
type Service struct {
|
||||
things map[int]Thing
|
||||
maxID int
|
||||
}
|
||||
|
||||
func NewThingsService() *Service {
|
||||
return &Service{
|
||||
things: make(map[int]Thing),
|
||||
}
|
||||
DB *gorm.DB
|
||||
}
|
||||
|
||||
func (s *Service) NewThing(name string) {
|
||||
s.maxID++
|
||||
s.things[s.maxID] = Thing{
|
||||
Name: name,
|
||||
ID: s.maxID,
|
||||
if err := s.DB.Save(&model.Thing{Name: name}).Error; err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
print(name)
|
||||
}
|
||||
|
||||
func (s *Service) GetThings() []Thing {
|
||||
things := make([]Thing, 0, len(s.things))
|
||||
for _, t := range s.things {
|
||||
things = append(things, t)
|
||||
func (s *Service) GetThings() (things []model.Thing) {
|
||||
if err := s.DB.Find(&things).Error; err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
slices.SortFunc(things, func(a, b Thing) int { return a.ID - b.ID })
|
||||
return things
|
||||
}
|
||||
|
||||
func (s *Service) DeleteThing(id int) {
|
||||
delete(s.things, id)
|
||||
|
||||
if err := s.DB.Delete(model.Thing{}, id).Error; err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
func (s *Service) GetSubThings(thingID int) (subthings []model.SubThing) {
|
||||
if err := s.DB.Where("thing_id = ?", thingID).Find(&subthings).Error; err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
return
|
||||
}
|
||||
func (s *Service) AddSubThing(thingID int, name string) {
|
||||
if err := s.DB.Save(&model.SubThing{
|
||||
ThingID: thingID,
|
||||
Name: name,
|
||||
}).Error; err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
func (s *Service) DeleteSubThing(id int) {
|
||||
if err := s.DB.Delete(model.SubThing{}, id).Error; err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"$schema": "https://wails.io/schemas/config.v2.json",
|
||||
"name": "wails-svelte-tailwind-ts",
|
||||
"outputfilename": "wails-svelte-tailwind-ts",
|
||||
"name": "wails-template",
|
||||
"outputfilename": "wails-template",
|
||||
"frontend:install": "pnpm install",
|
||||
"frontend:build": "pnpm run build",
|
||||
"frontend:dev:watcher": "pnpm run dev",
|
||||
"frontend:dev:serverUrl": "auto",
|
||||
"author": {
|
||||
"name": "u80864958",
|
||||
"email": "niklas.breitenstein@bit.admin.ch"
|
||||
"name": "schreifuchs",
|
||||
"email": "kontakt@schreifuchs.ch"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user