improve bundler integration (#1321)

* improve bundler integration

* update docs

* fix docs startup

Author: hipstersmoothie

packages/docs/astro.config.mjs

@@ -34,19 +34,19 @@ export default defineConfig({
             "../../packages/jimp/src/index.ts",
             "../../packages/jimp/src/fonts.ts",
           ],
-          tsconfig: "../../packages/jimp/tsconfig.json",
+          tsconfig: "../../packages/jimp/tsconfig.docs.json",
           typeDoc: {
             groupOrder: ["Classes", "Functions", "Enumerations", "Variables"],
             sort: ["static-first", "alphabetical"],
             plugin: [
               path.join(
                 path.dirname(import.meta.url).replace("file:", ""),
-                "./src/typedoc-plugin.js",
+                "./src/typedoc-plugin.js"
               ),
               "typedoc-plugin-zod",
               path.join(
                 path.dirname(import.meta.url).replace("file:", ""),
-                "./src/typedoc-zod-extended.js",
+                "./src/typedoc-zod-extended.js"
               ),
             ],
           },

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-// This version is bundled into a single file that can be used in the browser.
-import { Jimp } from "jimp/browser";
+import { Jimp } from "jimp";
 
 export function GrayscaleExample() {
   const [selectedFile, setSelectedFile] = useState("");

packages/docs/src/content/docs/guides/browser.mdx

@@ -10,9 +10,8 @@ import { Code } from "@astrojs/starlight/components";
 Jimp can be used anywhere that javascript is supported. It can be used in the browser, in Node.js, or in a web worker.
 
 Jimp comes with a pre-bundled browser version.
-To use it simply import `jimp/browser` instead.
+To use it simply import `jimp` instead.
 
-> Note: Your bundler might do this automatically for you!
 
 <br />
 <GrayscaleExample client:load />

packages/jimp/package.json

@@ -95,19 +95,22 @@
     "exclude": [
       "**/*.test.ts"
     ],
+    "esmDialects": [
+      "browser"
+    ],
     "exports": {
       "./package.json": "./package.json",
       ".": "./src/index.ts",
-      "./fonts": "./src/fonts.ts",
-      "./browser": {
-        "types": "./dist/esm/index.d.ts",
-        "import": "./browser.js"
-      }
+      "./fonts": "./src/fonts.ts"
     }
   },
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "browser": {
+        "types": "./dist/browser/index.d.ts",
+        "default": "./dist/browser/index.js"
+      },
       "import": {
         "types": "./dist/esm/index.d.ts",
         "default": "./dist/esm/index.js"
@@ -118,6 +121,10 @@
       }
     },
     "./fonts": {
+      "browser": {
+        "types": "./dist/browser/fonts.d.ts",
+        "default": "./dist/browser/fonts.js"
+      },
       "import": {
         "types": "./dist/esm/fonts.d.ts",
         "default": "./dist/esm/fonts.js"
@@ -126,10 +133,6 @@
         "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

@@ -5,6 +5,25 @@ import alias from "@rollup/plugin-alias";
 import nodePolyfills from "rollup-plugin-polyfill-node";
 import inject from "@rollup/plugin-inject";
 import terser from "@rollup/plugin-terser";
+import { dts } from "rollup-plugin-dts";
+
+import { promises as fs } from "fs";
+
+async function maybeUnlink(path) {
+  try {
+    await fs.unlink(path);
+  } catch (error) {
+    if (error.code !== "ENOENT") {
+      throw error;
+    }
+  }
+}
+
+// Remove tshy's output
+await maybeUnlink("dist/browser/index-browser.d.mts.map");
+await maybeUnlink("dist/browser/index-browser.mjs.map");
+await maybeUnlink("dist/browser/index.d.ts");
+await maybeUnlink("dist/browser/index.js");
 
 function injectCodePlugin(code) {
   return {
@@ -62,11 +81,16 @@ export default [
     ],
     output: [
       {
-        file: `browser.js`,
+        file: "dist/browser/index.js",
         format: "es",
         sourcemap: true,
         inlineDynamicImports: true,
       },
     ],
   },
+  {
+    input: `src/index.ts`,
+    output: [{ file: "dist/browser/index.d.ts", format: "es" }],
+    plugins: [dts()],
+  },
 ];

packages/jimp/src/index-browser.mts

@@ -0,0 +1 @@
+// A stub. The real build is done by rollup.

packages/jimp/tsconfig.docs.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/*.test.*"]
+}