docs(sveltekit): Add Open in Stackblitz buttons to SvelteKit example …

…repo readmes (#1802) * run stackblitz specific command on loading sveltekit-scoped example in stackblitz * add script to rename package links to latest for stackblitz * add @iconify-json/ri * copy link removal across to sveltekit example * chore: lint extra spacing * chore: fix transformerDirectives typo to match function name exported from unocss package
unocss · Oct 27, 2022 · 55b80f1 · 55b80f1
1 parent fa50490
commit 55b80f1
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 5 deletions.
diff --git a/examples/sveltekit-scoped/README.md b/examples/sveltekit-scoped/README.md
@@ -1,5 +1,7 @@
 # SvelteKit + UnoCSS Vite Plugin (svelte-scoped)
 
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/unocss/unocss/tree/main/examples/sveltekit-scoped)
+
 ## Why?
 
 ### Scoping utility classes by component unleashes creativity

diff --git a/examples/sveltekit-scoped/package.json b/examples/sveltekit-scoped/package.json
@@ -3,13 +3,15 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
+    "stackblitz:dev": "node remove-links.js && npm install && 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": {
     "@iconify-json/logos": "^1.1.17",
+    "@iconify-json/ri": "^1.1.3",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@unocss/core": "link:../../packages/core",
@@ -21,5 +23,9 @@
     "typescript": "^4.8.4",
     "unocss": "link:../../packages/unocss",
     "vite": "^3.1.8"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "npm run stackblitz:dev"
   }
 }
diff --git a/examples/sveltekit-scoped/remove-links.js b/examples/sveltekit-scoped/remove-links.js
@@ -0,0 +1,14 @@
+import { promises as fsPromises } from 'fs'
+
+async function replaceInFile(filename, replacement) {
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const replaced = contents.replace(/"link:...+"/gi, replacement)
+    await fsPromises.writeFile(filename, replaced)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}
+
+replaceInFile('./package.json', '"latest"')
diff --git a/examples/sveltekit-scoped/vite.config.ts b/examples/sveltekit-scoped/vite.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'vite'
 import UnoCSS from 'unocss/vite'
 import presetIcons from '@unocss/preset-icons'
 import presetUno from '@unocss/preset-uno'
-import transformerDirective from '@unocss/transformer-directives'
+import transformerDirectives from '@unocss/transformer-directives'
 
 export default defineConfig({
   plugins: [
@@ -13,7 +13,7 @@ export default defineConfig({
         { logo: 'i-logos:svelte-icon w-7em h-7em transform transition-300' },
       ],
       transformers: [
-        transformerDirective(),
+        transformerDirectives(),
       ],
       presets: [
         presetUno(),

diff --git a/examples/sveltekit/README.md b/examples/sveltekit/README.md
@@ -1,5 +1,7 @@
 # SvelteKit (release candidate) + UnoCSS Vite Plugin
 
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/unocss/unocss/tree/main/examples/sveltekit)
+
 - Works with @sveltejs/kit@1.0.0-next.506 (release candidate) and @sveltejs/adapter-auto@1.0.0-next.80
 - Uses PresetUno and PresetIcons
 - Creates a global stylesheet

diff --git a/examples/sveltekit/package.json b/examples/sveltekit/package.json
@@ -3,6 +3,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
+    "stackblitz:dev": "node remove-links.js && npm install && vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -22,5 +23,9 @@
     "typescript": "^4.8.4",
     "unocss": "link:../../packages/unocss",
     "vite": "3.1.8"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "npm run stackblitz:dev"
   }
 }
diff --git a/examples/sveltekit/remove-links.js b/examples/sveltekit/remove-links.js
@@ -0,0 +1,14 @@
+import { promises as fsPromises } from 'fs'
+
+async function replaceInFile(filename, replacement) {
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const replaced = contents.replace(/"link:...+"/gi, replacement)
+    await fsPromises.writeFile(filename, replaced)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}
+
+replaceInFile('./package.json', '"latest"')
diff --git a/packages/transformer-directives/README.md b/packages/transformer-directives/README.md
@@ -13,12 +13,12 @@ npm i -D @unocss/transformer-directives
 ```ts
 // uno.config.js
 import { defineConfig } from 'unocss'
-import transformerDirective from '@unocss/transformer-directives'
+import transformerDirectives from '@unocss/transformer-directives'
 
 export default defineConfig({
   // ...
   transformers: [
-    transformerDirective(),
+    transformerDirectives(),
   ],
 })
 ```
@@ -65,7 +65,7 @@ To use rules with `:`, you will need to quote the value
 This feature is enabled by default (with prefix `--at-`), you can configure it or disable it via:
 
 ```js
-transformerDirective({
+transformerDirectives({
   varStyle: '--my-at-',
   // or disable with:
   // varStyle: false