Merge pull request #11 from heidkaemper/svelte-4

update to svelte 4
heidkaemper · Jan 28, 2024 · a909187 · a909187
2 parents 77345cc + 37312d8
commit a909187
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 18 deletions.
diff --git a/dist/toolbar.js b/dist/toolbar.js
diff --git a/package.json b/package.json
@@ -11,12 +11,12 @@
         "lint:fix": "npx eslint resources/js/**/*.{js,svelte} --fix"
     },
     "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^2.4.6",
-        "eslint": "^8.51.0",
-        "eslint-plugin-svelte3": "^4.0.0",
-        "sass": "^1.69.3",
-        "svelte": "^3.59.2",
-        "svelte-preprocess": "^5.0.4",
-        "vite": "^4.4.11"
+        "@sveltejs/vite-plugin-svelte": "^3.0.2",
+        "eslint": "^8.56.0",
+        "eslint-plugin-svelte": "^2.35.1",
+        "sass": "^1.70.0",
+        "svelte": "^4.2.9",
+        "svelte-preprocess": "^5.1.3",
+        "vite": "^5.0.12"
     }
 }
diff --git a/resources/js/Toolbar.svelte b/resources/js/Toolbar.svelte
@@ -1,3 +1,5 @@
+<svelte:options customElement="statamic-toolbar" />
+
 <script>
     import { onMount } from 'svelte';
     import DebugbarObserver from './helper/DebugbarObserver';

diff --git a/resources/js/components/Breakpoints.svelte b/resources/js/components/Breakpoints.svelte
@@ -39,7 +39,8 @@
             styles += `@media (${breakpoint[1]}) { .breakpoints::before { content: "${breakpoint[0]}" } }`;
         });
 
-        return `<style>${styles}</style>`;
+        // https://github.com/sveltejs/svelte/issues/5292
+        return `<${''}style>${styles}</${''}style>`;
     }
 </script>
 

diff --git a/vite.config.js b/vite.config.js
@@ -14,22 +14,14 @@ export default defineConfig({
     },
     plugins: [
         svelte({
-            include: 'resources/js/Toolbar.svelte',
             compilerOptions: {
                 customElement: true,
-                tag: 'statamic-toolbar',
             },
             preprocess: sveltePreprocess({
                 scss: {
                     includePaths: ['resources/css'],
                 },
             }),
         }),
-        svelte({
-            exclude: 'resources/js/Toolbar.svelte',
-            compilerOptions: {
-                customElement: false,
-            },
-        }),
     ],
 });