feat(node/plugin): improve compatibility with rollup-plugin-esbuild (…

…#711)

cspell.json

@@ -9,6 +9,7 @@
     "*.json",
     "*.toml",
     "*.css",
+    "*.svg",
     "/rollup",
     "/packages/rollup-tests/test",
     "/target",
@@ -107,6 +108,7 @@
     "vite",
     "vitepress",
     "Yinan",
-    "Yunfei"
+    "Yunfei",
+    "dataurl"
   ]
 }

examples/rollup-plugin-esbuild/index.js

@@ -0,0 +1,3 @@
+import { createApp } from 'vue'
+
+export default createApp({})

examples/rollup-plugin-esbuild/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rolldown --config ./rolldown.config.js"
+  },
+  "devDependencies": {
+    "rolldown": "workspace:*"
+  },
+  "dependencies": {
+    "rollup-plugin-esbuild": "^6.1.1"
+  }
+}

examples/rollup-plugin-esbuild/rolldown.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'rolldown'
+import esbuild from 'rollup-plugin-esbuild'
+
+export default defineConfig({
+  input: './src/main.ts',
+  plugins: [
+    esbuild({
+      loaders: {
+        svg: 'dataurl',
+      },
+    }),
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.svg'],
+  },
+})

examples/rollup-plugin-esbuild/src/counter.ts

@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+  let counter = 0
+  const setCounter = (count: number) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}

examples/rollup-plugin-esbuild/src/main.ts

@@ -0,0 +1,24 @@
+import './style.css'
+import typescriptLogo from './typescript.svg'
+import viteLogo from './vite.svg'
+import { setupCounter } from './counter.ts'
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>Vite + TypeScript</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite and TypeScript logos to learn more
+    </p>
+  </div>
+`
+
+setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

examples/rollup-plugin-esbuild/src/style.css

@@ -0,0 +1,96 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

packages/rolldown/src/plugin/bindingify-build-hooks.ts

@@ -44,7 +44,21 @@ export function bindingifyResolveId(
   const [handler, _optionsIgnoredSofar] = normalizeHook(hook)
 
   return async (specifier, importer, options) => {
-    return await handler.call(null, specifier, importer ?? undefined, options)
+    const ret = await handler.call(
+      null,
+      specifier,
+      importer ?? undefined,
+      options,
+    )
+    if (ret == false || ret == null) {
+      return
+    }
+    if (typeof ret === 'string') {
+      return {
+        id: ret,
+      }
+    }
+    return ret
   }
 }
 

packages/rolldown/src/plugin/index.ts

@@ -5,12 +5,10 @@ import {
   BindingOutputs,
 } from '../binding'
 import { RolldownNormalizedInputOptions } from '../options/input-options'
-import { AnyFn, AnyObj } from '../types/utils'
+import { AnyFn, AnyObj, NullValue } from '../types/utils'
 
 type MaybePromise<T> = T | Promise<T>
 
-type NullValue = null | undefined | void
-
 // Use a type alias here, we might wrap `BindingPluginContext` in the future
 type PluginContext = BindingPluginContext
 
@@ -41,7 +39,9 @@ export interface Plugin {
       importer: string | undefined,
       extraOptions: BindingHookResolveIdExtraOptions,
     ) => MaybePromise<
+      | string
       | NullValue
+      | false
       | {
           id: string
           external?: boolean

packages/rolldown/src/types/utils.ts

@@ -3,3 +3,5 @@ export interface AnyFn {
 }
 
 export interface AnyObj {}
+
+export type NullValue<T = void> = T | undefined | null | void

packages/rolldown/tests/fixtures/plugin/resolve-id/return-types/_config.ts

@@ -0,0 +1,62 @@
+// Rolldown should able to recognize kind of return types of the `resolveId` plugin hook.
+
+import type { Plugin } from 'rolldown'
+import { defineTest } from '@tests'
+import { expect, vi } from 'vitest'
+import path from 'node:path'
+
+const entry = path.join(__dirname, './main.js')
+
+const returnNull = vi.fn()
+const returnUndefined = vi.fn()
+const returnString = vi.fn()
+const returnObjId = vi.fn()
+
+export default defineTest({
+  config: {
+    input: entry,
+    plugins: [
+      {
+        name: 'return-null',
+        resolveId() {
+          returnNull()
+          return null
+        },
+      },
+      {
+        name: 'return-undefined',
+        resolveId() {
+          returnUndefined()
+          return null
+        },
+      },
+      {
+        name: 'return-string',
+        resolveId(id) {
+          if (id === 'foo') {
+            returnString()
+            return path.resolve(__dirname, './foo.js')
+          }
+          return null
+        },
+      },
+      {
+        name: 'return-obj-id',
+        resolveId(id) {
+          if (id === 'bar') {
+            returnObjId()
+            return {
+              id: path.resolve(__dirname, './bar.js'),
+            }
+          }
+        },
+      },
+    ],
+  },
+  afterTest: () => {
+    expect(returnNull).toBeCalledTimes(3)
+    expect(returnUndefined).toBeCalledTimes(3)
+    expect(returnString).toHaveBeenCalledOnce()
+    expect(returnObjId).toHaveBeenCalledOnce()
+  },
+})

packages/rolldown/tests/fixtures/plugin/resolve-id/return-types/main.js

@@ -0,0 +1,2 @@
+import 'foo'
+import 'bar'