feat: browser bundles

.changeset/twelve-apples-cry.md

@@ -0,0 +1,7 @@
+---
+"@eventkit/async-observable": patch
+"@eventkit/http": patch
+"@eventkit/base": patch
+---
+
+Gave some TLC to the bundling process for each package. Each package bundle now contains sourcemaps for both cjs & esm builds, as well as a new `index.global.js` and `index.global.min.js` that is intended to be used with browser targets.

docs/guide/getting-started.md

@@ -24,6 +24,24 @@ bun add @eventkit/base
 
 :::
 
+### Using a CDN
+
+Eventkit also bundles a browser-friendly version of each package that can be accessed using a CDN like [unpkg](https://unpkg.com/).
+
+```html
+<!-- Development -->
+<script src="https://unpkg.com/@eventkit/base/dist/index.global.js"></script>
+<!-- Minified -->
+<script src="https://unpkg.com/@eventkit/base/dist/index.global.min.js"></script>
+```
+
+When imported this way, all exports are available on the `eventkit` global variable.
+
+```js
+const { map, filter, Stream } = eventkit;
+const stream = new Stream();
+```
+
 ## A Simple Example
 
 Let's create a simple example to demonstrate how eventkit works. We'll create a stream of events and filter them based on a condition.

package.json

@@ -34,6 +34,7 @@
     "globals": "^16.0.0",
     "msw": "^2.7.3",
     "prettier": "^3.5.1",
+    "tsup": "^8.3.6",
     "typedoc": "^0.28.1",
     "typedoc-plugin-frontmatter": "^1.3.0",
     "typedoc-plugin-markdown": "^4.6.0",

packages/async-observable/README.md

@@ -6,6 +6,23 @@
 npm i @eventkit/async-observable
 ```
 
+### Using a CDN
+
+This package also bundles a browser-friendly version that can be accessed using a CDN like [unpkg](https://unpkg.com/).
+
+```html
+<!-- Development -->
+<script src="https://unpkg.com/@eventkit/async-observable/dist/index.global.js"></script>
+<!-- Minified -->
+<script src="https://unpkg.com/@eventkit/async-observable/dist/index.global.min.js"></script>
+```
+
+When imported this way, all exports are available on the `eventkit.asyncObservable` global variable.
+
+```js
+const { AsyncObservable } = eventkit.asyncObservable;
+```
+
 ## Related Resources
 
 - [Observable Pattern](https://hntrl.github.io/eventkit/guide/concepts/observable-pattern)

packages/async-observable/tsup.config.ts

@@ -1,18 +1,24 @@
 import { defineConfig } from "tsup";
 
-// @ts-expect-error - build tools are out of scope
-import { createBanner } from "../../scripts/banner";
+import { getBuildConfig } from "../../scripts/build";
 import pkg from "./package.json";
 
 export default defineConfig([
-  {
-    clean: true,
-    entry: ["lib/index.ts"],
-    format: ["cjs", "esm"],
-    outDir: "dist",
-    dts: true,
-    banner: {
-      js: createBanner(pkg.name, pkg.version),
+  ...getBuildConfig({
+    packageName: pkg.name,
+    packageVersion: pkg.version,
+    target: "neutral",
+    options: {
+      entry: ["lib/index.ts"],
     },
-  },
+  }),
+  ...getBuildConfig({
+    packageName: pkg.name,
+    packageVersion: pkg.version,
+    target: "browser",
+    options: {
+      entry: ["lib/index.ts"],
+      globalName: "eventkit.asyncObservable",
+    },
+  }),
 ]);

packages/eventkit-http/README.md

@@ -6,6 +6,23 @@
 npm i @eventkit/http
 ```
 
+### Using a CDN
+
+This package also bundles a browser-friendly version that can be accessed using a CDN like [unpkg](https://unpkg.com/).
+
+```html
+<!-- Development -->
+<script src="https://unpkg.com/@eventkit/http/dist/index.global.js"></script>
+<!-- Minified -->
+<script src="https://unpkg.com/@eventkit/http/dist/index.global.min.js"></script>
+```
+
+When imported this way, all exports are available on the `eventkit.http` global variable.
+
+```js
+const { EventSource } = eventkit.http;
+```
+
 ## Related Resources
 
 - [HTTP Streaming](https://hntrl.github.io/eventkit/guide/examples/http-streaming)

packages/eventkit-http/tsup.config.ts

@@ -1,18 +1,24 @@
 import { defineConfig } from "tsup";
 
-// @ts-expect-error - build tools are out of scope
-import { createBanner } from "../../scripts/banner";
+import { getBuildConfig } from "../../scripts/build";
 import pkg from "./package.json";
 
 export default defineConfig([
-  {
-    clean: true,
-    entry: ["lib/index.ts"],
-    format: ["cjs", "esm"],
-    outDir: "dist",
-    dts: true,
-    banner: {
-      js: createBanner(pkg.name, pkg.version),
+  ...getBuildConfig({
+    packageName: pkg.name,
+    packageVersion: pkg.version,
+    target: "neutral",
+    options: {
+      entry: ["lib/index.ts"],
     },
-  },
+  }),
+  ...getBuildConfig({
+    packageName: pkg.name,
+    packageVersion: pkg.version,
+    target: "browser",
+    options: {
+      entry: ["lib/index.ts"],
+      globalName: "eventkit.http",
+    },
+  }),
 ]);

packages/eventkit/README.md

@@ -6,6 +6,23 @@
 npm i @eventkit/base
 ```
 
+### Using a CDN
+
+This package also bundles a browser-friendly version that can be accessed using a CDN like [unpkg](https://unpkg.com/).
+
+```html
+<!-- Development -->
+<script src="https://unpkg.com/@eventkit/base/dist/index.global.js"></script>
+<!-- Minified -->
+<script src="https://unpkg.com/@eventkit/base/dist/index.global.min.js"></script>
+```
+
+When imported this way, all exports are available on the `eventkit` global variable.
+
+```js
+const { Stream, filter } = eventkit;
+```
+
 ## Basic Example
 
 This is a basic example of how to use an eventkit stream. To get started, you should check out the [Getting Started](https://hntrl.github.io/eventkit/guide/getting-started) guide.

packages/eventkit/tsup.config.ts

@@ -1,20 +1,26 @@
 import { defineConfig } from "tsup";
 
-// @ts-expect-error - build tools are out of scope
-import { createBanner } from "../../scripts/banner";
+import { getBuildConfig } from "../../scripts/build";
 import pkg from "./package.json";
 
-const banner = createBanner(pkg.name, pkg.version);
-
 export default defineConfig([
-  {
-    clean: true,
-    entry: ["lib/index.ts"],
-    format: ["cjs", "esm"],
-    outDir: "dist",
-    dts: { resolve: true, banner },
-    noExternal: [/(.*)/],
-    splitting: false,
-    banner: { js: banner },
-  },
+  ...getBuildConfig({
+    packageName: pkg.name,
+    packageVersion: pkg.version,
+    target: "neutral",
+    options: {
+      entry: ["lib/index.ts"],
+      noExternal: ["@eventkit/async-observable"],
+    },
+  }),
+  ...getBuildConfig({
+    packageName: pkg.name,
+    packageVersion: pkg.version,
+    target: "browser",
+    options: {
+      entry: ["lib/index.ts"],
+      globalName: "eventkit",
+      noExternal: ["@eventkit/async-observable"],
+    },
+  }),
 ]);

scripts/build.d.ts

@@ -0,0 +1,12 @@
+import { type Options } from "tsup";
+
+declare function createBanner(packageName: string, version: string): string;
+
+type BuildConfigParams = {
+  packageName: string;
+  packageVersion: string;
+  target: "browser" | "neutral";
+  options: Options;
+};
+
+declare function getBuildConfig(params: BuildConfigParams): Options[];

scripts/build.js

@@ -0,0 +1,57 @@
+function createBanner(packageName, version) {
+  return `/**
+ * ${packageName} v${version}
+ *
+ * Copyright (c) Hunter Lovell <hunter@hntrl.io>
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */`;
+}
+
+export function getBuildConfig({ packageName, packageVersion, target, options }) {
+  const banner = createBanner(packageName, packageVersion);
+  if (target === "neutral") {
+    return [
+      {
+        format: ["cjs", "esm"],
+        outDir: "dist",
+        dts: { resolve: true, banner },
+        sourcemap: true,
+        platform: "neutral",
+        banner: { js: banner },
+        ...options,
+      },
+    ];
+  }
+  if (target === "browser") {
+    const commonOptions = {
+      format: ["iife"],
+      outDir: "dist",
+      sourcemap: true,
+      dts: false,
+      platform: "browser",
+      banner: { js: banner },
+    };
+    return [
+      {
+        ...commonOptions,
+        minify: false,
+        ...options,
+      },
+      {
+        ...commonOptions,
+        minify: true,
+        outExtension() {
+          return {
+            js: `.global.min.js`,
+          };
+        },
+        ...options,
+      },
+    ];
+  }
+  return [];
+}