fix browser build

packages/docs/src/components/grayscale-example.tsx

@@ -37,7 +37,7 @@ export function GrayscaleExample() {
 
   useEffect(() => {
     // Or load images hosted on the same domain.
-    Jimp.read("/dice.png").then(async (image) => {
+    Jimp.read("/jimp/dice.png").then(async (image) => {
       setSelectedFile(await image.getBase64("image/png"));
       image.greyscale();
       setOutput(await image.getBase64("image/png"));

packages/docs/src/content/docs/index.mdx

@@ -8,7 +8,7 @@ hero:
     file: ../../assets/image.png
   actions:
     - text: Read the docs
-      link: /guides/getting-started/
+      link: /jimp/guides/getting-started/
       icon: right-arrow
       variant: primary
     - text: GitHub
@@ -63,6 +63,6 @@ Load an image, manipulate it, and save it.
 </Steps>
 
 <CardGrid>
-  <LinkCard title="Getting Started" href="/guides/getting-started/" />
-  <LinkCard title="API Reference" href="/api/jimp/classes/jimp/" />
+  <LinkCard title="Getting Started" href="/jimp/guides/getting-started/" />
+  <LinkCard title="API Reference" href="/jimp/api/jimp/classes/jimp/" />
 </CardGrid>

packages/jimp/package.json

@@ -75,6 +75,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@vitest/browser": "^1.4.0",
     "eslint": "^8.57.0",
+    "node-self": "^1.0.2",
     "path-browserify": "^1.0.1",
     "rollup": "^4.14.1",
     "rollup-plugin-dts": "^6.1.0",

packages/jimp/rollup.config.js

@@ -6,10 +6,45 @@ import nodePolyfills from "rollup-plugin-polyfill-node";
 import inject from "@rollup/plugin-inject";
 import terser from "@rollup/plugin-terser";
 
+function injectCodePlugin(code) {
+  return {
+    name: "inject-code",
+    transform(src, id) {
+      if (id.endsWith("jimp/src/index.ts")) {
+        const injectedCode = `${code}\n${src}`;
+        const lines = code.split("\n");
+        const injectedLines = injectedCode.split("\n");
+        const mappings = [];
+
+        for (let i = 0; i < injectedLines.length; i++) {
+          mappings.push([i, 0, 0, 0]);
+        }
+
+        for (let i = 0; i < lines.length; i++) {
+          mappings.push([i + injectedLines.length, 0, i, 0]);
+        }
+
+        return {
+          code: injectedCode,
+          map: {
+            version: 3,
+            file: id,
+            sources: [id],
+            sourcesContent: [code],
+            names: [],
+            mappings: mappings.map((mapping) => mapping.join(",")).join(";"),
+          },
+        };
+      }
+    },
+  };
+}
+
 export default [
   {
     input: `src/index.ts`,
     plugins: [
+      injectCodePlugin('import "node-self"'),
       esbuild(),
 
       // Polyfill Node.js builtins