build: add svelte integration

Author: velut

.prettierrc

@@ -3,6 +3,9 @@
 	"printWidth": 100,
 	"experimentalTernaries": true,
 	"astroAllowShorthand": true,
-	"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
-	"overrides": [{ "files": "*.astro", "options": { "parser": "astro" } }]
+	"plugins": ["prettier-plugin-astro", "prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{ "files": "*.astro", "options": { "parser": "astro" } },
+		{ "files": "*.svelte", "options": { "parser": "svelte" } }
+	]
 }

.vscode/settings.json

@@ -117,6 +117,7 @@
 		"requiredtype",
 		"returntypetype",
 		"rollup",
+		"runed",
 		"scandir",
 		"scibona",
 		"semrush",

astro.config.mjs

@@ -1,5 +1,6 @@
 import alpinejs from "@astrojs/alpinejs";
 import node from "@astrojs/node";
+import svelte from "@astrojs/svelte";
 import vercel from "@astrojs/vercel/serverless";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "astro/config";
@@ -20,9 +21,14 @@ export default defineConfig({
 				includeFiles: ["/bun1/bun"],
 			})
 		:	node({ mode: "standalone" }),
-	integrations: [alpinejs({ entrypoint: "/src/scripts/alpine" })],
+	integrations: [alpinejs({ entrypoint: "/src/scripts/alpine" }), svelte()],
 	vite: {
-		plugins: [tailwindcss(), Icons({ compiler: "astro" }), visualizer()],
+		plugins: [
+			tailwindcss(),
+			Icons({ compiler: "svelte" }),
+			Icons({ compiler: "astro" }),
+			visualizer(),
+		],
 		define: {
 			_GIT_COMMIT: JSON.stringify(execSync("git rev-parse HEAD").toString().trim()),
 		},

bun.lock

@@ -5,8 +5,8 @@
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
-		"check": "astro check",
-		"build": "bun --revision && astro check && astro build",
+		"check": "astro check && svelte-check --no-tsconfig",
+		"build": "bun --revision && bun run check && astro build",
 		"preview": "astro preview",
 		"astro": "astro",
 		"lint": "prettier --check .",
@@ -19,6 +19,7 @@
 	"dependencies": {
 		"@astrojs/alpinejs": "^0.4.8",
 		"@astrojs/node": "^9.2.1",
+		"@astrojs/svelte": "^7.0.13",
 		"@aws-sdk/client-s3": "^3.812.0",
 		"@braintree/sanitize-url": "^7.1.1",
 		"@jsdocs-io/extractor": "^1.0.0",
@@ -36,7 +37,9 @@
 		"new-github-issue-url": "^1.1.0",
 		"pathe": "^2.0.3",
 		"read-pkg": "^9.0.1",
+		"runed": "^0.28.0",
 		"shiki": "^3.4.2",
+		"svelte": "^5.32.1",
 		"trim-newlines": "^5.0.0",
 		"url-join": "^5.0.0",
 		"validate-npm-package-name": "^6.0.0",
@@ -62,9 +65,11 @@
 		"daisyui": "^5.0.35",
 		"prettier": "^3.5.3",
 		"prettier-plugin-astro": "^0.14.1",
+		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"rollup-plugin-visualizer": "^5.14.0",
 		"shiki-codegen": "^3.4.2",
+		"svelte-check": "^4.2.1",
 		"tailwindcss": "^4.1.7",
 		"tempy": "^3.1.0",
 		"typescript": "^5.8.3",

package.json

@@ -0,0 +1,14 @@
+<script>
+	let { msg = "bar" } = $props();
+	let count = $state(0);
+
+	function increment() {
+		count += 1;
+	}
+</script>
+
+<button onclick={increment} class="btn btn-primary font-bold">
+	Clicked {msg}
+	{count}
+	{count === 1 ? "time" : "times"}
+</button>

src/components/Test.svelte

@@ -1,4 +1,5 @@
 ---
+import Test from "../components/Test.svelte";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
 const title = "jsDocs.io";
@@ -7,6 +8,7 @@ const description =
 ---
 
 <BaseLayout {title} {description}>
+	<Test msg={"foo"} client:load />
 	<p>Logo and name</p>
 	<p>Automatically generated documentation for typed npm packages.</p>
 	<p>How to use</p>

src/pages/index.astro

@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@astrojs/svelte";
+
+export default {
+	preprocess: vitePreprocess(),
+};