Upgrade Tweakpane to v4-beta.2

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+	"arrowParens": "always",
+	"bracketSpacing": false,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"useTabs": true
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "description": "Plugin template for Tweakpane",
   "main": "dist/tweakpane-plugin-template.js",
+  "type": "module",
   "types": "dist/types/index.d.ts",
   "author": "cocopon",
   "license": "MIT",
@@ -12,11 +13,11 @@
   "scripts": {
     "prepare": "run-s clean build",
     "prepublishOnly": "npm test",
-    "start": "npm run watch",
+    "start": "run-p watch server",
     "test": "eslint --ext .ts \"src/**/*.ts\"",
     "assets": "run-s clean build assets:version assets:zip",
     "assets:version": "node scripts/assets-append-version.js",
-    "assets:zip": "zip -x \"*types*\" -j -r $(cat package.json | npx json name)-$(cat package.json | npx json version).zip dist",
+    "assets:zip": "zip -x '*types*' -j -r $(node scripts/dist-name.js)-$(cat package.json | npx json version).zip dist",
     "clean": "rimraf dist *.tgz *.zip",
     "build": "run-p build:*",
     "build:dev": "rollup --config rollup.config.js",
@@ -25,6 +26,7 @@
     "format": "run-p format:*",
     "format:scss": "prettier --parser scss --write \"src/sass/**/*.scss\"",
     "format:ts": "eslint --ext .ts --fix \"src/**/*.ts\"",
+    "server": "http-server -c-1 -o /test/browser.html",
     "watch": "run-p watch:*",
     "watch:sass": "onchange --initial --kill \"src/sass/**/*.scss\" -- npm run build:dev",
     "watch:ts": "onchange --initial --kill \"src/**/*.ts\" -- rollup --config rollup.config.js"
@@ -34,14 +36,15 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "@tweakpane/core": "^1.1.4",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@tweakpane/core": "^2.0.0-beta.2",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "autoprefixer": "^10.2.4",
-    "eslint": "^7.20.0",
+    "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-simple-import-sort": "^7.0.0",
+    "http-server": "^14.1.1",
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
     "postcss": "^8.2.6",
@@ -51,9 +54,9 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.49.9",
-    "typescript": "^4.1.5"
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "tweakpane": "^3.1.4"
+    "tweakpane": "^4.0.0-beta.2"
   }
 }

rollup.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 import Alias from '@rollup/plugin-alias';
 import {nodeResolve} from '@rollup/plugin-node-resolve';
 import Replace from '@rollup/plugin-replace';
