Skip to content

Produce browser bundle with tsdown - #52

Open
nroponmain wants to merge 1 commit into
Zendrex:mainfrom
nroponmain:browser
Open

Produce browser bundle with tsdown#52
nroponmain wants to merge 1 commit into
Zendrex:mainfrom
nroponmain:browser

Conversation

@nroponmain

@nroponmain nroponmain commented Aug 15, 2026

Copy link
Copy Markdown

This change adds output that bundles external dependencies so the output can run directly in the browser.
Tsdown doesn't allow turning off code splitting so there is an output file for src/index.ts and src/patterns/index.ts.

Iife produces dist/browser/index.iife.js and dist/browser/patterns/index.iife.js.

Usage example:

<script src="./dist/browser/index.iife.js"></script>
<script src="./dist/browser/patterns/index.iife.js"></script>
<script>
     (async () => {
         const client = new Buttplug.ButtplugClient("ws://127.0.0.1:12345", {
              logger: Buttplug.consoleLogger,
         });
         const engine = new ButtplugPatterns.PatternEngine(client);
         await client.connect();
     )();
</script>

Esm bundle gets placed into dist/browser/index.mjs and dist/browser/feature-*.mjs.

Usage example:

<script type="module">
    import { ButtplugClient, consoleLogger } from "./dist/browser/index.mjs";
    import { PatternEngine } from "./dist/browser/patterns/index.mjs";

    const client = new ButtplugClient("ws://127.0.0.1:12345", {
        logger: consoleLogger,
    });
    const engine = new ButtplugPatterns.PatternEngine(client);
    await client.connect();
</script>

This change adds output that bundles external dependencies so the output can run directly in the browser.
Tsdown doesn't allow turning off code splitting so there is an output file for `src/index.ts` and `src/patterns/index.ts`.

Iife produces `dist/browser/index.iife.js` and `dist/browser/patterns/index.iife.js`.

Usage example:

``` javascript
<script src="./dist/browser/index.iife.js"></script>
<script src="./dist/browser/patterns/index.iife.js"></script>
<script>
     (async () => {
         const client = new Buttplug.ButtplugClient("ws://127.0.0.1:12345", {
              logger: Buttplug.consoleLogger,
         });
         const engine = new ButtplugPatterns.PatternEngine(client);
         await client.connect();
     )();
</script>
```

Esm bundle gets placed into `dist/browser/index.mjs` and `dist/browser/feature-*.mjs`.

Usage example:

``` javascript
<script type="module">
    import { ButtplugClient, consoleLogger } from "./dist/browser/index.mjs";
    import { PatternEngine } from "./dist/browser/patterns/index.mjs";

    const client = new ButtplugClient("ws://127.0.0.1:12345", {
        logger: consoleLogger,
    });
    const engine = new ButtplugPatterns.PatternEngine(client);
    await client.connect();
</script>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant