Add support for subpath polyfills

Author: davidmyersdev

README.md

@@ -69,7 +69,9 @@ export default defineConfig({
       // Override the default polyfills for specific modules.
       overrides: {
         // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
-        fs: 'memfs',
+        'fs': 'memfs',
+        // Subpaths can be specified as well.
+        'path/posix': 'path-browserify',
       },
       // Whether to polyfill `node:` protocol imports.
       protocolImports: true,

package.json

@@ -93,10 +93,12 @@
   },
   "dependencies": {
     "@rollup/plugin-inject": "^5.0.5",
+    "browser-resolve": "^2.0.0",
     "node-stdlib-browser": "^1.2.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.1",
+    "@types/browser-resolve": "^2.0.4",
     "@types/node": "^18.18.8",
     "buffer": "6.0.3",
     "esbuild": "^0.19.8",

pnpm-lock.yaml

@@ -1,15 +1,19 @@
-import { createRequire } from 'node:module'
 import inject from '@rollup/plugin-inject'
+import browserResolve from 'browser-resolve'
 import stdLibBrowser from 'node-stdlib-browser'
 import { handleCircularDependancyWarning } from 'node-stdlib-browser/helpers/rollup/plugin'
 import esbuildPlugin from 'node-stdlib-browser/helpers/esbuild/plugin'
 import type { Plugin } from 'vite'
-import { compareModuleNames, isEnabled, isNodeProtocolImport, toRegExp, withoutNodeProtocol } from './utils'
+import { compareModuleNames, isEnabled, isNodeProtocolImport, resolvePolyfill, toEntries, toRegExp, withoutNodeProtocol } from './utils'
 
-export type BuildTarget = 'build' | 'dev'
+export type BareModuleName<T = ModuleName> = T extends `node:${infer P}` ? P : never
+export type BareModuleNameWithSubpath<T = ModuleName> = T extends `node:${infer P}` ? `${P}/${string}` : never
 export type BooleanOrBuildTarget = boolean | BuildTarget
+export type BuildTarget = 'build' | 'dev'
 export type ModuleName = keyof typeof stdLibBrowser
-export type ModuleNameWithoutNodePrefix<T = ModuleName> = T extends `node:${infer P}` ? P : never
+export type OverrideOptions = {
+
+}
 
 export type PolyfillOptions = {
   /**
@@ -22,7 +26,7 @@ export type PolyfillOptions = {
    * })
    * ```
   */
-  include?: ModuleNameWithoutNodePrefix[],
+  include?: BareModuleName[],
   /**
    * @example
    *
@@ -32,7 +36,7 @@ export type PolyfillOptions = {
    * })
    * ```
    */
-  exclude?: ModuleNameWithoutNodePrefix[],
+  exclude?: BareModuleName[],
   /**
    * Specify whether specific globals should be polyfilled.
    *
@@ -66,7 +70,7 @@ export type PolyfillOptions = {
    * })
    * ```
    */
-  overrides?: { [Key in ModuleNameWithoutNodePrefix]?: string },
+  overrides?: { [Key in BareModuleName | BareModuleNameWithSubpath]?: string },
   /**
    * Specify whether the Node protocol version of an import (e.g. `node:buffer`) should be polyfilled too.
    *
@@ -76,14 +80,14 @@ export type PolyfillOptions = {
 }
 
 export type PolyfillOptionsResolved = {
-  include: ModuleNameWithoutNodePrefix[],
-  exclude: ModuleNameWithoutNodePrefix[],
+  include: BareModuleName[],
+  exclude: BareModuleName[],
   globals: {
     Buffer: BooleanOrBuildTarget,
     global: BooleanOrBuildTarget,
     process: BooleanOrBuildTarget,
   },
-  overrides: { [Key in ModuleNameWithoutNodePrefix]?: string },
+  overrides: { [Key in BareModuleName | BareModuleNameWithSubpath]?: string },
   protocolImports: boolean,
 }
 
@@ -127,11 +131,10 @@ const globalShimsBanner = [
  * ```
  */
 export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => {
-  const require = createRequire(import.meta.url)
   const globalShimPaths = [
-    require.resolve('vite-plugin-node-polyfills/shims/buffer'),
-    require.resolve('vite-plugin-node-polyfills/shims/global'),
-    require.resolve('vite-plugin-node-polyfills/shims/process'),
+    'vite-plugin-node-polyfills/shims/buffer',
+    'vite-plugin-node-polyfills/shims/global',
+    'vite-plugin-node-polyfills/shims/process',
   ]
   const optionsResolved: PolyfillOptionsResolved = {
     include: [],
@@ -155,16 +158,16 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => {
     return optionsResolved.exclude.some((excludedName) => compareModuleNames(moduleName, excludedName))
   }
 
-  const toOverride = (name: ModuleNameWithoutNodePrefix): string | void => {
-    if (isEnabled(optionsResolved.globals.Buffer, 'dev') && /^buffer$/.test(name)) {
+  const toOverride = (name: BareModuleName): string | void => {
+    if (/^buffer$/.test(name)) {
       return 'vite-plugin-node-polyfills/shims/buffer'
     }
 
-    if (isEnabled(optionsResolved.globals.global, 'dev') && /^global$/.test(name)) {
+    if (/^global$/.test(name)) {
       return 'vite-plugin-node-polyfills/shims/global'
     }
 
-    if (isEnabled(optionsResolved.globals.process, 'dev') && /^process$/.test(name)) {
+    if (/^process$/.test(name)) {
       return 'vite-plugin-node-polyfills/shims/process'
     }
 
@@ -189,6 +192,7 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => {
 
   return {
     name: 'vite-plugin-node-polyfills',
+    enforce: 'pre',
     config: (config, env) => {
       const isDev = env.command === 'serve'
 
@@ -236,21 +240,25 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => {
               ...globalShimPaths,
             ],
             plugins: [
-              esbuildPlugin(polyfills),
+              esbuildPlugin({
+                ...polyfills,
+              }),
               // Supress the 'injected path "..." cannot be marked as external' error in Vite 4 (emitted by esbuild).
               // https://github.com/evanw/esbuild/blob/edede3c49ad6adddc6ea5b3c78c6ea7507e03020/internal/bundler/bundler.go#L1469
               {
                 name: 'vite-plugin-node-polyfills-shims-resolver',
-                setup(build) {
+                setup: (build) => {
                   for (const globalShimPath of globalShimPaths) {
                     const globalShimsFilter = toRegExp(globalShimPath)
 
                     // https://esbuild.github.io/plugins/#on-resolve
                     build.onResolve({ filter: globalShimsFilter }, () => {
+                      const resolved = browserResolve.sync(globalShimPath)
+
                       return {
                         // https://github.com/evanw/esbuild/blob/edede3c49ad6adddc6ea5b3c78c6ea7507e03020/internal/bundler/bundler.go#L1468
                         external: false,
-                        path: globalShimPath,
+                        path: resolved,
                       }
                     })
                   }
@@ -267,5 +275,28 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => {
         },
       }
     },
+    async resolveId(id) {
+      for (const [moduleName, modulePath] of toEntries(polyfills)) {
+        if (id.startsWith(modulePath)) {
+          // Grab the subpath without the forward slash. E.g. `path/posix` -> `posix`
+          const moduleSubpath = id.slice(modulePath.length + 1)
+
+          if (moduleSubpath.length > 0) {
+            const moduleNameWithoutProtocol = withoutNodeProtocol(moduleName)
+            const overrideName = `${moduleNameWithoutProtocol}/${moduleSubpath}` as const
+            const override = optionsResolved.overrides[overrideName]
+
+            if (!override) {
+              // Todo: Maybe throw error?
+              return undefined
+            }
+
+            return await resolvePolyfill(this, override)
+          }
+
+          return browserResolve.sync(modulePath)
+        }
+      }
+    },
   }
 }

src/index.ts

@@ -1,4 +1,8 @@
-import type { BooleanOrBuildTarget, ModuleName, ModuleNameWithoutNodePrefix } from './index'
+import type { PluginContext } from 'rollup'
+import type { BareModuleName, BooleanOrBuildTarget, ModuleName } from './index'
+
+export type Identity<T> = T
+export type ObjectToEntries<T> = Identity<{ [K in keyof T]: [K, T[K]] }[keyof T][]>
 
 export const compareModuleNames = (moduleA: ModuleName, moduleB: ModuleName) => {
   return withoutNodeProtocol(moduleA) === withoutNodeProtocol(moduleB)
@@ -15,13 +19,37 @@ export const isNodeProtocolImport = (name: string) => {
   return name.startsWith('node:')
 }
 
+export const resolvePolyfill = async (context: PluginContext, name: string) => {
+  const consumerResolved = await context.resolve(name)
+
+  if (consumerResolved) {
+    return consumerResolved
+  }
+
+  const provider = await context.resolve('vite-plugin-node-polyfills')
+  const providerResolved = await context.resolve(name, provider!.id)
+
+  if (providerResolved) {
+    return providerResolved
+  }
+
+  const upstream = await context.resolve('node-stdlib-browser', provider!.id)
+  const upstreamResolved = await context.resolve(name, upstream!.id)
+
+  return upstreamResolved
+}
+
+export const toEntries = <T extends Record<PropertyKey, unknown>>(object: T): ObjectToEntries<T> => {
+  return Object.entries(object) as ObjectToEntries<T>
+}
+
 export const toRegExp = (text: string) => {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
   const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 
   return new RegExp(`^${escapedText}$`)
 }
 
-export const withoutNodeProtocol = (name: ModuleName): ModuleNameWithoutNodePrefix => {
-  return name.replace(/^node:/, '') as ModuleNameWithoutNodePrefix
+export const withoutNodeProtocol = (name: ModuleName): BareModuleName => {
+  return name.replace(/^node:/, '') as BareModuleName
 }