Merge pull request #6 from tweakpane/v4

Version 0.3.0

.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 @@ Enjoyable camera flavored controls for [Tweakpane].
 
 ### Browser
 ```html
-<script src="tweakpane.min.js"></script>
-<script src="tweakpane-plugin-camerakit.min.js"></script>
-<script>
-const pane = new Tweakpane.Pane();
+<script type="module">
+import {Pane} from './tweakpane.min.js';
+import * as TweakpaneCamerakitPlugin from 'tweakpane-plugin-camerakit.min.js';
+
+const pane = new Pane();
 pane.registerPlugin(TweakpaneCamerakitPlugin);
 </script>
 ```
@@ -31,7 +32,7 @@ pane.registerPlugin(CamerakitPlugin);
 ## Usage
 ```js
 // Ring input
-pane.addInput(params, 'key', {
+pane.addBinding(params, 'key', {
   // Ring control
   view: 'cameraring',
   // Appearance of the ring view: 0 | 1 | 2
@@ -41,7 +42,7 @@ pane.addInput(params, 'key', {
 
 ```js
 // Configuring a scale
-pane.addInput(params, 'key', {
+pane.addBinding(params, 'key', {
   view: 'cameraring',
   series: 0,
   // Scale unit
@@ -61,7 +62,7 @@ pane.addInput(params, 'key', {
 
 ```js
 // Wide
-pane.addInput(params, 'key', {
+pane.addBinding(params, 'key', {
   view: 'cameraring',
   series: 0,
   // Hide a text input and widen the ring view
@@ -71,7 +72,7 @@ pane.addInput(params, 'key', {
 
 ```js
 // Wheel input
-pane.addInput(params, 'key', {
+pane.addBinding(params, 'key', {
   view: 'camerawheel',
   // Amount of a value per pixel
   amount: 100,

package.json

@@ -1,8 +1,9 @@
 {
   "name": "@tweakpane/plugin-camerakit",
-  "version": "0.2.3",
+  "version": "0.3.0-beta.1",
   "description": "Enjoyable camera flavored controls for Tweakpane",
   "main": "dist/tweakpane-plugin-camerakit.js",
+  "type": "module",
   "types": "dist/types/index.d.ts",
   "author": "cocopon",
   "license": "MIT",
@@ -16,7 +17,7 @@
   "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",
@@ -29,23 +30,25 @@
     "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' -- npm run build:dev"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.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.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "autoprefixer": "^10.2.4",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.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",
@@ -55,9 +58,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';
@@ -28,7 +30,7 @@ function getPlugins(css, shouldMinify) {
 			entries: [
 				{
 					find: '@tweakpane/core',
-					replacement: './node_modules/@tweakpane/core/dist/es6/index.js',
+					replacement: './node_modules/@tweakpane/core/dist/index.js',
 				},
 			],
 		}),
@@ -62,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' : '';
@@ -85,8 +74,7 @@ export default async () => {
 		input: 'src/index.ts',
 		output: {
 			file: `dist/${distName}${postfix}.js`,
-			format: 'umd',
-			name: getUmdName(Package.name),
+			format: 'esm',
 		},
 		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/controller/ring-text.ts

@@ -1,27 +1,23 @@
 import {
 	Formatter,
 	NumberTextController,
+	NumberTextProps,
 	Parser,
 	Value,
 	ValueController,
-	ValueMap,
 	ViewProps,
 } from '@tweakpane/core';
 
-import {RingUnit} from '../view/ring';
-import {RingTextView} from '../view/ring-text';
-import {RingController} from './ring';
+import {RingUnit} from '../view/ring.js';
+import {RingTextView} from '../view/ring-text.js';
+import {RingController} from './ring.js';
 
 interface Config {
-	baseStep: number;
-	draggingScale: number;
-	formatters: {
-		ring: Formatter<number>;
-		text: Formatter<number>;
-	};
 	parser: Parser<number>;
-	seriesId: string;
+	ringFormatter: Formatter<number>;
 	ringUnit: RingUnit;
+	seriesId: string;
+	textProps: NumberTextProps;
 	value: Value<number>;
 	viewProps: ViewProps;
 }
@@ -40,20 +36,19 @@ export class RingTextController
 		this.viewProps = config.viewProps;
 
 		this.rc_ = new RingController(doc, {
-			formatters: config.formatters,
+			formatters: {
+				ring: config.ringFormatter,
+				text: config.textProps.get('formatter'),
+			},
 			seriesId: config.seriesId,
 			tooltipEnabled: false,
 			unit: config.ringUnit,
 			value: this.value,
 			viewProps: this.viewProps,
 		});
 		this.tc_ = new NumberTextController(doc, {
-			baseStep: config.baseStep,
 			parser: config.parser,
-			props: ValueMap.fromObject({
-				draggingScale: config.draggingScale,
-				formatter: config.formatters.text,
-			}),
+			props: config.textProps,
 			value: this.value,
 			viewProps: this.viewProps,
 		});

src/controller/ring.ts

@@ -8,7 +8,7 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {RingUnit, RingView} from '../view/ring';
+import {RingUnit, RingView} from '../view/ring.js';
 
 interface Config {
 	formatters: {

src/index.ts

@@ -1,4 +1,6 @@
-import {RingInputPlugin} from './plugin-ring';
-import {WheelInputPlugin} from './plugin-wheel';
+import {RingInputPlugin} from './plugin-ring.js';
+import {WheelInputPlugin} from './plugin-wheel.js';
 
+export const id = 'camerakit';
+export const css = '__css__';
 export const plugins = [RingInputPlugin, WheelInputPlugin];