Merge branch 'main' into chore/migrate-skeleton-v2

package.json

@@ -3,8 +3,13 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "pnpm build-dev && run-p run:chrome watch",
-		"build": "vite build",
+		"build-dev": "vite build --mode development && pnpm replace-background-path && pnpm build-content-script",
+		"watch": "watch 'pnpm build-dev' src static",
+		"build": "vite build && pnpm replace-background-path && pnpm build-content-script",
+		"run:chrome": "web-ext run -t chromium -s build",
+		"replace-background-path": "cd build; sed -i \"\" \"s#\\$BACKGROUND_PATH#$(find app -wholename '*/immutable/background.*.js')#g\" manifest.json; cd -",
+		"build-content-script": "esbuild src/content.ts --bundle --minify --outdir=build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -14,31 +19,35 @@
 	},
 	"devDependencies": {
 		"@floating-ui/dom": "^1.5.3",
-		"@skeletonlabs/skeleton": "^2.1.0",
+		"@skeletonlabs/skeleton": "^2.3.0",
-		"@skeletonlabs/tw-plugin": "^0.2.0",
+		"@skeletonlabs/tw-plugin": "^0.2.2",
 		"@sveltejs/adapter-auto": "^2.1.0",
-		"@sveltejs/kit": "^1.25.0",
+		"@sveltejs/kit": "^1.25.2",
 		"@tailwindcss/forms": "^0.5.6",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/chrome": "^0.0.246",
+		"@types/chrome": "^0.0.247",
-		"@typescript-eslint/eslint-plugin": "^6.7.0",
+		"@typescript-eslint/eslint-plugin": "^6.8.0",
-		"@typescript-eslint/parser": "^6.7.0",
+		"@typescript-eslint/parser": "^6.8.0",
-		"autoprefixer": "^10.4.15",
+		"autoprefixer": "^10.4.16",
-		"eslint": "^8.49.0",
+		"eslint": "^8.51.0",
 		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.33.1",
+		"eslint-plugin-svelte": "^2.34.0",
-		"postcss": "^8.4.29",
+		"highlight.js": "^11.9.0",
+		"postcss": "^8.4.31",
 		"prettier": "^3.0.3",
 		"prettier-plugin-svelte": "^3.0.3",
-		"svelte": "^4.2.0",
+		"svelte": "^4.2.1",
-		"svelte-check": "^3.5.1",
+		"svelte-check": "^3.5.2",
 		"sveltekit-adapter-chrome-extension": "^2.0.0",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
-		"vite": "^4.4.9",
 		"vite-plugin-tailwind-purgecss": "^0.1.3",
-		"vitest": "^0.34.4"
+		"vite": "^4.4.11",
+		"vitest": "^0.34.6",
+		"npm-run-all": "^4.1.5",
+		"watch": "^1.0.2"
+
 	},
 	"type": "module"
 }

src/background.ts

@@ -0,0 +1 @@
+console.log('hello from background script')

src/content.ts

@@ -0,0 +1 @@
+console.log('hello from content script')

src/routes/+layout.svelte

@@ -1,4 +1,6 @@
 <script lang='ts'>
+
+	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
 </script>

static/manifest.json

@@ -10,5 +10,15 @@
 		"default_popup": "index.html",
 		"default_icon": "favicon.png",
 		"default_title": "sveltekit-extension-template"
+	},
+	"background": {
+    "service_worker": "$BACKGROUND_PATH",
+    "type": "module"
+  },
+	"content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["content.js"]
     }
+  ]
 }

tailwind.config.ts

@@ -1,17 +1,25 @@
 import { join } from 'path';
 import type { Config } from 'tailwindcss';
+
+
+// 1. Import the Skeleton plugin
 import { skeleton } from '@skeletonlabs/tw-plugin';
 
 const config = {
+	// 2. Opt for dark mode to be handled via the class method
 	darkMode: 'class',
 	content: [
 		'./src/**/*.{html,js,svelte,ts}',
+		// 3. Append the path to the Skeleton package
 		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
 	],
 	theme: {
 		extend: {}
 	},
-	plugins: [skeleton({ themes: { preset: ['skeleton'] } })]
+	plugins: [
+		// 4. Append the Skeleton plugin (after other plugins)
+		skeleton({ themes: { preset: [{ name: 'skeleton', enhancements: true }] } })
+	]
 } satisfies Config;
 
 export default config;

vite.config.ts

@@ -1,10 +1,18 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { defineConfig } from 'vitest/config';
+import { fileURLToPath } from 'url';
 
 export default defineConfig({
 	plugins: [sveltekit(), purgeCss()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+	build: {
+    rollupOptions: {
+      input: {
+				background: fileURLToPath(new URL('./src/background.ts', import.meta.url)),
+      }
+    }
   }
 });