feat(svelte-scoped): add config hmr (#3111)

examples/sveltekit-scoped/getAllConfigFiles.ts

@@ -0,0 +1,7 @@
+import { readdirSync } from 'node:fs'
+import { extname, join } from 'node:path'
+
+export function getAllConfigFiles(dir: string): string[] {
+  const files = readdirSync(dir)
+  return files.filter(file => extname(file) === '.ts').map(file => join(dir, file))
+}

examples/sveltekit-scoped/src/shortcuts/logo.ts

@@ -0,0 +1 @@
+export const logo = { logo: 'i-logos:svelte-icon w-7em h-7em transform transition-300' }

examples/sveltekit-scoped/uno.config.ts

@@ -6,10 +6,11 @@ import {
   presetWebFonts,
 } from 'unocss'
 import { presetForms } from '@julr/unocss-preset-forms'
+import { logo } from './src/shortcuts/logo'
 
 export default defineConfig({
   shortcuts: [
-    { logo: 'i-logos:svelte-icon w-7em h-7em transform transition-300' },
+    logo,
     { 'styled-input': 'rounded-md border-gray-300 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50' },
   ],
   presets: [

examples/sveltekit-scoped/vite.config.ts

@@ -3,12 +3,19 @@ import { defineConfig } from 'vite'
 
 import UnoCSS from '@unocss/svelte-scoped/vite'
 import transformerDirectives from '@unocss/transformer-directives'
+import { getAllConfigFiles } from './getAllConfigFiles'
 
 export default defineConfig({
   plugins: [
     UnoCSS({
+      // all of these are optional
       injectReset: '@unocss/reset/tailwind.css',
+      // to be able to use --at-apply in your .css files
       cssFileTransformers: [transformerDirectives()],
+      // svelte-scoped will automatically run HMR when you adjust your uno.config.ts file, but if you have additional dependencies you want HMR for, you can specify them here
+      configOrPath: {
+        configDeps: getAllConfigFiles('./src/shortcuts'),
+      },
     }),
     sveltekit(),
   ],

packages/svelte-scoped/package.json

@@ -2,7 +2,7 @@
   "name": "@unocss/svelte-scoped",
   "type": "module",
   "version": "0.55.7",
-  "description": "Use UnoCSS in a modular fashion with styles being stored only in the Svelte component they are used in: Vite plugin for apps, preprocessor for component libraries",
+  "description": "Use UnoCSS in a modular fashion with styles being stored only in the Svelte component they are used in: Vite plugin for apps, Svelte preprocessor for component libraries",
   "author": "Jacob Bowdoin",
   "license": "MIT",
   "homepage": "https://github.com/unocss/unocss/tree/main/packages/svelte-scoped#readme",

packages/svelte-scoped/src/_preprocess/types.d.ts

@@ -1,4 +1,5 @@
 import type { UnoGenerator, UserConfig } from '@unocss/core'
+import type { LoadConfigResult } from '@unocss/config'
 
 export interface UnocssSveltePreprocessOptions extends TransformClassesOptions, TransformApplyOptions {
   /**
@@ -37,6 +38,6 @@ export interface TransformApplyOptions {
 }
 
 export interface SvelteScopedContext {
-  uno: UnoGenerator<{}>
-  ready: Promise<UserConfig<{}>>
+  uno: UnoGenerator
+  ready: Promise<LoadConfigResult<UserConfig>>
 }

packages/svelte-scoped/src/_vite/config-hmr.ts

@@ -0,0 +1,24 @@
+import type { Plugin } from 'vite'
+import type { SvelteScopedContext } from '../preprocess'
+
+export function ConfigHMRPlugin({ ready }: SvelteScopedContext): Plugin {
+  return {
+    name: 'unocss:svelte-scoped:config',
+    async configureServer(server) {
+      const { sources } = await ready
+
+      if (!sources.length)
+        return
+
+      server.watcher.add(sources)
+      server.watcher.on('add', handleFileChange)
+      server.watcher.on('change', handleFileChange)
+      server.watcher.on('unlink', handleFileChange)
+
+      function handleFileChange(filepath: string) {
+        if (sources.includes(filepath))
+          server.restart()
+      }
+    },
+  }
+}

packages/svelte-scoped/src/_vite/createCssTransformerPlugins.ts

@@ -5,7 +5,7 @@ import { applyTransformers } from '../../../shared-integration/src/transformers'
 
 const svelteIdRE = /[&?]svelte/
 
-export function createCssTransformerPlugins(ctx: SvelteScopedContext, cssTransformers: PluginOptions['transformers']): Plugin[] {
+export function createCssTransformerPlugins(context: SvelteScopedContext, cssTransformers: PluginOptions['transformers']): Plugin[] {
   const enforces = ['default', 'pre', 'post'] as const
   return enforces.map((enforce): Plugin => ({
     name: `unocss:svelte-scoped-transformers:${enforce}`,
@@ -14,9 +14,9 @@ export function createCssTransformerPlugins(ctx: SvelteScopedContext, cssTransfo
     async transform(code, id) {
       if (!id.match(cssIdRE) || id.match(svelteIdRE))
         return
-      ctx.uno.config.transformers = cssTransformers ?? []
+      context.uno.config.transformers = cssTransformers ?? []
       return applyTransformers({
-        ...ctx,
+        ...context,
         affectedModules: new Set<string>(),
       } as UnocssPluginContext, code, id, enforce)
     },

packages/svelte-scoped/src/_vite/index.ts

@@ -9,6 +9,7 @@ import type { UnocssSvelteScopedViteOptions } from './types'
 import { PassPreprocessToSveltePlugin } from './passPreprocessToSveltePlugin'
 import { GlobalStylesPlugin } from './globalStylesPlugin'
 import { createCssTransformerPlugins } from './createCssTransformerPlugins'
+import { ConfigHMRPlugin } from './config-hmr'
 
 export function UnocssSvelteScopedVite(options: UnocssSvelteScopedViteOptions = {}): Plugin[] {
   const context = createSvelteScopedContext(options.configOrPath)
@@ -21,10 +22,11 @@ export function UnocssSvelteScopedVite(options: UnocssSvelteScopedViteOptions =
 
   const plugins: Plugin[] = [
     GlobalStylesPlugin(context, options.injectReset),
+    ConfigHMRPlugin(context),
   ]
 
   if (!options.onlyGlobal)
-    plugins.push(PassPreprocessToSveltePlugin(options, context))
+    plugins.push(PassPreprocessToSveltePlugin(context, options))
 
   if (options.cssFileTransformers)
     plugins.push(...createCssTransformerPlugins(context, options.cssFileTransformers))
@@ -43,9 +45,9 @@ function createSvelteScopedContext(configOrPath?: UserConfig | string): SvelteSc
   const ready = reloadConfig()
 
   async function reloadConfig() {
-    const { config } = await loadConfig(process.cwd(), configOrPath)
+    const { config, sources } = await loadConfig(process.cwd(), configOrPath)
     uno.setConfig(config, defaults)
-    return config
+    return { config, sources }
   }
 
   return {

packages/svelte-scoped/src/_vite/passPreprocessToSveltePlugin.ts

@@ -3,7 +3,7 @@ import type { SvelteScopedContext } from '../preprocess'
 import UnocssSveltePreprocess from '../preprocess'
 import type { UnocssSvelteScopedViteOptions } from './types'
 
-export function PassPreprocessToSveltePlugin(options: UnocssSvelteScopedViteOptions = {}, ctx: SvelteScopedContext): Plugin {
+export function PassPreprocessToSveltePlugin(context: SvelteScopedContext, options: UnocssSvelteScopedViteOptions = {}): Plugin {
   let commandIsBuild = true
   const isBuild = () => commandIsBuild
 
@@ -16,7 +16,7 @@ export function PassPreprocessToSveltePlugin(options: UnocssSvelteScopedViteOpti
     },
 
     api: {
-      sveltePreprocess: UnocssSveltePreprocess(options, ctx, isBuild),
+      sveltePreprocess: UnocssSveltePreprocess(options, context, isBuild),
     },
   }
 }