Breaking changes in v4

[cocopon]

WIP
https://github.com/cocopon/tweakpane/tree/v4

• Publish beta package
• CSS injection for plugin bundle
• Organize exports (Node.js v20.1.0 documentation)
• Support import as ES module type #209
• Update documents
  • Preset
  • Migration from v3 to v4
  • API reference
  • Update plugins: essentials and camerakit
• Re-check TODO: list
• Some minor refactoring
  • Replace TpEvent.key with TpEvent.target.key
  • Fix broken layout of the folder when the title is empty
• exportPreset doesn't capture pane #431, Add support for state to value controllers #509
• Unify addInput() and addMonitor() #486
• Use new Sass features #381
• Rename option #480
• Refactor color type #450
• More specific API for input bindings #455
• Pass arguments from accept() to next steps #466
• instanceof in BladePlugin.api doesn't work across packages #481
• Add core version to plugins for compatibility #485
• [Feature Request] Move refresh() from RootApi to FolderApi ? #510
• Delete @deprecated functions

[cocopon]

Changelog (WIP)

For users

Breaking changes

• Migrated to ES modules (Support import as ES module type #209)
  • Use <script type="module"> to use the package
• Unified methods to add bindings (Unify addInput() and addMonitor() #486)
  • Use addBinding() to add input bindings (former addInput())
  • Use addBinding() with {readonly: true} to add monitor bindings (former　addMonitor())
• Changed a event name for monitor bindings
  • Use change event for handling monitor updates instead of update
• Replaced a preset with a blade state
  • Use importState() and exportState() instead of importPreset() and exportPreset()
• Changed an option name for changing visual height of monitors
  • lineCount -> rows
• Changed a way to get a binding key in event handlers
  • Use TpChangeEvent.target.key instead of TpChangeEvent.key
• Renamed classes
  • ListApi -> ListBindingApi
  • SliderApi -> SliderBladeApi
  • TextApi -> TextBladeApi
• Renamed fields
  • SliderApi.maxValue -> SliderBladeApi.max
  • SliderApi.minValue -> SliderBladeApi.min

New features

• Improved blades specificity. (More specific API for input bindings #455)
  • Now you can access min and max of the slider, options of the list, etc. without any workarounds.
• Importing/exporting all blades individually. (Add support for state to value controllers #509)
• All container blades have refresh() and can be refreshed individually. ([Feature Request] Move refresh() from RootApi to FolderApi ? #510)
• Added a shared config to point dimension params. (Common step, min, max parameters for Point input #417)
• Added support for a custom formatter to point-nD inputs. ([Feature request] Add format to PointDimensionParams #511)
• Added support for a custom key / pointer scale to number text inputs. (where a plugin can contrôle mouse speed/frequency ? #471)

For plugin developers

Diff of Essentials plugin (TODO) can be useful to know how to migrate your plugin to v4.

Breaking changes

• Added core field to all types of plugins for checking compatibility. Use createPlugin() to add the core version.
• Added id field to plugin bundle.
• Moved css field from plugin to plugin bundle.
• Changed a core style file for plugins
  • @import '../../node_modules/@tweakpane/core/lib/sass/plugin'; -> @use '../../node_modules/@tweakpane/core/lib/sass/tp';
• Added a namespace and a prefix tp to mixins, functions, and variables
  • .#{$prefix}-some -> .#{tp.$prefix}-some
    • @extend %input -> @extend %tp-input

New features

• Added a way to provide a custom API for binding controllers (More specific API for input bindings #455)
  • InputBindingPlugin.api()
  • MonitorBindingPlugin.api()
• Added more stable way to access internal CSS variables
  • var(--in-bg) -> tp.cssVar('input-bg')
  • Refer _defs.scss to see the list of variables
• Added more stable way to access CSS modifiers
  • &.#{$prefix}-v-disabled -> &#{tp.$disabled}

[cocopon]

Migration guide: for plugin developers

• Migrate your package to ES modules
  • Upgrade rollup.config.js
  • Add .js postfix to all import statements
• Add id to TpPluginBundle
• Change TpPlugin.css to TpPluginBundle.css
• Update rollup.config.js
  • Change entries[0].replacement for @rollup/plugin-alias to ./node_modules/@tweakpane/core/dist/index.js
• LabeledValueController -> LabeledValueBladeController
• parseParams -> parseRecord
• ParamsParser -> MicroParser
• LabelController drops blade field
  • Implement an own blade controller if your plugin directly uses LabelController

[cocopon]

Just released 4.0.0-alpha.0. Checking plugins' compatibility...

[kitschpatrol]

I know this is closed, but in case it's helpful to anyone else I've ported a bunch of community plugins to Tweakpane 4.

I have PRs open on all of the original repos, but if anyone needs a Tweakpane 4 compatible plugin right away, the forks are on NPM:

@kitschpatrol/tweakpane-image-plugin
@kitschpatrol/tweakpane-plugin-profiler PR merged 👍
@kitschpatrol/tweakpane-plugin-rotation PR merged 👍
@kitschpatrol/tweakpane-plugin-thumbnail-list
@kitschpatrol/tweakpane-plugin-waveform PR merged 👍
@kitschpatrol/tweakpane-textarea-plugin