diff --git a/.changeset/twelve-apples-cry.md b/.changeset/twelve-apples-cry.md new file mode 100644 index 0000000..e162240 --- /dev/null +++ b/.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. diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 0b2424a..81481cf 100644 --- a/docs/guide/getting-started.md +++ b/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 + + + + +``` + +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. diff --git a/package.json b/package.json index 4c32ef4..6298add 100644 --- a/package.json +++ b/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", diff --git a/packages/async-observable/README.md b/packages/async-observable/README.md index 2f667fd..7961836 100644 --- a/packages/async-observable/README.md +++ b/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 + + + + +``` + +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) diff --git a/packages/async-observable/tsup.config.ts b/packages/async-observable/tsup.config.ts index 952ed77..87f207a 100644 --- a/packages/async-observable/tsup.config.ts +++ b/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", + }, + }), ]); diff --git a/packages/eventkit-http/README.md b/packages/eventkit-http/README.md index 1185587..3bb258b 100644 --- a/packages/eventkit-http/README.md +++ b/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 + + + + +``` + +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) diff --git a/packages/eventkit-http/tsup.config.ts b/packages/eventkit-http/tsup.config.ts index 952ed77..5952496 100644 --- a/packages/eventkit-http/tsup.config.ts +++ b/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", + }, + }), ]); diff --git a/packages/eventkit/README.md b/packages/eventkit/README.md index 4137fe8..742d8e7 100644 --- a/packages/eventkit/README.md +++ b/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 + + + + +``` + +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. diff --git a/packages/eventkit/tsup.config.ts b/packages/eventkit/tsup.config.ts index 2805545..6f2f8fa 100644 --- a/packages/eventkit/tsup.config.ts +++ b/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"], + }, + }), ]); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d26203..d26e7e7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: prettier: specifier: ^3.5.1 version: 3.5.1 + tsup: + specifier: ^8.3.6 + version: 8.3.6(@microsoft/api-extractor@7.52.4(@types/node@22.13.14))(postcss@8.5.3)(tsx@4.19.3)(typescript@5.7.3)(yaml@2.7.1) typedoc: specifier: ^0.28.1 version: 0.28.1(typescript@5.7.3) diff --git a/scripts/banner.js b/scripts/banner.js deleted file mode 100644 index 797321b..0000000 --- a/scripts/banner.js +++ /dev/null @@ -1,16 +0,0 @@ -function createBanner(packageName, version) { - return `/** - * ${packageName} v${version} - * - * Copyright (c) Hunter Lovell - * - * 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 - */`; -} - -module.exports = { - createBanner, -}; diff --git a/scripts/build.d.ts b/scripts/build.d.ts new file mode 100644 index 0000000..2b8b8b3 --- /dev/null +++ b/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[]; diff --git a/scripts/build.js b/scripts/build.js new file mode 100644 index 0000000..1909cd2 --- /dev/null +++ b/scripts/build.js @@ -0,0 +1,57 @@ +function createBanner(packageName, version) { + return `/** + * ${packageName} v${version} + * + * Copyright (c) Hunter Lovell + * + * 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 []; +}