From 3cf40bd4721557a109905bef7648525511650f23 Mon Sep 17 00:00:00 2001
From: Eric Mika <eric@ericmika.com>
Date: Thu, 21 Sep 2023 22:45:10 -0400
Subject: [PATCH] Update for Tweakpane v4.

---
 .eslintignore                     |  7 ++++-
 .eslintrc.js => .eslintrc.cjs     |  0
 .prettierrc.js => .prettierrc.cjs |  0
 README.md                         |  4 +--
 package.json                      | 48 +++++++++++++++++--------------
 rollup.config.js                  | 26 ++++-------------
 scripts/assets-append-version.js  | 14 +++++----
 scripts/dist-name.js              | 16 +++++++++++
 src/controller.ts                 | 12 ++++----
 src/index.ts                      | 10 +++++--
 src/plugin.ts                     | 33 ++++++++-------------
 src/sass/plugin.scss              | 17 ++++++-----
 src/tsconfig.json                 |  2 +-
 src/view.ts                       |  4 +--
 test/browser.html                 | 10 +++----
 15 files changed, 106 insertions(+), 97 deletions(-)
 rename .eslintrc.js => .eslintrc.cjs (100%)
 rename .prettierrc.js => .prettierrc.cjs (100%)
 create mode 100644 scripts/dist-name.js

diff --git a/.eslintignore b/.eslintignore
index b512c09..dfc47aa 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,6 @@
-node_modules
\ No newline at end of file
+/dist/**/*
+/docs/**/*
+/ts*/**/*
+/types/**/*
+.eslintrc.cjs
+rollup.config.js
diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 100%
rename from .eslintrc.js
rename to .eslintrc.cjs
diff --git a/.prettierrc.js b/.prettierrc.cjs
similarity index 100%
rename from .prettierrc.js
rename to .prettierrc.cjs
diff --git a/README.md b/README.md
index bb2a8d9..79e676b 100644
--- a/README.md
+++ b/README.md
@@ -39,9 +39,9 @@ const params = {
   prop: 'Put your\nmultiline\ntext here!'
 };
 
