docs(vite): update SvelteKit entry and the example (#1237)

unocss · Jul 10, 2022 · ccd3cff · ccd3cff
1 parent 9ac3d91
commit ccd3cff
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 60 deletions.
diff --git a/examples/sveltekit/package.json b/examples/sveltekit/package.json
@@ -2,10 +2,10 @@
   "name": "unocss-sveltekit",
   "type": "module",
   "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
+    "dev": "vite dev --force",
+    "build": "vite build",
     "package": "svelte-kit package",
-    "preview": "svelte-kit preview",
+    "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "eslint --ignore-path .gitignore ."
@@ -22,6 +22,7 @@
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "unocss": "link:../../packages/unocss"
+    "unocss": "link:../../packages/unocss",
+    "vite": "2.9.12"
   }
 }
diff --git a/examples/sveltekit/src/app.html b/examples/sveltekit/src/app.html
@@ -3,9 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div id="svelte">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/examples/sveltekit/svelte.config.js b/examples/sveltekit/svelte.config.js
@@ -1,10 +1,5 @@
 import adapter from '@sveltejs/adapter-static'
 import preprocess from 'svelte-preprocess'
-import UnoCss from 'unocss/vite'
-import { extractorSvelte } from '@unocss/core'
-import presetIcons from '@unocss/preset-icons'
-import presetUno from '@unocss/preset-uno'
-import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -15,39 +10,13 @@ const config = {
   kit: {
     adapter: adapter(),
 
-    vite: {
-      plugins: [
-        UnoCss({
-          extractors: [extractorSvelte],
-          shortcuts: [
-            { logo: 'i-logos:svelte-icon w-6em h-6em transform transition-800 hover:rotate-180' },
-            { foo: 'bg-yellow-400' },
-            { bar: 'bg-green-400' },
-          ],
-          presets: [
-            presetUno(),
-            presetIcons({
-              collections: {
-                custom: {
-                  // do not remove LF: testing trimCustomSvg on universal icon loader
-                  circle: `<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-<circle cx="60" cy="60" r="50"/>
-</svg>
-`,
-                },
-                customfsl: FileSystemIconLoader(
-                  './icons',
-                  svg => svg.replace('<svg ', '<svg fill="currentColor" '),
-                ),
-              },
-              extraProperties: {
-                'display': 'inline-block',
-                'vertical-align': 'middle',
-              },
-            }),
-          ],
-        }),
-      ],
+    prerender: {
+      default: true,
+    },
+
+    // Override http methods in the Todo forms
+    methodOverride: {
+      allowed: ['PATCH', 'DELETE'],
     },
   },
 }

diff --git a/examples/sveltekit/vite.config.js b/examples/sveltekit/vite.config.js
@@ -0,0 +1,45 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import UnoCss from 'unocss/vite'
+import { extractorSvelte } from '@unocss/core'
+import presetIcons from '@unocss/preset-icons'
+import presetUno from '@unocss/preset-uno'
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [
+    sveltekit(),
+    UnoCss({
+      extractors: [extractorSvelte],
+      shortcuts: [
+        { logo: 'i-logos:svelte-icon w-6em h-6em transform transition-800 hover:rotate-180' },
+        { foo: 'bg-yellow-400' },
+        { bar: 'bg-green-400' },
+      ],
+      presets: [
+        presetUno(),
+        presetIcons({
+          collections: {
+            custom: {
+              // do not remove LF: testing trimCustomSvg on universal icon loader
+              circle: `<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="50"/>
+</svg>
+`,
+            },
+            customfsl: FileSystemIconLoader(
+              './icons',
+              svg => svg.replace('<svg ', '<svg fill="currentColor" '),
+            ),
+          },
+          extraProperties: {
+            'display': 'inline-block',
+            'vertical-align': 'middle',
+          },
+        }),
+      ],
+    }),
+  ],
+}
+
+export default config
diff --git a/packages/vite/README.md b/packages/vite/README.md
@@ -251,26 +251,20 @@ To support `class:foo` and `class:foo={bar}` add the plugin and configure `extra
 You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shorcuts` to include multiples rules, see `src/routes/__layout.svelte` on linked example project below.
 
 ```ts
-// svelte.config.js
-import preprocess from 'svelte-preprocess'
+// vite.config.js
+import { sveltekit } from '@sveltejs/kit/vite'
 import UnoCss from 'unocss/vite'
 import { extractorSvelte } from '@unocss/core'
 
-/** @type {import('@sveltejs/kit').Config} */
+/** @type {import('vite').UserConfig} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
-  preprocess: preprocess(),
-  kit: {
-    vite: {
-      plugins: [
-        UnoCss({
-          extractors: [extractorSvelte],
-          /* more options */
-        }),
-      ],
-    },
-  },
+  plugins: [
+    sveltekit(),
+    UnoCss({
+      extractors: [extractorSvelte],
+      /* more options */
+    }),
+  ],
 }
 ```