get bundle working

packages/docs/astro.config.mjs

@@ -6,24 +6,6 @@ import path from "path";
 import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
 
 export default defineConfig({
-  vite: {
-    optimizeDeps: {
-      // Only needed for this repo
-      include: [
-        "@jimp/core",
-        "@jimp/plugin-print",
-        "@jimp/plugin-print/load-font",
-      ],
-      // Needed for anyone using the browser
-      // Mainly just for Buffer
-      esbuildOptions: {
-        define: {
-          global: "globalThis",
-        },
-        plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
-      },
-    },
-  },
   integrations: [
     react(),
     starlight({

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Jimp } from "jimp";
+import { Jimp } from "jimp/browser";
 
 export function GrayscaleExample() {
   const [selectedFile, setSelectedFile] = useState("");

packages/jimp/.gitignore

@@ -0,0 +1,2 @@
+browser.js
+browser.js.map

packages/jimp/package.json

@@ -1,6 +1,7 @@
 {
   "name": "jimp",
   "version": "1.0.0",
+  "sideEffects": false,
   "description": "An image processing library written entirely in JavaScript.",
   "files": [
     "browser",
@@ -16,6 +17,7 @@
     "test": "vitest",
     "test:browser": "vitest --config vitest.config.browser.ts",
     "build": "tshy",
+    "build:browser": "rollup -c",
     "dev": "tshy --watch",
     "clean": "rm -rf node_modules .tshy .tshy-build dist"
   },
@@ -34,7 +36,13 @@
   "author": "Andrew Lisowski <lisowski54@gmail.com>",
   "license": "MIT",
   "dependencies": {
+    "@jimp/core": "workspace:*",
     "@jimp/diff": "workspace:*",
+    "@jimp/js-bmp": "workspace:*",
+    "@jimp/js-gif": "workspace:*",
+    "@jimp/js-jpeg": "workspace:*",
+    "@jimp/js-png": "workspace:*",
+    "@jimp/js-tiff": "workspace:*",
     "@jimp/plugin-blit": "workspace:*",
     "@jimp/plugin-blur": "workspace:*",
     "@jimp/plugin-circle": "workspace:*",
@@ -52,26 +60,30 @@
     "@jimp/plugin-resize": "workspace:*",
     "@jimp/plugin-rotate": "workspace:*",
     "@jimp/plugin-threshold": "workspace:*",
-    "@jimp/js-bmp": "workspace:*",
-    "@jimp/js-gif": "workspace:*",
-    "@jimp/js-jpeg": "workspace:*",
-    "@jimp/js-png": "workspace:*",
-    "@jimp/js-tiff": "workspace:*",
-    "@jimp/core": "workspace:*",
     "@jimp/types": "workspace:*",
-    "@jimp/utils": "workspace:*"
+    "@jimp/utils": "workspace:*",
+    "@rspack/cli": "^0.5.9"
   },
   "devDependencies": {
     "@jimp/config-eslint": "workspace:*",
     "@jimp/config-typescript": "workspace:*",
     "@jimp/config-vitest": "workspace:*",
     "@jimp/test-utils": "workspace:*",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-inject": "^5.0.5",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@vitest/browser": "^1.4.0",
     "eslint": "^8.57.0",
+    "path-browserify": "^1.0.1",
+    "rollup": "^4.14.1",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "tshy": "^1.12.0",
     "typescript": "^5.4.2",
-    "@vitest/browser": "^1.4.0",
-    "vitest": "^1.4.0",
-    "vite-plugin-node-polyfills": "^0.21.0"
+    "vite-plugin-node-polyfills": "^0.21.0",
+    "vitest": "^1.4.0"
   },
   "tshy": {
     "exclude": [
@@ -80,7 +92,11 @@
     "exports": {
       "./package.json": "./package.json",
       ".": "./src/index.ts",
-      "./fonts": "./src/fonts.ts"
+      "./fonts": "./src/fonts.ts",
+      "./browser": {
+        "types": "./dist/esm/index.d.ts",
+        "import": "./browser.js"
+      }
     }
   },
   "exports": {
@@ -104,6 +120,10 @@
         "types": "./dist/commonjs/fonts.d.ts",
         "default": "./dist/commonjs/fonts.js"
       }
+    },
+    "./browser": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./browser.js"
     }
   },
   "main": "./dist/commonjs/index.js",

packages/jimp/rollup.config.js

@@ -0,0 +1,32 @@
+import esbuild from "rollup-plugin-esbuild";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import alias from "@rollup/plugin-alias";
+import nodePolyfills from "rollup-plugin-polyfill-node";
+import inject from "@rollup/plugin-inject";
+
+export default [
+  {
+    input: `src/index.ts`,
+    plugins: [
+      esbuild(),
+      alias({
+        // Use the browser version of pngjs
+        entries: [{ find: "pngjs", replacement: "pngjs/browser" }],
+      }),
+      // Polyfill Node.js builtins
+      nodeResolve({ preferBuiltins: false, browser: true }),
+      // Polyfill Node.js globals
+      inject({ Buffer: ["buffer", "Buffer"] }),
+      commonjs(),
+      nodePolyfills(),
+    ],
+    output: [
+      {
+        file: `browser.js`,
+        format: "es",
+        sourcemap: true,
+      },
+    ],
+  },
+];

packages/jimp/scripts/generate-dts-bundle.js

@@ -0,0 +1,9 @@
+import { createBundle } from "dts-buddy";
+
+await createBundle({
+  project: "tsconfig.json",
+  output: "browser.d.ts",
+  modules: {
+    jimp: "dist/esm/index.ts",
+  },
+});

plugins/plugin-print/package.json

@@ -2,6 +2,7 @@
   "name": "@jimp/plugin-print",
   "version": "1.0.0",
   "repository": "jimp-dev/jimp",
+  "sideEffects": false,
   "scripts": {
     "lint": "eslint .",
     "test": "vitest",

plugins/plugin-resize/src/index.ts

@@ -3,10 +3,26 @@ import { ResizeStrategy } from "./constants.js";
 import { z } from "zod";
 
 import Resize from "./modules/resize.js";
-import Resize2 from "./modules/resize2.js";
+import { operations as Resize2 } from "./modules/resize2.js";
 
 export * from "./constants.js";
 
+interface ResizeClass {
+  // eslint-disable-next-line @typescript-eslint/no-misused-new
+  new (
+    widthOriginal: number,
+    heightOriginal: number,
+    targetWidth: number,
+    targetHeight: number,
+    blendAlpha: boolean,
+    interpolationPass: boolean,
+    resizeCallback: (buffer: Buffer) => void
+  ): ResizeClass;
+  resize(buffer: Buffer): void;
+}
+
+type Constructable<T> = new (...args: any[]) => T;
+
 const ResizeOptionsSchema = z.union([
   z.object({
     /** the width to resize the image to */
@@ -92,14 +108,14 @@ export const methods = {
       Resize2[mode](image.bitmap, dst);
       image.bitmap = dst;
     } else {
-      const resize = new Resize(
+      const resize = new (Resize as unknown as Constructable<ResizeClass>)(
         image.bitmap.width,
         image.bitmap.height,
         w,
         h,
         true,
         true,
-        (buffer) => {
+        (buffer: Buffer) => {
           image.bitmap.data = Buffer.from(buffer);
           image.bitmap.width = w;
           image.bitmap.height = h;

plugins/plugin-resize/src/modules/resize.js → plugins/plugin-resize/src/modules/resize.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 // JavaScript Image Resizer (c) 2012 - Grant Galitz
 // Released to public domain 29 July 2013: https://github.com/grantgalitz/JS-Image-Resizer/issues/4