-pane.addInput(params, 'prop', {
+pane.addBinding(params, 'prop', {
   view: 'textarea',
-  lineCount: 6,
+  rows: 6,
   placeholder: 'Type here...'
 }).on('change', (ev) => {
   console.log(ev.value);
diff --git a/package.json b/package.json
index 8e1570b..39ffbcd 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,19 @@
 {
   "name": "@pangenerator/tweakpane-textarea-plugin",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Textarea plugin for Tweakpane",
   "main": "dist/tweakpane-textarea-plugin.js",
+  "type": "module",
   "types": "dist/types/index.d.ts",
   "author": "panGenerator <contact@pangenerator.com>",
   "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/panGenerator/tweakpane-textarea-plugin.git"
+  },
   "keywords": [
     "tweakpane",
     "tweakpane-plugin",
@@ -13,47 +21,42 @@
     "textarea",
     "multiline"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/panGenerator/tweakpane-textarea-plugin.git"
-  },
-  "files": [
-    "dist"
-  ],
   "scripts": {
-    "prepare": "run-s clean build",
-    "prepublishOnly": "npm test",
-    "start": "npm run watch",
-    "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",
-    "clean": "rimraf dist *.tgz *.zip",
+    "assets:zip": "zip -x '*types*' -j -r $(node scripts/dist-name.js)-$(cat package.json | npx json version).zip dist",
     "build": "run-p build:*",
     "build:dev": "rollup --config rollup.config.js",
     "build:dts": "tsc --project src/tsconfig-dts.json",
     "build:prod": "rollup --config rollup.config.js --environment BUILD:production",
+    "clean": "rimraf dist *.tgz *.zip",
     "format": "run-p format:*",
     "format:scss": "prettier --parser scss --write \"src/sass/**/*.scss\"",
     "format:ts": "eslint --ext .ts --fix \"src/**/*.ts\"",
+    "postversion": "git push --tags",
+    "prepare": "run-s clean build",
+    "prepublishOnly": "npm test",
+    "server": "http-server -c-1 -o /test/browser.html",
+    "start": "run-p watch server",
+    "test": "eslint --ext .ts \"src/**/*.ts\"",
     "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",
-    "postversion": "git push --tags"
+    "watch:ts": "onchange --initial --kill \"src/**/*.ts\" -- rollup --config rollup.config.js"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "@tweakpane/core": "^1.0.6",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@tweakpane/core": "^2.0.0",
+    "@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",
@@ -63,9 +66,10 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.49.9",
-    "typescript": "^4.1.5"
+    "tweakpane": "^4.0.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "tweakpane": "^3.0.5"
+    "tweakpane": "^4.0.0"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index 119e0cb..322f15f 100644
--- a/rollup.config.js
+++ b/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',
 				},
 			],
 		}),
@@ -55,23 +56,7 @@ function getPlugins(css, shouldMinify) {
 }
 
 function getDistName(packageName) {
-	return packageName.split('/')[1];
-	// .reduce((comps, comp) => (comp !== '' ? [...comps, comp] : comps), [])
-	// .join('-');
-}
-
-function getUmdName(packageName) {
-	// `@tweakpane/plugin-foobar` -> `TweakpaneFoobarPlugin`
-	// `tweakpane-plugin-foobar`  -> `TweakpaneFoobarPlugin`
-	return (
-		packageName
-			.split('/')[1]
-			.split(/[@/-]/)
-			.map((comp) =>
-				comp !== 'plugin' ? comp.charAt(0).toUpperCase() + comp.slice(1) : '',
-			)
-			.join('') + 'Plugin'
-	);
+	return packageName.replace(/^@[^\/]+\//, '')
 }
 
 export default async () => {
@@ -85,11 +70,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),
 
diff --git a/scripts/assets-append-version.js b/scripts/assets-append-version.js
index 811c5cc..61141dc 100644
--- a/scripts/assets-append-version.js
+++ b/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/*';
 
diff --git a/scripts/dist-name.js b/scripts/dist-name.js
new file mode 100644
index 0000000..792e8b1
--- /dev/null
+++ b/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);
diff --git a/src/controller.ts b/src/controller.ts
index 251b8e0..33c4917 100644
--- a/src/controller.ts
+++ b/src/controller.ts
@@ -1,13 +1,13 @@
 import {Controller, forceCast, Value, ViewProps} from '@tweakpane/core';
 
-import {TextAreaView} from './view';
+import {TextAreaView} from './view.js';
 /**
  * @hidden
  */
 export interface Config {
 	value: Value<string>;
 	viewProps: ViewProps;
-	lineCount: number;
+	rows: number;
 	placeholder: string;
 }
 
@@ -18,22 +18,22 @@ export class TextAreaController implements Controller<TextAreaView> {
 	public readonly value: Value<string>;
 	public readonly view: TextAreaView;
 	public readonly viewProps: ViewProps;
-	public readonly lineCount: number;
+	public readonly rows: number;
 	public readonly placeholder: string;
 
 	constructor(doc: Document, config: Config) {
 		this.onInputChange_ = this.onInputChange_.bind(this);
 		this.value = config.value;
 		this.viewProps = config.viewProps;
-		this.lineCount = config.lineCount;
+		this.rows = config.rows;
 		this.placeholder = config.placeholder;
 
-		// console.log( this.lineCount )
+		// console.log( this.rows )
 
 		this.view = new TextAreaView(doc, {
 			value: this.value,
 			viewProps: this.viewProps,
-			lineCount: this.lineCount,
+			rows: this.rows,
 			placeholder: this.placeholder,
 		});
 		this.view.inputElement.addEventListener('keyup', this.onInputChange_);
diff --git a/src/index.ts b/src/index.ts
index 1a87fa6..feb0c5a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,10 @@
-import {TweakpaneTextareaPlugin} from './plugin';
+import type {TpPlugin} from 'tweakpane';
+
+import {TweakpaneTextareaPlugin} from './plugin.js';
+
+export const id = 'textarea';
+
+export const css = '__css__';
 
 // Export your plugin(s) as constant `plugins`
-export const plugins = [TweakpaneTextareaPlugin];
+export const plugins: TpPlugin[] = [TweakpaneTextareaPlugin];
diff --git a/src/plugin.ts b/src/plugin.ts
index 3bcaf31..58ab66b 100644
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -1,16 +1,16 @@
 import {
 	BaseInputParams,
 	BindingTarget,
+	createPlugin,
 	InputBindingPlugin,
-	ParamsParsers,
-	parseParams,
+	parseRecord,
 } from '@tweakpane/core';
 
-import {TextAreaController} from './controller';
+import {TextAreaController} from './controller.js';
 
-export interface PluginInputParams extends BaseInputParams {
+export interface TextareaPluginInputParams extends BaseInputParams {
 	view: 'textarea';
-	lineCount?: number;
+	rows?: number;
 	placeholder?: string;
 }
 
@@ -24,19 +24,11 @@ export interface PluginInputParams extends BaseInputParams {
 export const TweakpaneTextareaPlugin: InputBindingPlugin<
 	string,
 	string,
-	PluginInputParams
-> = {
+	TextareaPluginInputParams
+> = createPlugin({
 	id: 'input-template',
-
-	// type: The plugin type.
-	// - 'input': Input binding
-	// - 'monitor': Monitor 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 !== 'string') {
 			// Return null to deny the user input
@@ -45,13 +37,12 @@ export const TweakpaneTextareaPlugin: InputBindingPlugin<
 
 		// Parse parameters object
 		// console.log(params)
-		const p = ParamsParsers;
-		const result = parseParams<PluginInputParams>(params, {
+		const result = parseRecord<TextareaPluginInputParams>(params, (p) => ({
 			// `view` option may be useful to provide a custom control for primitive values
 			view: p.required.constant('textarea'),
-			lineCount: p.optional.number,
+			rows: p.optional.number,
 			placeholder: p.optional.string,
-		});
+		}));
 		if (!result) {
 			return null;
 		}
@@ -84,9 +75,9 @@ export const TweakpaneTextareaPlugin: InputBindingPlugin<
 		// Create a controller for the plugin
 		return new TextAreaController(args.document, {
 			value: args.value,
-			lineCount: args.params.lineCount ?? 3,
+			rows: args.params.rows ?? 3,
 			placeholder: args.params.placeholder ?? 'Enter text here',
 			viewProps: args.viewProps,
 		});
 	},
-};
+});
diff --git a/src/sass/plugin.scss b/src/sass/plugin.scss
index 48a6d3e..6309c3c 100644
--- a/src/sass/plugin.scss
+++ b/src/sass/plugin.scss
@@ -1,28 +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}-txtrv {
+.#{tp.$prefix}-txtrv {
 	// Extend a general input view style
-	@extend %input;
+	@extend %tp-input;
 	display: block;
-	height: auto; //calc(var(--bld-us) * 4)
+	height: auto; //calc(#{tp.cssVar('container-unit-size')} * 4)
 	//margin-bottom: -5px;
 	padding-bottom: 0;
 	overflow: hidden;
 	position: relative;
 
-	&.#{$prefix}-v-disabled {
+	&.#{tp.$prefix}-v-disabled {
 		opacity: 0.5;
 	}
 
 	.tp-txtrv_i {
 		font-family: var(--font-family);
-		background-color: var(--in-bg);
-		border-radius: var(--elm-br);
+		background-color: tp.cssVar('input-bg');
+		border-radius: tp.cssVar('blade-border-radius');
 		box-sizing: border-box;
-		color: var(--in-fg);
+		color: tp.cssVar('input-fg');
 		font-size: 11px;
 		padding: 4px;
 		line-height: 16px;
diff --git a/src/tsconfig.json b/src/tsconfig.json
index f324fce..f46494b 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		"lib": ["DOM", "ES2015"],
-		"moduleResolution": "Node",
+		"moduleResolution": "Node16",
 		"strict": true,
 		"target": "ES6"
 	}
diff --git a/src/view.ts b/src/view.ts
index 8685f1d..e277844 100644
--- a/src/view.ts
+++ b/src/view.ts
@@ -3,7 +3,7 @@ import {ClassName, Value, View, ViewProps} from '@tweakpane/core';
 interface Config {
 	value: Value<string>;
 	viewProps: ViewProps;
-	lineCount: number;
+	rows: number;
 	placeholder: string;
 }
 
@@ -24,7 +24,7 @@ export class TextAreaView implements View {
 		//this.onChange_ = this.onChange_.bind(this);
 
 		const inputElem = doc.createElement('textarea');
-		inputElem.rows = config.lineCount;
+		inputElem.rows = config.rows;
 		inputElem.cols = 22;
 		inputElem.placeholder = config.placeholder;
 		inputElem.classList.add(className('i'));
diff --git a/test/browser.html b/test/browser.html
index 856a49b..cd2b13f 100644
--- a/test/browser.html
+++ b/test/browser.html
@@ -6,9 +6,9 @@
 </head>
 <body style="background-color: rgb(203, 203, 203);">
 	<div id="output" style="white-space: pre-line" >Type in the text area to refresh content live...</div>
-	<script src="../node_modules/tweakpane/dist/tweakpane.js"></script>
-	<script src="../dist/tweakpane-textarea-plugin.js"></script>
-	<script>
+	<script type="module">
+		import * as Tweakpane from '../node_modules/tweakpane/dist/tweakpane.js';
+		import * as TweakpaneTextareaPlugin from '../dist/tweakpane-textarea-plugin.js';
 
 		// Object with multiline text property
 		const params = {
@@ -23,9 +23,9 @@
 		pane.registerPlugin(TweakpaneTextareaPlugin);
 
 		// Add text area input
-		pane.addInput(params, 'prop', {
+		pane.addBinding(params, 'prop', {
 			view: 'textarea',
-			lineCount: 6,
+			rows: 6,
 			placeholder: 'Type here...',
 		}).on('change', (ev) => {
 			console.log( ev.value );