chore: add config changes in related hooks (#2078)

packages/config/src/diff-config.ts

@@ -1,17 +1,13 @@
 import { dashCase } from '@pandacss/shared'
-import type { ArtifactId, Config } from '@pandacss/types'
-import microdiff, { type Difference } from 'microdiff'
+import type { ArtifactId, Config, DiffConfigResult } from '@pandacss/types'
+import microdiff from 'microdiff'
 import { artifactMatchers } from './config-deps'
 
-export interface DiffConfigResult {
-  hasConfigChanged: boolean
-  artifacts: Set<ArtifactId>
-  diffs: Difference[]
-}
-
 type ConfigOrFn = Config | (() => Config)
 const runIfFn = (fn: ConfigOrFn): Config => (typeof fn === 'function' ? fn() : fn)
 
+export { type DiffConfigResult }
+
 /**
  * Diff the two config objects and return the list of affected properties
  */

packages/node/src/builder.ts

@@ -70,7 +70,7 @@ export class Builder {
     // config change
     if (this.affecteds.hasConfigChanged) {
       logger.debug('builder', '⚙️ Config changed, reloading')
-      await ctx.hooks['config:change']?.({ config: ctx.config })
+      await ctx.hooks['config:change']?.({ config: ctx.config, changes: this.affecteds })
       return
     }
 

packages/node/src/codegen.ts

@@ -15,7 +15,7 @@ export async function codegen(ctx: PandaContext, ids?: ArtifactId[]) {
   const promises = ctx.getArtifacts(ids).map((artifact) => limit(() => ctx.output.write(artifact)))
   await Promise.allSettled(promises)
 
-  await ctx.hooks['codegen:done']?.()
+  await ctx.hooks['codegen:done']?.({ changed: ids })
 
   return {
     box: createBox({

packages/node/src/generate.ts

@@ -46,7 +46,7 @@ export async function generate(config: Config, configPath?: string) {
       }
 
       logger.info('config:change', 'Config changed, restarting...')
-      await ctx.hooks['config:change']?.({ config: ctx.config })
+      await ctx.hooks['config:change']?.({ config: ctx.config, changes: affecteds })
       return build(ctx, Array.from(affecteds.artifacts))
     })
 

packages/types/package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "@pandacss/extractor": "workspace:*",
     "csstype": "3.1.3",
+    "microdiff": "^1.3.2",
     "ncp": "^2.0.0",
     "pkg-types": "1.0.3"
   }

packages/types/src/artifact.ts

@@ -1,3 +1,4 @@
+import { type Difference } from 'microdiff'
 import type { Nullable } from './shared'
 
 export interface ArtifactContent {
@@ -49,3 +50,9 @@ export interface ArtifactFilters {
   ids?: ArtifactId[]
   affecteds?: AffectedArtifacts
 }
+
+export interface DiffConfigResult {
+  hasConfigChanged: boolean
+  artifacts: Set<ArtifactId>
+  diffs: Difference[]
+}

packages/types/src/hooks.ts

@@ -1,5 +1,6 @@
-import type { HooksApiInterface } from './hooks-api'
+import type { ArtifactId, DiffConfigResult } from './artifact'
 import type { LoadConfigResult, UserConfig } from './config'
+import type { HooksApiInterface } from './hooks-api'
 import type { ParserResultInterface } from './parser'
 
 type MaybeAsyncReturn<T = void> = Promise<T> | T
@@ -17,7 +18,7 @@ export interface PandaHooks {
   /**
    * Called when the config file or one of its dependencies (imports) has changed.
    */
-  'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
+  'config:change': (args: { config: UserConfig; changes: DiffConfigResult }) => MaybeAsyncReturn
   /**
    * Called after reading the file content but before parsing it.
    * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
@@ -32,7 +33,7 @@ export interface PandaHooks {
   /**
    * Called after the codegen is completed
    */
-  'codegen:done': () => MaybeAsyncReturn
+  'codegen:done': (args: { changed: ArtifactId[] | undefined }) => MaybeAsyncReturn
   /**
    * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
    * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS

packages/types/src/index.ts

@@ -1,10 +1,10 @@
-export type * from './hooks-api'
 export type * from './analyze-report'
 export type * from './artifact'
 export type * from './composition'
 export type * from './conditions'
 export type * from './config'
 export type * from './hooks'
+export type * from './hooks-api'
 export type * from './parser'
 export type * from './parts'
 export type * from './pattern'