feat(svelte): add svelte 5 support (#56)

* feat(svelte): add svelte 5 support (#55)

* fix(svelte-app): typo

* docs: add release notes

.changeset/few-penguins-laugh.md

@@ -0,0 +1,22 @@
+---
+"@monicon/esbuild": minor
+"@monicon/svelte": minor
+"@monicon/qwik-app": minor
+"@monicon/qwik": minor
+"@monicon/vite": minor
+"@monicon/vue": minor
+"@monicon/babel-plugin": minor
+"@monicon/core": minor
+"@monicon/icon-loader": minor
+"@monicon/loader": minor
+"@monicon/metro": minor
+"@monicon/native": minor
+"@monicon/nuxt": minor
+"@monicon/react": minor
+"@monicon/rollup": minor
+"@monicon/rspack": minor
+"@monicon/typescript-config": minor
+"@monicon/webpack": minor
+---
+
+feat(svelte): add svelte 5 support (#55)

apps/qwik-app/package.json

@@ -42,7 +42,7 @@
     "@monicon/qwik": "*",
     "typescript": "5.4.5",
     "undici": "*",
-    "vite": "5.3.5",
+    "vite": "^6.0.2",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

apps/remix/package.json

@@ -38,7 +38,7 @@
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.1.6",
-    "vite": "^5.1.0",
+    "vite": "^6.0.2",
     "vite-tsconfig-paths": "^4.2.1"
   },
   "engines": {

apps/svelte-app/.gitignore

@@ -3,6 +3,8 @@ node_modules
 # Output
 .output
 .vercel
+.netlify
+.wrangler
 /.svelte-kit
 /build
 

apps/svelte-app/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

apps/svelte-app/.prettierrc

@@ -0,0 +1,17 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": [
+		"prettier-plugin-svelte"
+	],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

apps/svelte-app/README.md

@@ -1,17 +1,17 @@
-# create-svelte
+# sv
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 
 ## Creating a project
 
 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.

apps/svelte-app/eslint.config.js

@@ -0,0 +1,34 @@
+import prettier from "eslint-config-prettier";
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url));
+
+export default ts.config(
+  includeIgnoreFile(gitignorePath),
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs["flat/recommended"],
+  prettier,
+  ...svelte.configs['flat/prettier'],
+  {
+    languageOptions: {
+	  globals: {
+	    ...globals.browser,
+	    ...globals.node
+	  }
+	}
+  },
+  {
+    files: ["**/*.svelte"],
+
+    languageOptions: {
+	  parserOptions: {
+	    parser: ts.parser
+	  }
+	}
+  }
+);

apps/svelte-app/package.json

@@ -1,26 +1,35 @@
 {
-  "name": "@monicon/svelte-app",
-  "version": "0.0.1",
-  "private": true,
-  "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"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "svelte": "^4.2.7",
-    "svelte-check": "^4.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.3"
-  },
-  "dependencies": {
-    "@monicon/vite": "*",
-    "@monicon/svelte": "*"
-  },
-  "type": "module"
+	"name": "@monicon/svelte-app",
+	"version": "1.0.0",
+	"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",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.3",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.9.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^6.0.2"
+	},
+	"dependencies": {
+		"@monicon/vite": "*",
+		"@monicon/svelte": "*"
+	}
 }

apps/svelte-app/src/app.d.ts

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

apps/svelte-app/src/routes/+page.svelte

@@ -1,27 +1,27 @@
 <script>
-  import { Monicon } from "@monicon/svelte";
+	import { Monicon } from '@monicon/svelte';
 </script>
 
 <main>
-  <Monicon name="mdi:home" size={24} />
-  <Monicon name="logos:active-campaign" />
-  <Monicon name="logos:apache-superset-icon" />
-  <Monicon name="invalid:icon" color="red" />
+	<Monicon name="mdi:home" size={24} />
+	<Monicon name="logos:active-campaign" />
+	<Monicon name="logos:apache-superset-icon" />
+	<Monicon name="invalid:icon" color="red" />
 </main>
 
 <style>
-  :global(html),
-  :global(body) {
-    margin: 0;
-    padding: 0;
-  }
+	:global(html),
+	:global(body) {
+		margin: 0;
+		padding: 0;
+	}
 
-  main {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background-color: #242424;
-    color: rgba(255, 255, 255, 0.87);
-  }
+	main {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100vh;
+		background-color: #242424;
+		color: rgba(255, 255, 255, 0.87);
+	}
 </style>

apps/svelte-app/svelte.config.js

@@ -3,14 +3,14 @@ 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
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
 
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter()
 	}
 };

apps/svelte-app/tsconfig.json

@@ -11,8 +11,8 @@
 		"strict": true,
 		"moduleResolution": "bundler"
 	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// 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

apps/svelte-app/vite.config.ts

@@ -1,21 +1,21 @@
-import { sveltekit } from "@sveltejs/kit/vite";
-import { defineConfig } from "vite";
-import monicon from "@monicon/vite";
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { monicon } from '@monicon/vite';
 
 export default defineConfig({
-  plugins: [
-    sveltekit(),
-    monicon({
-      icons: [
-        "mdi:home",
-        "mdi:account",
-        "mdi:account-badge-outline",
-        "feather:activity",
-        "feather:alert-circle",
-        "logos:active-campaign",
-        "logos:apache-superset-icon",
-      ],
-      outputFileName: "svelte-app",
-    }),
-  ],
+	plugins: [
+		sveltekit(),
+		monicon({
+			icons: [
+				'mdi:home',
+				'mdi:account',
+				'mdi:account-badge-outline',
+				'feather:activity',
+				'feather:alert-circle',
+				'logos:active-campaign',
+				'logos:apache-superset-icon'
+			],
+			outputFileName: 'svelte-app'
+		})
+	]
 });

apps/vite-react/package.json

@@ -26,6 +26,6 @@
     "globals": "^15.9.0",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.8"
+    "vite": "^6.0.2"
   }
 }

apps/vite-vue/package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
     "typescript": "^5.5.3",
-    "vite": "^5.4.8",
+    "vite": "^6.0.2",
     "vue-tsc": "^2.1.6"
   }
 }

packages/esbuild/package.json

@@ -24,10 +24,10 @@
   "devDependencies": {
     "@monicon/typescript-config": "1.0.0",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite": "^6.0.2"
   },
   "dependencies": {
-    "vite": "^5.4.8",
     "@monicon/core": "1.0.0"
   }
 }

packages/qwik/package.json

@@ -52,7 +52,7 @@
     "prettier": "3.3.3",
     "typescript": "5.4.5",
     "undici": "*",
-    "vite": "5.3.5",
+    "vite": "^6.0.2",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

packages/svelte/.gitignore

@@ -3,6 +3,8 @@ node_modules
 # Output
 .output
 .vercel
+.netlify
+.wrangler
 /.svelte-kit
 /build
 /dist

packages/svelte/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

packages/svelte/.prettierrc

@@ -0,0 +1,17 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": [
+		"prettier-plugin-svelte"
+	],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}