Upgrade Tweakpane to v4

.eslintrc.json

@@ -0,0 +1,42 @@
+{
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/eslint-recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:prettier/recommended"
+	],
+	"parser": "@typescript-eslint/parser",
+	"plugins": ["@typescript-eslint", "simple-import-sort"],
+	"root": true,
+	"rules": {
+		"camelcase": "off",
+		"no-unused-vars": "off",
+		"sort-imports": "off",
+
+		"prettier/prettier": "error",
+		"simple-import-sort/imports": "error",
+		"@typescript-eslint/naming-convention": [
+			"error",
+			{
+				"selector": "variable",
+				"format": ["camelCase", "PascalCase", "UPPER_CASE"],
+				"custom": {
+					"regex": "^opt_",
+					"match": false
+				}
+			}
+		],
+		"@typescript-eslint/explicit-function-return-type": "off",
+		"@typescript-eslint/no-empty-function": "off",
+		"@typescript-eslint/no-explicit-any": "off",
+		"@typescript-eslint/no-unused-vars": [
+			"error",
+			{
+				"argsIgnorePattern": "^_"
+			}
+		],
+
+		// TODO: Resolve latest lint warnings
+		"@typescript-eslint/explicit-module-boundary-types": "off"
+	}
+}

.prettierrc.json

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

README.md

@@ -9,10 +9,11 @@ Essential components for [Tweakpane][tweakpane].
 
 ### Browser
 ```html
-<script src="tweakpane.min.js"></script>
-<script src="tweakpane-plugin-essentials.min.js"></script>
-<script>
-  const pane = new Tweakpane.Pane();
+<script type="module">
+  import {Pane} as Tweakpane from './tweakpane.min.js';
+  import * as TweakpaneEssentialsPlugin from './tweakpane-plugin-essentials.min.js';
+
+  const pane = new Pane();
   pane.registerPlugin(TweakpaneEssentialsPlugin);
 </script>
 ```
@@ -39,7 +40,7 @@ const params = {
   range: {min: 16, max: 48},
 };
 
