wip

bin/web/.prettierrc

@@ -3,6 +3,15 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": [
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+		"prettier-plugin-svelte"
+	],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

bin/web/README.md

@@ -8,10 +8,10 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm create svelte@latest
+npx sv create
 
 # create a new project in my-app
-npm create svelte@latest my-app
+npx sv create my-app
 ```
 
 ## Developing
@@ -35,4 +35,4 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

bin/web/eslint.config.js

@@ -1,13 +1,13 @@
-import eslint from '@eslint/js';
+import prettier from "eslint-config-prettier";
-import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
 import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
-import tseslint from 'typescript-eslint';
+import ts from 'typescript-eslint';
 
-export default tseslint.config(
+export default ts.config(
-	eslint.configs.recommended,
+  js.configs.recommended,
-	...tseslint.configs.recommended,
+  ...ts.configs.recommended,
-	...svelte.configs['flat/recommended'],
+  ...svelte.configs["flat/recommended"],
   prettier,
   ...svelte.configs['flat/prettier'],
   {
@@ -19,14 +19,15 @@ export default tseslint.config(
 	}
   },
   {
-		files: ['**/*.svelte'],
+    files: ["**/*.svelte"],
+
     languageOptions: {
 	  parserOptions: {
-				parser: tseslint.parser
+	    parser: ts.parser
 	  }
 	}
   },
   {
-		ignores: ['build/', '.svelte-kit/', 'dist/']
+    ignores: ["build/", ".svelte-kit/", "dist/"]
   }
 );

bin/web/package.json

@@ -1,35 +1,36 @@
 {
 	"name": "web",
 	"version": "0.0.1",
-	"private": true,
+	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest",
+		"test:unit": "vitest",
-		"lint": "prettier --check . && eslint .",
+		"test": "npm run test:unit -- --run",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/adapter-static": "^3.0.5",
 		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^9.6.0",
-		"eslint": "^9.0.0",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
-		"prettier": "^3.1.1",
+		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-svelte": "^3.2.6",
-		"svelte": "^4.2.7",
+		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"tailwindcss": "^3.4.9",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.0.3",
-		"vitest": "^2.0.0"
+		"vitest": "^2.0.4"
-	},
+	}
-	"type": "module"
 }

bin/web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

bin/web/src/app.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities"

bin/web/src/app.d.ts

@@ -1,4 +1,4 @@
-// See https://kit.svelte.dev/docs/types#app
+// See https://svelte.dev/docs/kit/types#app
 // for information about these interfaces
 declare global {
 	namespace App {

bin/web/src/routes/+layout.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import '../app.css';
+	let { children } = $props();
+</script>
+
+{@render children()}

bin/web/src/routes/+layout.ts

@@ -1 +0,0 @@
-export const ssr = false;

bin/web/src/routes/+page.svelte

@@ -1,2 +1,2 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

bin/web/src/routes/+page.ts

@@ -1,18 +0,0 @@
-import { base } from '$app/paths';
-
-export async function load({ fetch }) {
-
-    const url = base + "/hello?name=PageLoadFunction";
-    const opts = {
-        method: "get",
-        headers: { "Content-Type": "application/json" }
-    };
-    const response = await fetch(url, opts);
-    const hello = await response.text();
-    console.log("Hello:", hello);
-
-    return {
-        hello
-    };
-
-}

bin/web/svelte.config.js

@@ -1,16 +1,17 @@
-import adapter from '@sveltejs/adapter-static';
+import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// Consult https://svelte.dev/docs/kit/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
 
 	kit: {
-		adapter: adapter({
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
-		    fallback: 'index.html',
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		}),
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
 	}
 };
 

bin/web/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+
+  theme: {
+    extend: {}
+  },
+
+  plugins: []
+} as Config;

bin/web/tsconfig.json

@@ -11,8 +11,8 @@
 		"strict": true,
 		"moduleResolution": "bundler"
 	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
 	// from the referenced tsconfig.json - TypeScript does not merge them in

bin/web/vite.config.ts

@@ -1,8 +1,9 @@
+import { defineConfig } from "vitest/config";
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
     plugins: [sveltekit()],
+
     test: {
         include: ['src/**/*.{test,spec}.{js,ts}']
     }