Typescript bundler for dynamic items

Floating Menus / Widgets
,
1

Hi there,

as I was looking to build a floating menu with dynamic items to show a "numpad" I use as a macro pad, I build a little toolkit to help building complex javascript code to retrieve floating menu items dynamically.

you can find the template on GitHub at BetterTouchTool-numpad-viewer
You'll find on GitHub a more detailed README :slight_smile:

The main concepts are

  • you can code in typescript
  • The javascript file is bundled in the "output" folder using esbuild bundler
  • the build process integrates "conditional build". That is say that you can do #IF in your code to activate/deactivate some code. For exemple, I use it for "debug in safari" (or whatever else in config) to debug script in safari (or any other web browser). In this case I "deactivate" BTT function calls as they are not available. You can find exemple in file BTTFunctionBridge.ts
  • you set your main javascript function (the one you'll call from bettertouchtool) in the ./BttFunctions folder
  • The build process can run in two modes : Single build or watch mode. In watch mode, any source file modified will trigger a rebuild.
  • The build process integrates variable replacement (configurable in config.js in ./build folder). For exemple you can use a string in the code like __PATH__ and configure the build to replace this variable by a string, for exemple "/www/bettertouchtool.com"

You can use it in VSCode, build your source (cmd+shift+b or run task with cmd+shift+P then select run task -> build:floatingmenu or watch:floatingmenu)
It will bundle your source code into one file in output folder, then you can reference it in bettertouchtool as an external source code.

All the bundle is put in a global variable (configurable in ./build/configs/configs.js), and the function you put in ./BttFunctions javascript files folder will be callable from bettertouchtool.

Here is a very quick and dirty exemple of the process

global diagram
global diagram1781×607 101 KB

I also included a BTT preset as an exemple of what it does. For now it produces this

Capture d’écran 2025-07-04 à 17.33.13
Capture d’écran 2025-07-04 à 17.33.13762×626 49.8 KB

Feel free to fork it and use it as you want, and don't hesitate to ask me if you have questions.

2

Excellent. I'll try to find some time to try this out. Thanks for sharing!

3

[EDIT] The GitHub repository is up to date now

thank you, tell me if you meet any problem or understanding (few doc).
By the way, I have to publish a fix for npm module esbuild-conditional-build. I forked it and fix some bugs. So for now, in my repo this module doesn't work

1 Like