-pane.addInput(params, 'range', {
+pane.addBinding(params, 'range', {
   min: 0,
   max: 100,
 
@@ -56,7 +57,7 @@ const fpsGraph = pane.addBlade({
   view: 'fpsgraph',
 
   label: 'fpsgraph',
-  lineCount: 2,
+  rows: 2,
 });
 
 function render() {
@@ -79,7 +80,7 @@ const params = {
 };
 
 const scales = [10, 20, 25, 50, 75, 100];
-pane.addInput(params, 'scale', {
+pane.addBinding(params, 'scale', {
   view: 'radiogrid',
   groupName: 'scale',
   size: [3, 2],

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.8",
   "description": "Essential components for Tweakpane",
   "main": "dist/tweakpane-plugin-essentials.js",
+  "type": "module",
   "types": "dist/types/index.d.ts",
   "author": "cocopon",
   "license": "MIT",
@@ -12,7 +13,7 @@
   "scripts": {
     "prepack": "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",
@@ -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,22 +36,22 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "@tweakpane/core": "^1.1.4",
+    "@tweakpane/core": "^2.0.0-alpha.0",
     "@types/chai": "^4.2.18",
     "@types/mocha": "^8.2.2",
     "@typescript-eslint/eslint-plugin": "5.33",
     "@typescript-eslint/parser": "^5.33.0",
     "autoprefixer": "^10.2.4",
     "chai": "^4.3.4",
-    "eslint": "^7.20.0",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "mocha": "^9.0.0",
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
     "postcss": "^8.2.6",
-    "prettier": "^2.2.1",
+    "prettier": "^2.8.8",
     "rimraf": "^3.0.2",
     "rollup": "^2.39.1",
     "rollup-plugin-cleanup": "^3.2.1",
@@ -58,6 +60,6 @@
     "typescript": "4.7"
   },
   "peerDependencies": {
-    "tweakpane": "^3.1.4"
+    "tweakpane": "^4.0.0-alpha.0"
   }
 }

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/esm/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

@@ -1,6 +1,11 @@
-'use strict';
+/* eslint-disable no-console */
+/* eslint-env node */
 
-const Package = require('../package.json');
+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`

src/button-grid/api/button-grid.ts

@@ -1,32 +1,25 @@
-import {
-	BladeApi,
-	ButtonController,
-	Emitter,
-	LabelController,
-} from '@tweakpane/core';
+import {BladeApi, ButtonController, Emitter} from '@tweakpane/core';
 
-import {ButtonGridController} from '../controller/button-grid';
-import {ButtonCellApi} from './button-cell';
-import {TpButtonGridEvent} from './tp-button-grid-event';
+import {ButtonGridBladeController} from '../controller/button-grid-blade.js';
+import {ButtonCellApi} from './button-cell.js';
+import {TpButtonGridEvent} from './tp-button-grid-event.js';
 
 interface ButtonGridApiEvents {
 	click: {
 		event: TpButtonGridEvent;
 	};
 }
 
-export class ButtonGridApi extends BladeApi<
-	LabelController<ButtonGridController>
-> {
+export class ButtonGridApi extends BladeApi<ButtonGridBladeController> {
 	private emitter_: Emitter<ButtonGridApiEvents>;
 	private cellToApiMap_: Map<ButtonController, ButtonCellApi> = new Map();
 
-	constructor(controller: LabelController<ButtonGridController>) {
+	constructor(controller: ButtonGridBladeController) {
 		super(controller);
 
 		this.emitter_ = new Emitter();
 
-		const gc = this.controller_.valueController;
+		const gc = this.controller.valueController;
 		gc.cellControllers.forEach((cc, i) => {
 			const api = new ButtonCellApi(cc);
 			this.cellToApiMap_.set(cc, api);
@@ -42,7 +35,7 @@ export class ButtonGridApi extends BladeApi<
 	}
 
 	public cell(x: number, y: number): ButtonCellApi | undefined {
-		const gc = this.controller_.valueController;
+		const gc = this.controller.valueController;
 		const cc = gc.cellControllers[y * gc.size[0] + x];
 		return this.cellToApiMap_.get(cc);
 	}

src/button-grid/api/tp-button-grid-event.ts

@@ -1,6 +1,6 @@
 import {TpEvent} from '@tweakpane/core';
 
-import {ButtonCellApi} from './button-cell';
+import {ButtonCellApi} from './button-cell.js';
 
 export class TpButtonGridEvent extends TpEvent {
 	public readonly cell: ButtonCellApi;

src/button-grid/controller/button-grid-blade.ts

@@ -0,0 +1,37 @@
+import {
+	Blade,
+	BladeController,
+	LabelController,
+	LabelProps,
+	LabelView,
+} from '@tweakpane/core';
+
+import {ButtonGridController} from './button-grid.js';
+
+interface Config {
+	blade: Blade;
+	labelProps: LabelProps;
+	valueController: ButtonGridController;
+}
+
+export class ButtonGridBladeController extends BladeController<LabelView> {
+	public readonly labelController: LabelController<ButtonGridController>;
+	public readonly valueController: ButtonGridController;
+
+	constructor(doc: Document, config: Config) {
+		const bc = config.valueController;
+		const lc = new LabelController(doc, {
+			blade: config.blade,
+			props: config.labelProps,
+			valueController: bc,
+		});
+		super({
+			blade: config.blade,
+			view: lc.view,
+			viewProps: bc.viewProps,
+		});
+
+		this.valueController = bc;
+		this.labelController = lc;
+	}
+}

src/button-grid/controller/button-grid.ts

@@ -15,6 +15,7 @@ interface Config {
 	size: [number, number];
 	cellConfig: (x: number, y: number) => CellConfig;
 }
+export type ButtonGridControllerConfig = Config;
 
 export class ButtonGridController implements Controller<PlainView> {
 	public readonly size: [number, number];