From 55b80f10846ad10bc26a63af8af033db993c7a66 Mon Sep 17 00:00:00 2001 From: Jacob Bowdoin <7559478+jacob-8@users.noreply.github.com> Date: Fri, 28 Oct 2022 00:14:33 +0800 Subject: [PATCH] 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 --- examples/sveltekit-scoped/README.md | 2 ++ examples/sveltekit-scoped/package.json | 6 ++++++ examples/sveltekit-scoped/remove-links.js | 14 ++++++++++++++ examples/sveltekit-scoped/vite.config.ts | 4 ++-- examples/sveltekit/README.md | 2 ++ examples/sveltekit/package.json | 5 +++++ examples/sveltekit/remove-links.js | 14 ++++++++++++++ packages/transformer-directives/README.md | 6 +++--- 8 files changed, 48 insertions(+), 5 deletions(-) create mode 100644 examples/sveltekit-scoped/remove-links.js create mode 100644 examples/sveltekit/remove-links.js diff --git a/examples/sveltekit-scoped/README.md b/examples/sveltekit-scoped/README.md index 13a0382843..5eb6913cbd 100644 --- 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 index d2fbff6538..3ace1f68e6 100644 --- a/examples/sveltekit-scoped/package.json +++ b/examples/sveltekit-scoped/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", @@ -10,6 +11,7 @@ }, "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 new file mode 100644 index 0000000000..36901310c1 --- /dev/null +++ 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 index 420e10b455..1e7b502c9e 100644 --- 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 index c6ba4b1f6a..ba01679011 100644 --- 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 index 4369abb0ac..56641afbb5 100644 --- 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 new file mode 100644 index 0000000000..36901310c1 --- /dev/null +++ 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 index 69280d7120..e3149d9b58 100644 --- 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