@@ -24,12 +26,11 @@ async function compileCss() {
 
 function getPlugins(css, shouldMinify) {
 	const plugins = [
-		// Use ES6 source files to avoid CommonJS transpiling
 		Alias({
 			entries: [
 				{
 					find: '@tweakpane/core',
-					replacement: './node_modules/@tweakpane/core/dist/es6/index.js',
+					replacement: './node_modules/@tweakpane/core/dist/index.js',
 				},
 			],
 		}),
@@ -63,19 +64,6 @@ function getDistName(packageName) {
 		.join('-');
 }
 
-function getUmdName(packageName) {
-	// `@tweakpane/plugin-foobar` -> `TweakpaneFoobarPlugin`
-	// `tweakpane-plugin-foobar`  -> `TweakpaneFoobarPlugin`
-	return (
-		packageName
-			.split(/[@/-]/)
-			.map((comp) =>
-				comp !== 'plugin' ? comp.charAt(0).toUpperCase() + comp.slice(1) : '',
-			)
-			.join('') + 'Plugin'
-	);
-}
-
 export default async () => {
 	const production = process.env.BUILD === 'production';
 	const postfix = production ? '.min' : '';
@@ -87,11 +75,10 @@ export default async () => {
 		external: ['tweakpane'],
 		output: {
 			file: `dist/${distName}${postfix}.js`,
-			format: 'umd',
+			format: 'esm',
 			globals: {
 				tweakpane: 'Tweakpane',
 			},
-			name: getUmdName(Package.name),
 		},
 		plugins: getPlugins(css, production),
 

scripts/assets-append-version.js

@@ -1,9 +1,13 @@
-'use strict';
+/* eslint-disable no-console */
+/* eslint-env node */
 
-const Fs = require('fs');
-const Glob = require('glob');
-const Path = require('path');
-const Package = require('../package');
+import Fs from 'fs';
+import Glob from 'glob';
+import Path from 'path';
+
+const Package = JSON.parse(
+	Fs.readFileSync(new URL('../package.json', import.meta.url)),
+);
 
 const PATTERN = 'dist/*';
 

scripts/dist-name.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-console */
+/* eslint-env node */
+
+import Fs from 'fs';
+
+const Package = JSON.parse(
+	Fs.readFileSync(new URL('../package.json', import.meta.url)),
+);
+
+// `@tweakpane/plugin-foobar` -> `tweakpane-plugin-foobar`
+// `tweakpane-plugin-foobar`  -> `tweakpane-plugin-foobar`
+const name = Package.name
+	.split(/[@/-]/)
+	.reduce((comps, comp) => (comp !== '' ? [...comps, comp] : comps), [])
+	.join('-');
+console.log(name);

src/controller.ts

@@ -7,7 +7,7 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {PluginView} from './view';
+import {PluginView} from './view.js';
 
 interface Config {
 	value: Value<number>;

src/index.ts

@@ -1,4 +1,11 @@
-import {TemplateInputPlugin} from './plugin';
+import {TemplateInputPlugin} from './plugin.js';
 
-// Export your plugin(s) as constant `plugins`
+// The identifier of the plugin bundle.
+export const id = 'template';
+
+// This plugin template injects a compiled CSS by @rollup/plugin-replace
+// See rollup.config.js for details
+export const css = '__css__';
+
+// Export your plugin(s) as a constant `plugins`
 export const plugins = [TemplateInputPlugin];

src/plugin.ts

@@ -2,14 +2,14 @@ import {
 	BaseInputParams,
 	BindingTarget,
 	CompositeConstraint,
+	createPlugin,
 	createRangeConstraint,
 	createStepConstraint,
 	InputBindingPlugin,
-	ParamsParsers,
-	parseParams,
+	parseRecord,
 } from '@tweakpane/core';
 
-import {PluginController} from './controller';
+import {PluginController} from './controller.js';
 
 export interface PluginInputParams extends BaseInputParams {
 	max?: number;
@@ -18,7 +18,7 @@ export interface PluginInputParams extends BaseInputParams {
 	view: 'dots';
 }
 
-// NOTE: You can see JSDoc comments of `InputBindingPlugin` for details about each property
+// NOTE: JSDoc comments of `InputBindingPlugin` can be useful to know details about each property
 //
 // `InputBindingPlugin<In, Ex, P>` means...
 // - The plugin receives the bound value as `Ex`,
@@ -29,34 +29,30 @@ export const TemplateInputPlugin: InputBindingPlugin<
 	number,
 	number,
 	PluginInputParams
-> = {
+> = createPlugin({
 	id: 'input-template',
 
 	// type: The plugin type.
 	// - 'input': Input binding
 	// - 'monitor': Monitor binding
+	// - 'blade': Blade without binding
 	type: 'input',
 
-	// This plugin template injects a compiled CSS by @rollup/plugin-replace
-	// See rollup.config.js for details
-	css: '__css__',
-
 	accept(exValue: unknown, params: Record<string, unknown>) {
 		if (typeof exValue !== 'number') {
 			// Return null to deny the user input
 			return null;
 		}
 
 		// Parse parameters object
-		const p = ParamsParsers;
-		const result = parseParams<PluginInputParams>(params, {
+		const result = parseRecord<PluginInputParams>(params, (p) => ({
 			// `view` option may be useful to provide a custom control for primitive values
 			view: p.required.constant('dots'),
 
 			max: p.optional.number,
 			min: p.optional.number,
 			step: p.optional.number,
-		});
+		}));
 		if (!result) {
 			return null;
 		}
@@ -108,4 +104,4 @@ export const TemplateInputPlugin: InputBindingPlugin<
 			viewProps: args.viewProps,
 		});
 	},
-};
+});

src/sass/plugin.scss

@@ -1,27 +1,27 @@
 // Import core styles
-@import '../../node_modules/@tweakpane/core/lib/sass/plugin';
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
 
 // Additional style for the plugin
-.#{$prefix}-tmpv {
+.#{tp.$prefix}-tmpv {
 	// Extend a general input view style
-	@extend %input;
+	@extend %tp-input;
 
 	cursor: pointer;
 	display: grid;
 	grid-template-columns: repeat(10, 1fr);
 	grid-template-rows: repeat(auto-fit, 10px);
-	height: calc(var(--bld-us) * 3);
+	height: calc(#{tp.cssVar('container-unit-size')} * 3);
 	overflow: hidden;
 	position: relative;
 
-	&.#{$prefix}-v-disabled {
+	&.#{tp.$prefix}-v-disabled {
 		opacity: 0.5;
 	}
 
 	&_text {
 		// You can use CSS variables for styling. See declarations for details:
 		// ../../node_modules/@tweakpane/core/lib/sass/common/_defs.scss
-		color: var(--in-fg);
+		color: tp.cssVar('input-fg');
 
 		bottom: 2px;
 		font-size: 0.9em;
@@ -37,7 +37,7 @@
 		text-align: center;
 
 		&::before {
-			background-color: var(--in-fg);
+			background-color: tp.cssVar('input-fg');
 			content: '';
 			border-radius: 1px;
 			height: 2px;
@@ -50,7 +50,7 @@
 		}
 	}
 	&_frac {
-		background-color: var(--in-fg);
+		background-color: tp.cssVar('input-fg');
 		border-radius: 1px;
 		height: 2px;
 		left: 50%;

src/tsconfig.json

@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		"lib": ["DOM", "ES2015"],
-		"moduleResolution": "Node",
+		"moduleResolution": "Node16",
 		"strict": true,
 		"target": "ES6"
 	}

test/browser.html

@@ -5,19 +5,20 @@
 	<title></title>
 </head>
 <body>
-	<script src="../node_modules/tweakpane/dist/tweakpane.js"></script>
-	<script src="../dist/tweakpane-plugin-template.js"></script>
-	<script>
+	<script type="module">
+		import {Pane} from '../node_modules/tweakpane/dist/tweakpane.min.js';
+		import * as TweakpaneTemplatePlugin from '../dist/tweakpane-plugin-template.js';
+
 		const params = {
 			prop: 3,
 		};
-		const pane = new Tweakpane.Pane();
 
+		const pane = new Pane();
 		// Register plugin
 		pane.registerPlugin(TweakpaneTemplatePlugin);
 
 		// TODO: Update parameters for your plugin
-		pane.addInput(params, 'prop', {
+		pane.addBinding(params, 'prop', {
 			view: 'dots',
 		}).on('change', (ev) => {
 			console.log(ev.value);