@sanity/pkg-utils 6.9.3 → 6.9.4-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/pkg-utils",
-  "version": "6.9.3",
+  "version": "6.9.4-canary.1",
   "description": "Simple utilities for modern npm packages.",
   "keywords": [
     "sanity-io",
@@ -97,7 +97,7 @@
     "outdent": "^0.8.0",
     "parse-git-config": "^3.0.0",
     "pkg-up": "^3.1.0",
-    "prettier": "^3.3.1",
+    "prettier": "^3.3.2",
     "pretty-bytes": "^5.6.0",
     "prompts": "^2.4.2",
     "recast": "0.23.9",
@@ -125,8 +125,8 @@
     "@types/semver": "^7.5.8",
     "@types/treeify": "^1.0.3",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
     "browserslist-to-esbuild": "2.1.1",
     "commitizen": "^4.3.0",
     "cpx": "^1.5.0",
@@ -146,7 +146,7 @@
     "typescript": "5.4.5",
     "vitest": "^1.6.0",
     "vitest-github-actions-reporter": "^0.11.1",
-    "@sanity/pkg-utils": "6.9.3"
+    "@sanity/pkg-utils": "6.9.4-canary.1"
   },
   "peerDependencies": {
     "typescript": "5.4.x"

package/src/node/core/config/types.ts

@@ -16,26 +16,30 @@ export type PkgRuntime = '*' | 'browser' | 'node'
 /** @public */
 export interface PkgExport {
   /** @internal */
-  _exported?: boolean
-  browser?: {
+  '_exported'?: boolean
+  'browser'?: {
     source: string
     import?: string
     require?: string
   }
+  'react-compiler'?: {
+    source?: string
+    default: string
+  }
   // electron?: {
   //   node?: string
   //   default?: string
   // }
-  node?: {
+  'node'?: {
     source?: string
     import?: string
     require?: string
   }
-  types?: string
-  source: string
-  import?: string
-  require?: string
-  default: string
+  'types'?: string
+  'source': string
+  'import'?: string
+  'require'?: string
+  'default': string
 }
 
 /** @public */
@@ -67,20 +71,105 @@ export interface TSDocCustomTag {
   allowMultiple?: boolean
 }
 
+/**
+ * Until these types are on npm: https://github.com/facebook/react/blob/2ba462b665bb4691067e67db3cfbffc56959b788/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L34-L120
+ * @alpha
+ */
+export interface ReactCompilerOptions {
+  logger?: ReactCompilerLogger | null
+
+  panicThreshold?: 'ALL_ERRORS' | 'CRITICAL_ERRORS' | 'NONE'
+
+  compilationMode?: 'infer' | 'syntax' | 'annotation' | 'all'
+
+  /*
+   * If enabled, Forget will import `useMemoCache` from the given module
+   * instead of `react/compiler-runtime`.
+   *
+   * ```
+   * // If set to "react-compiler-runtime"
+   * import {c as useMemoCache} from 'react-compiler-runtime';
+   * ```
+   */
+  runtimeModule?: string | null | undefined
+
+  /**
+   * By default React Compiler will skip compilation of code that suppresses the default
+   * React ESLint rules, since this is a strong indication that the code may be breaking React rules
+   * in some way.
+   *
+   * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the
+   * provided rules will skip compilation. To disable this feature (never bailout of compilation
+   * even if the default ESLint is suppressed), pass an empty array.
+   */
+  eslintSuppressionRules?: Array<string> | null | undefined
+
+  sources?: Array<string> | ((filename: string) => boolean) | null
+}
+
+/**
+ * @alpha
+ * Represents 'events' that may occur during compilation. Events are only
+ * recorded when a logger is set (through the config).
+ * These are the different types of events:
+ * CompileError:
+ *   Forget skipped compilation of a function / file due to a known todo,
+ *   invalid input, or compiler invariant being broken.
+ * CompileSuccess:
+ *   Forget successfully compiled a function.
+ * PipelineError:
+ *   Unexpected errors that occurred during compilation (e.g. failures in
+ *   babel or other unhandled exceptions).
+ */
+export type ReactCompilerLoggerEvent =
+  | {
+      kind: 'CompileError'
+      fnLoc: unknown
+      detail: unknown
+    }
+  | {
+      kind: 'CompileDiagnostic'
+      fnLoc: unknown
+      detail: unknown
+    }
+  | {
+      kind: 'CompileSuccess'
+      fnLoc: unknown
+      fnName: string | null
+      memoSlots: number
+      memoBlocks: number
+      memoValues: number
+      prunedMemoBlocks: number
+      prunedMemoValues: number
+    }
+  | {
+      kind: 'PipelineError'
+      fnLoc: unknown
+      data: string
+    }
+
+/**
+ * @alpha
+ */
+export type ReactCompilerLogger = {
+  logEvent: (filename: string | null, event: ReactCompilerLoggerEvent) => void
+}
+
 /** @public */
 export interface PkgConfigOptions {
   /** @alpha */
   babel?: {
     plugins?: BabelPluginItem[] | null | undefined
     /** @alpha */
-    reactCompiler?:
-      | boolean
-      | {
-          compilationMode: 'infer' | 'annotation' | 'all'
-          panicThreshold: 'all_errors' | 'critical_errors' | 'none'
-          sources?: Array<string> | ((filename: string) => boolean) | null
-        }
+    reactCompiler?: boolean
   }
+  /**
+   * Configure the React Compiler.
+   * To enable it, either:
+   * - set `babel.reactCompiler` to `true`
+   * - add a `react-compiler` export condition,  before any `browser`, `require` or `import` conditions. After any `react-server` and `node` conditions
+   * @alpha */
+  reactCompilerOptions?: ReactCompilerOptions
   bundles?: PkgBundle[]
   /** @alpha */
   define?: Record<string, string | number | boolean | undefined | null>

package/src/node/core/pkg/validatePkg.ts

@@ -21,25 +21,35 @@ const pkgSchema = z.object({
       z.union([
         z.custom<`./${string}.json`>((val) => /^\.\/.*\.json$/.test(val as string)),
         z.object({
-          types: z.optional(z.string()),
-          source: z.optional(z.string()),
-          browser: z.optional(
+          'types': z.optional(z.string()),
+          'source': z.optional(z.string()),
+          'browser': z.optional(
             z.object({
               source: z.string(),
               import: z.optional(z.string()),
               require: z.optional(z.string()),
             }),
           ),
-          node: z.optional(
+          'react-compiler': z.optional(
+            // z.union([
+            // @TODO add support for a string shortcut
+            // z.string(),
+            z.object({
+              source: z.optional(z.string()),
+              default: z.string(),
+            }),
+            // ]),
+          ),
+          'node': z.optional(
             z.object({
               source: z.optional(z.string()),
               import: z.optional(z.string()),
               require: z.optional(z.string()),
             }),
           ),
-          import: z.optional(z.string()),
-          require: z.optional(z.string()),
-          default: z.string(),
+          'import': z.optional(z.string()),
+          'require': z.optional(z.string()),
+          'default': z.string(),
         }),
         z.object({
           types: z.optional(z.string()),

package/src/node/resolveBuildContext.ts

@@ -126,6 +126,8 @@ export async function resolveBuildContext(options: {
         exportEntry.browser?.require,
         exportEntry.node?.source && exportEntry.node.import,
         exportEntry.node?.source && exportEntry.node.require,
+        // @TODO implement this
+        // exportEntry['react-compiler']?.source && exportEntry['react-compiler']?.default,
       ].filter(Boolean) as string[]
     })
     .map((p) => path.resolve(cwd, p))

package/src/node/resolveBuildTasks.ts

@@ -2,7 +2,14 @@ import fs from 'node:fs'
 import path from 'node:path'
 
 import type {BuildContext, PkgExport, PkgFormat, PkgRuntime} from './core'
-import type {BuildTask, DtsTask, RollupLegacyTask, RollupTask, RollupTaskEntry} from './tasks'
+import type {
+  BuildTask,
+  DtsTask,
+  RollupLegacyTask,
+  RollupReactCompilerTask,
+  RollupTask,
+  RollupTaskEntry,
+} from './tasks'
 import {fileEnding, getTargetPaths, legacyEnding} from './tasks/dts/getTargetPaths'
 
 /** @internal */
@@ -24,6 +31,13 @@ export function resolveBuildTasks(ctx: BuildContext): BuildTask[] {
 
   const rollupTasks: Record<string, RollupTask> = {}
   const rollupLegacyTasks: Record<string, RollupLegacyTask> = {}
+  const rollupReactCompilerTask: RollupReactCompilerTask = {
+    type: 'build:react-compiler',
+    runtime: 'browser',
+    format: 'esm',
+    entries: [],
+    target: target.browser,
+  }
 
   function addRollupTaskEntry(format: PkgFormat, runtime: PkgRuntime, entry: RollupTaskEntry) {
     const buildId = `${format}:${runtime}`
@@ -60,6 +74,10 @@ export function resolveBuildTasks(ctx: BuildContext): BuildTask[] {
     }
   }
 
+  function addRollupReactCompilerTaskEntry(entry: RollupTaskEntry) {
+    rollupReactCompilerTask.entries.push(entry)
+  }
+
   // Parse `dts` tasks
   for (const exp of exports) {
     const importId = path.join(pkg.name, exp._path)
@@ -90,6 +108,16 @@ export function resolveBuildTasks(ctx: BuildContext): BuildTask[] {
         targetPaths: getTargetPaths(pkg.type, exp.node),
       })
     }
+
+    // @TODO implement this
+    // if (exp['react-compiler']?.source?.endsWith('.ts')) {
+    //   dtsTask.entries.push({
+    //     importId,
+    //     exportPath: exp._path,
+    //     sourcePath: exp['react-compiler'].source,
+    //     targetPaths: getTargetPaths(pkg.type, exp['react-compiler']),
+    //   })
+    // }
   }
 
   // Handle dts tasks for bundles
@@ -168,6 +196,24 @@ export function resolveBuildTasks(ctx: BuildContext): BuildTask[] {
       })
     }
 
+    // Parse rollup:react-compiler tasks
+    for (const exp of exports) {
+      const output = exp['react-compiler']?.default
+
+      if (!output) continue
+
+      addRollupReactCompilerTaskEntry({
+        path: exp._path,
+        source: exp['react-compiler']?.source || exp.source,
+        output,
+      })
+    }
+
+    // Add react-compiler task
+    if (rollupReactCompilerTask.entries.length) {
+      tasks.push(rollupReactCompilerTask)
+    }
+
     // Create rollup bundles that legacy export files will re-export
     if (config?.legacyExports) {
       for (const exp of exports) {

package/src/node/tasks/dts/getTargetPaths.ts

@@ -63,6 +63,17 @@ export function getTargetPaths(
         )
       }
     }
+
+    if (!expOrBundle['react-compiler']?.source) {
+      if (expOrBundle['react-compiler']?.default) {
+        set.add(
+          expOrBundle['react-compiler'].default.replace(
+            fileEnding,
+            type === 'module' ? dtsEnding : mtsEnding,
+          ),
+        )
+      }
+    }
   }
 
   return Array.from(set)

package/src/node/tasks/index.ts

@@ -1,5 +1,5 @@
 import {dtsTask, dtsWatchTask} from './dts'
-import {rollupLegacyTask, rollupTask, rollupWatchTask} from './rollup'
+import {rollupLegacyTask, rollupReactCompilerTask, rollupTask, rollupWatchTask} from './rollup'
 import type {BuildTaskHandlers, WatchTaskHandlers} from './types'
 
 export * from './dts'
@@ -11,6 +11,7 @@ export const buildTaskHandlers: BuildTaskHandlers = {
   'build:dts': dtsTask,
   'build:js': rollupTask,
   'build:legacy': rollupLegacyTask,
+  'build:react-compiler': rollupReactCompilerTask,
 }
 
 /** @internal */

package/src/node/tasks/rollup/index.ts

@@ -1,3 +1,4 @@
 export * from './rollupLegacyTask'
+export * from './rollupReactCompilerTask'
 export * from './rollupTask'
 export * from './rollupWatchTask'

package/src/node/tasks/rollup/resolveRollupConfig.ts

@@ -13,7 +13,7 @@ import esbuild from 'rollup-plugin-esbuild'
 
 import {pkgExtMap as extMap} from '../../../node/core/pkg/pkgExt'
 import {type BuildContext, type PackageJSON, resolveConfigProperty} from '../../core'
-import type {RollupLegacyTask, RollupTask, RollupWatchTask} from '../types'
+import type {RollupLegacyTask, RollupReactCompilerTask, RollupTask, RollupWatchTask} from '../types'
 
 export interface RollupConfig {
   inputOptions: InputOptions
@@ -23,11 +23,12 @@ export interface RollupConfig {
 /** @internal */
 export function resolveRollupConfig(
   ctx: BuildContext,
-  buildTask: RollupTask | RollupLegacyTask | RollupWatchTask,
+  buildTask: RollupTask | RollupLegacyTask | RollupReactCompilerTask | RollupWatchTask,
 ): RollupConfig {
   const {format, runtime, target} = buildTask
   const {config, cwd, exports: _exports, external, distPath, logger, pkg, ts} = ctx
   const isLegacyExports = buildTask.type === 'build:legacy'
+  const isReactCompiler = buildTask.type === 'build:react-compiler'
   const outputExt = isLegacyExports ? extMap.legacy : extMap[pkg.type || 'commonjs'][format]
   const minify = config?.minify ?? false
   const outDir = path.relative(cwd, distPath)
@@ -95,22 +96,13 @@ export function resolveRollupConfig(
     }),
     commonjs(),
     json(),
-    config?.babel?.reactCompiler &&
+    (isReactCompiler || config?.babel?.reactCompiler) &&
       babel({
         babelrc: false,
         presets: ['@babel/preset-typescript'],
         babelHelpers: 'bundled',
         extensions: ['.ts', '.tsx', '.js', '.jsx'],
-        plugins: [
-          [
-            'babel-plugin-react-compiler',
-            {
-              ...(typeof config?.babel?.reactCompiler === 'object'
-                ? config?.babel?.reactCompiler
-                : {}),
-            },
-          ],
-        ],
+        plugins: [['babel-plugin-react-compiler', config?.reactCompilerOptions || {}]],
       }),
     esbuild({
       jsx: config?.jsx ?? 'automatic',
@@ -164,11 +156,13 @@ export function resolveRollupConfig(
     : resolveConfigProperty(config?.rollup?.plugins, defaultPlugins)
 
   const hashChunkFileNames = config?.rollup?.hashChunkFileNames ?? false
-  const chunksFolder = isLegacyExports
-    ? '_legacy'
-    : hashChunkFileNames
-      ? '_chunks'
-      : '_chunks-[format]'
+  const chunksFolder = isReactCompiler
+    ? '_compiled'
+    : isLegacyExports
+      ? '_legacy'
+      : hashChunkFileNames
+        ? '_chunks'
+        : '_chunks-[format]'
   const chunkFileNames = `${chunksFolder}/${hashChunkFileNames ? '[name]-[hash]' : '[name]'}${outputExt}`
   const entryFileNames = isLegacyExports ? '[name].js' : `[name]${outputExt}`
 

package/src/node/tasks/rollup/rollupReactCompilerTask.ts

@@ -0,0 +1,140 @@
+import path from 'node:path'
+
+import chalk from 'chalk'
+import {rollup} from 'rollup'
+import {Observable} from 'rxjs'
+
+import {createConsoleSpy} from '../../consoleSpy'
+import type {BuildContext} from '../../core'
+import type {RollupReactCompilerTask, TaskHandler} from '../types'
+import {resolveRollupConfig} from './resolveRollupConfig'
+
+/** @internal */
+export const rollupReactCompilerTask: TaskHandler<RollupReactCompilerTask> = {
+  name: (ctx, task) => {
+    const entries = task.entries.filter((e) => !e.path.includes('__$$bundle_'))
+
+    const targetLines = task.target.length
+      ? ['  target:', ...task.target.map((t) => `    - ${chalk.yellow(t)}`)]
+      : []
+
+    const entriesLines = entries.length
+      ? [
+          '  entries:',
+          ...entries.map((e) =>
+            [
+              '    - ',
+              `${chalk.cyan(path.join(ctx.pkg.name, e.path))}: `,
+              `${chalk.yellow(e.source)} ${chalk.gray('→')} ${chalk.yellow(e.output)}`,
+            ].join(''),
+          ),
+        ]
+      : []
+
+    // @TODO list out the root level files that are generated
+
+    return ['Build react compiler exports...', ...targetLines, ...entriesLines].join('\n')
+  },
+  exec: (ctx, task) => {
+    return new Observable((observer) => {
+      execPromise(ctx, task)
+        .then((result) => {
+          observer.next(result)
+          observer.complete()
+        })
+        .catch((err) => observer.error(err))
+    })
+  },
+  complete: () => {
+    //
+  },
+  error: (_ctx, _task, err) => {
+    // eslint-disable-next-line no-console
+    console.error(err)
+  },
+}
+
+async function execPromise(ctx: BuildContext, task: RollupReactCompilerTask) {
+  const {distPath, files, logger} = ctx
+  const outDir = path.relative(ctx.cwd, distPath)
+
+  // Prevent rollup from printing directly to the console
+  const consoleSpy = createConsoleSpy({
+    onRestored: (messages) => {
+      for (const msg of messages) {
+        const text = String(msg.args[0])
+
+        if (msg.code === 'CIRCULAR_DEPENDENCY') {
+          continue // ignore
+        }
+
+        if (text.startsWith('Dynamic import can only')) {
+          continue // ignore
+        }
+
+        if (text.startsWith('Sourcemap is likely to be incorrect')) {
+          continue // ignore
+        }
+
+        if (msg.type === 'log') {
+          logger.info(...msg.args)
+        }
+
+        if (msg.type === 'warn') {
+          logger.warn(...msg.args)
+        }
+
+        if (msg.type === 'error') {
+          logger.error(...msg.args)
+        }
+      }
+    },
+  })
+
+  try {
+    const {inputOptions, outputOptions} = resolveRollupConfig(ctx, task)
+
+    // Create bundle
+    const bundle = await rollup({
+      ...inputOptions,
+      onwarn(warning) {
+        consoleSpy.messages.push({
+          type: 'warn',
+          code: warning.code,
+          args: [warning.message],
+        })
+      },
+    })
+
+    // generate output specific code in-memory
+    // you can call this function multiple times on the same bundle object
+    const {output} = await bundle.generate(outputOptions)
+
+    for (const chunkOrAsset of output) {
+      if (chunkOrAsset.type === 'asset') {
+        files.push({
+          type: 'asset',
+          path: path.resolve(outDir, chunkOrAsset.fileName),
+        })
+      } else {
+        files.push({
+          type: 'chunk',
+          path: path.resolve(outDir, chunkOrAsset.fileName),
+        })
+      }
+    }
+
+    // or write the bundle to disk
+    await bundle.write(outputOptions)
+
+    // closes the bundle
+    await bundle.close()
+
+    // Restore console
+    consoleSpy.restore()
+  } catch (err) {
+    // Restore console
+    consoleSpy.restore()
+    throw err
+  }
+}

package/src/node/tasks/types.ts

@@ -31,6 +31,15 @@ export interface RollupLegacyTask {
   target: string[]
 }
 
+/** @internal */
+export interface RollupReactCompilerTask {
+  type: 'build:react-compiler'
+  entries: RollupTaskEntry[]
+  runtime: 'browser'
+  format: 'esm'
+  target: string[]
+}
+
 /** @internal */
 export interface RollupWatchTask {
   type: 'watch:js'
@@ -42,7 +51,7 @@ export interface RollupWatchTask {
 }
 
 /** @internal */
-export type BuildTask = DtsTask | RollupTask | RollupLegacyTask
+export type BuildTask = DtsTask | RollupTask | RollupLegacyTask | RollupReactCompilerTask
 
 /** @internal */
 export type WatchTask = DtsWatchTask | RollupWatchTask
@@ -59,6 +68,7 @@ export type TaskHandler<Task, Result = void> = {
 export interface BuildTaskHandlers {
   'build:dts': TaskHandler<DtsTask, DtsResult>
   'build:js': TaskHandler<RollupTask>
+  'build:react-compiler': TaskHandler<RollupReactCompilerTask>
   'build:legacy': TaskHandler<RollupLegacyTask>
 }