This commit is contained in:
schreifuchs 2025-02-10 13:00:00 +01:00
parent 2c2f70ef44
commit b83d236d65
7 changed files with 72 additions and 78 deletions

View File

@ -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)
```

View File

@ -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>

View File

@ -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>

View File

@ -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: {

View File

@ -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,6 +29,25 @@ 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;
}
}

View File

@ -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>;

View File

@ -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']();
}