[PR] Upgrading to Tweakpane V4

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x, 20.x]
+        node-version: [16.x, 18.x, 20.x, latest]
 
     steps:
       - uses: actions/checkout@v3
@@ -25,8 +25,4 @@ jobs:
       - run: npm install
       - run: npm run build --if-present
       - run: npm test
-
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
-        env:
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+

README.md

@@ -9,27 +9,41 @@ A Tweakpane plugin for importing files.
 </p>
 
 
+> [!WARNING]
+> 
+> The version `1.0.0` and upwards of this package
+> only supports `Tweakpane v4`.
+> 
+> If you are still using `Tweakpane v3`,
+> **you can only use the `v0` of this package**.
+> 
+> 
+> You can install it.
+> 
+> ```sh
+> npm i [email protected]
+> ```
+> 
+> And use it like so.
+> 
+> ```html
+> <script src="https://unpkg.com/[email protected]/dist/tweakpane.js"></script>
+> <script src="./tweakpane-plugin-file-import.min.js"></script>
+> <script>
+> 	const pane = new Tweakpane.Pane();
+> 	pane.registerPlugin(TweakpaneFileImportPlugin);
+> </script>
+> ```
+
+
 # Installation
 
-You need [Tweakpane](https://github.com/cocopon/tweakpane) to install this plugin.
+You need [Tweakpane `v4`](https://github.com/cocopon/tweakpane) to install this plugin.
 
 You may use https://unpkg.com/tweakpane-plugin-file-import to get the latest version
 and add it as a `<script>` tag on your HTML page.
 
-## Browser
-
-```html
-<script src="https://unpkg.com/[email protected]/dist/tweakpane.js"></script>
-<script src="./tweakpane-plugin-file-import.min.js"></script>
-<script>
-	const pane = new Tweakpane.Pane();
-	pane.registerPlugin(TweakpaneFileImportPlugin);
-</script>
-```
-
-## Package
-
-Alternatively, you can install with `npm`:
+You can install with `npm`:
 
 ```sh
 npm i tweakpane-plugin-file-import
@@ -45,6 +59,11 @@ const pane = new Pane();
 pane.registerPlugin(TweakpaneFileImportPlugin);
 ```
 
+> [!TIP]
+>
+> Check [`test/browser.html`](/test/browser.html) for an example
+> of the plugin being used.
+
 ## Usage
 
 Simply initialize the params with an empty string and pass the optional parameters.
@@ -54,6 +73,7 @@ const params = {
 	file: '',
 };
 
+// If you're using Tweakpane v3 -------
 pane
 	.addInput(params, 'file', {
 		view: 'file-input',
@@ -64,6 +84,17 @@ pane
 		console.log(ev.value);
 	});
 
+// If you're using Tweakpane v4 -------
+pane
+	.addBinding(params, 'file', {
+		view: 'file-input',
+		lineCount: 3,
+		filetypes: ['.png', '.jpg'],
+	})
+	.on('change', (ev) => {
+		console.log(ev.value);
+	});
+
 ```
 
 ### Optional parameters
@@ -77,20 +108,25 @@ pane
 
 ## Contributing
 
-If you want to contribute to this package, you are free to open a pull request.
+If you want to contribute to this package, you are free to open a pull request. 😊
 
 ### Quickstart
 
+> [!NOTE]
+>
+> You'll need to have `Node 16` or upwards installed
+> in order to properly install and run `package.json` script commands.
+
 Install dependencies:
 
 ```sh
 npm install
 ```
 
-To build the source codes and watch changes, run:
+To build the source code and watch changes, run:
 
 ```sh
-npm watch
+npm start
 ```
 
 After this, simply open `test/browser.html` to see the results.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tweakpane-plugin-file-import",
-	"version": "0.1.4",
+	"version": "1.0.0",
 	"description": "A general-purpose and simple file input Tweakpane plugin",
 	"homepage": "https://github.com/LuchoTurtle/tweakpane-plugin-file-import",
 	"main": "dist/tweakpane-plugin-file-import.js",
@@ -17,59 +17,51 @@
 	"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",
 		"build:dts": "tsc --project tsconfig-dts.json",
 		"build:prod": "rollup --config rollup.config.js --environment BUILD:production",
-		"release": "release-it",
 		"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"
 	},
 	"devDependencies": {
-		"@istanbuljs/nyc-config-typescript": "^1.0.2",
-		"@rollup/plugin-alias": "^5.0.1",
-		"@rollup/plugin-node-resolve": "^15.2.3",
-		"@rollup/plugin-replace": "^5.0.5",
-		"@rollup/plugin-typescript": "^11.1.5",
-		"@tweakpane/core": "^1.1.4",
-		"@types/jsdom": "^21.1.1",
-		"@types/mocha": "^10.0.1",
-		"@typescript-eslint/eslint-plugin": "^5.59.8",
-		"@typescript-eslint/parser": "^5.59.8",
+		"@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": "^2.0.1",
+		"@typescript-eslint/eslint-plugin": "^6.14.0",
+		"@typescript-eslint/parser": "6.14.0",
 		"autoprefixer": "^10.2.4",
-		"eslint": "^8.42.0",
-		"eslint-config-prettier": "^9.0.0",
+		"eslint": "^8.46.0",
+		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.0.1",
 		"eslint-plugin-simple-import-sort": "^10.0.0",
-		"install": "^0.13.0",
-		"jsdom": "^23.0.1",
-		"mocha": "^10.2.0",
-		"npm": "^10.2.4",
+		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
-		"nyc": "^15.1.0",
 		"onchange": "^7.1.0",
 		"postcss": "^8.2.6",
-		"prettier": "3.1.0",
-		"release-it": "^17.0.0",
-		"rimraf": "^5.0.5",
+		"prettier": "^3.1.1",
+		"rimraf": "^3.0.2",
 		"rollup": "^2.39.1",
 		"rollup-plugin-cleanup": "^3.2.1",
 		"rollup-plugin-terser": "^7.0.2",
 		"sass": "^1.49.9",
-		"ts-mocha": "^10.0.0",
-		"typescript": "^5.3.2"
-	},
-	"peerDependencies": {
-		"tweakpane": "^3.1.4"
-	}
+		"tweakpane": "^4.0.0",
+		"typescript": "^4.9.5"
+	  },
+	  "peerDependencies": {
+		"tweakpane": "^4.0.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/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),
 

src/controller/controller.ts

@@ -6,7 +6,7 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {FilePluginView} from '../view/view';
+import {FilePluginView} from '../view/view.js';
 
 interface Config {
 	value: Value<File | null>;

src/index.ts

@@ -1,4 +1,6 @@
-import {TweakpaneFileInputPlugin} from './plugin';
+import {TweakpaneFileInputPlugin} from './plugin.js';
 
 // Export your plugin(s) as constant `plugins`
+export const id = 'file-input';
+export const css = '__css__';
 export const plugins = [TweakpaneFileInputPlugin];

src/plugin.ts

@@ -2,12 +2,12 @@ import {
 	BaseInputParams,
 	BindingTarget,
 	CompositeConstraint,
+	createPlugin,
 	InputBindingPlugin,
-	ParamsParsers,
-	parseParams,
+	parseRecord,
 } from '@tweakpane/core';
 
-import {FilePluginController} from './controller/controller';
+import {FilePluginController} from './controller/controller.js';
 
 export interface PluginInputParams extends BaseInputParams {
 	view: 'file-input';
@@ -19,31 +19,26 @@ export const TweakpaneFileInputPlugin: InputBindingPlugin<
 	File | null,
 	string,
 	PluginInputParams
-> = {
+> = createPlugin({
 	id: 'file-input',
 
 	// type: The plugin type.
 	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
 			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('file-input'),
 
 			lineCount: p.optional.number,
 			filetypes: p.optional.array(p.required.string),
-		});
+		}));
 		if (!result) {
 			return null;
 		}
@@ -88,4 +83,4 @@ export const TweakpaneFileInputPlugin: InputBindingPlugin<
 			filetypes: args.params.filetypes,
 		});
 	},
-};
+});