Merge branch 'v3' into main

README.md

@@ -10,18 +10,19 @@
 <script src="tweakpane.min.js"></script>
 <scirpt src="tweakpane-plugin-interval.min.js"></script>
 <script>
-  const pane = new Tweakpane();
-  // ...
+  const pane = new Tweakpane.Pane();
+  pane.registerPlugin(TweakpaneIntervalPlugin);
 </script>
 ```
 
 
 ### Node.js
 ```js
-import Tweakpane from 'tweakpane';
-import 'tweakpane-plugin-interval';
+import {Pane} from 'tweakpane';
+import * as TweakpaneIntervalPlugin from '@tweakpane/plugin-interval';
 
-const pane = new Tweakpane();
+const pane = new Pane();
+pane.registerPlugin(TweakpaneIntervalPlugin);
 // ...
 ```
 
@@ -33,6 +34,7 @@ const PARAMS = {
 };
 
 const pane = new Tweakpane();
+pane.registerPlugin(TweakpaneIntervalPlugin);
 
 pane.addInput(PARAMS, 'range', {
   min: 0,

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "tweakpane-plugin-interval",
-  "version": "0.2.4",
+  "name": "@tweakpane/plugin-interval",
+  "version": "0.3.0-beta.0",
   "description": "Range slider control for Tweakpane",
   "main": "dist/tweakpane-plugin-interval.js",
   "types": "dist/types/index.d.ts",
@@ -15,16 +15,12 @@
     "start": "npm run watch",
     "test": "run-s test:*",
     "test:scss": "prettier --parser scss --list-different 'src/sass/**/*.scss'",
-    "test:ts": "run-s test:ts:static test:ts:dynamic",
+    "test:ts": "run-s test:ts:static",
     "test:ts:static": "eslint --ext .ts 'src/**/*.ts'",
-    "test:ts:dynamic": "TS_NODE_PROJECT='src/tsconfig.json' nyc --extension '.ts' mocha  -r tsconfig-paths/register -r ts-node/register 'src/**/*-test.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": "rm -rf dist *.tgz *.zip",
-    "coverage": "run-s coverage:report:*",
-    "coverage:report:html": "nyc report --reporter=html --reporter=text --reporter=lcovonly --report-dir=test/coverage",
-    "coverage:report:xml": "TS_NODE_PROJECT='src/tsconfig.json' nyc --reporter=none --extension '.ts' --exclude '**/*-test.ts' mocha --require ts-node/register --reporter mocha-junit-reporter --reporter-options mochaFile=./test/results/results.xml 'src/**/*-test.ts'",
     "build": "run-p build:*",
     "build:dev": "rollup --config rollup.config.js",
     "build:dts": "tsc --project src/tsconfig-dts.json",
@@ -37,36 +33,32 @@
     "watch:ts": "onchange '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.0",
     "@types/chai": "^4.2.15",
-    "@types/jsdom": "^16.2.6",
     "@types/mocha": "^8.2.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
+    "@typescript-eslint/parser": "^4.16.1",
     "autoprefixer": "^10.2.4",
     "chai": "^4.3.0",
     "eslint": "^7.20.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "jsdom": "^16.4.0",
     "mocha": "^8.3.0",
-    "mocha-junit-reporter": "^2.0.0",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.0",
     "npm-run-all": "^4.1.5",
-    "nyc": "^15.1.0",
     "onchange": "^7.1.0",
     "postcss": "^8.2.6",
     "prettier": "^2.2.1",
     "rollup": "^2.39.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "ts-node": "^9.1.1",
-    "tsconfig-paths": "^3.9.0",
-    "typescript": "^3.9.9"
-  },
-  "peerDependencies": {
-    "tweakpane": "2.4.0"
+    "tweakpane": "^3.0.0",
+    "typescript": "^4.2.4"
   }
 }

rollup.config.js

@@ -1,3 +1,5 @@
+import Alias from '@rollup/plugin-alias';
+import {nodeResolve} from '@rollup/plugin-node-resolve';
 import Replace from '@rollup/plugin-replace';
 import Typescript from '@rollup/plugin-typescript';
 import Autoprefixer from 'autoprefixer';
@@ -22,11 +24,18 @@ async function compileCss() {
 
 function getPlugins(css, shouldMinify) {
 	const plugins = [
-		// NOTE: `paths` should be set to avoid unexpected type confliction
-		// https://github.com/Microsoft/typescript/issues/6496
+		Alias({
+			entries: [
+				{
+					find: '@tweakpane/core',
+					replacement: './node_modules/@tweakpane/core/dist/es6/index.js',
+				},
+			],
+		}),
 		Typescript({
 			tsconfig: 'src/tsconfig.json',
 		}),
+		nodeResolve(),
 		Replace({
 			__css__: css,
 			preventAssignment: false,
@@ -44,21 +53,40 @@ function getPlugins(css, shouldMinify) {
 	];
 }
 
+function getDistName(packageName) {
+	// `@tweakpane/plugin-foobar` -> `tweakpane-plugin-foobar`
+	// `tweakpane-plugin-foobar`  -> `tweakpane-plugin-foobar`
+	return packageName
+		.split(/[@/-]/)
+		.reduce((comps, comp) => (comp !== '' ? [...comps, comp] : comps), [])
+		.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' : '';
 
+	const distName = getDistName(Package.name);
 	const css = await compileCss();
 	return {
 		input: 'src/index.ts',
-		external: ['tweakpane'],
 		output: {
-			file: `dist/${Package.name}${postfix}.js`,
+			file: `dist/${distName}${postfix}.js`,
 			format: 'umd',
-			globals: {
-				tweakpane: 'Tweakpane',
-			},
-			name: 'TweakpanePluginInterval',
+			name: getUmdName(Package.name),
 		},
 		plugins: getPlugins(css, production),
 

src/constraint/interval.ts

@@ -1,4 +1,4 @@
-import {Constraint} from 'tweakpane/lib/common/constraint/constraint';
+import {Constraint} from '@tweakpane/core';
 
 import {Interval} from '../model/interval';
 

src/controller/range-slider-text.ts

@@ -1,11 +1,13 @@
-import {Constraint} from 'tweakpane/lib/common/constraint/constraint';
-import {ValueController} from 'tweakpane/lib/common/controller/value';
-import {Formatter} from 'tweakpane/lib/common/converter/formatter';
-import {Parser} from 'tweakpane/lib/common/converter/parser';
-import {Value} from 'tweakpane/lib/common/model/value';
-import {ValueMap} from 'tweakpane/lib/common/model/value-map';
-import {ViewProps} from 'tweakpane/lib/common/model/view-props';
-import {PointNdTextController} from 'tweakpane/lib/input-binding/common/controller/point-nd-text';
+import {
+	Constraint,
+	Formatter,
+	Parser,
+	PointNdTextController,
+	Value,
+	ValueController,
+	ValueMap,
+	ViewProps,
+} from '@tweakpane/core';
 
 import {Interval, IntervalAssembly} from '../model/interval';
 import {RangeSliderTextView} from '../view/range-slider-text';
@@ -23,7 +25,9 @@ interface Config {
 	viewProps: ViewProps;
 }
 
-export class RangeSliderTextController implements ValueController<Interval> {
+export class RangeSliderTextController
+	implements ValueController<Interval, RangeSliderTextView>
+{
 	public readonly value: Value<Interval>;
 	public readonly view: RangeSliderTextView;
 	public readonly viewProps: ViewProps;
@@ -39,7 +43,7 @@ export class RangeSliderTextController implements ValueController<Interval> {
 		const axis = {
 			baseStep: config.baseStep,
 			constraint: config.constraint,
-			textProps: new ValueMap({
+			textProps: ValueMap.fromObject({
 				draggingScale: config.draggingScale,
 				formatter: config.formatter,
 			}),

src/controller/range-slider.ts

@@ -1,12 +1,12 @@
-import {ValueController} from 'tweakpane/lib/common/controller/value';
-import {Value} from 'tweakpane/lib/common/model/value';
-import {ViewProps} from 'tweakpane/lib/common/model/view-props';
-import {mapRange} from 'tweakpane/lib/common/number-util';
 import {
+	mapRange,
 	PointerData,
 	PointerHandler,
 	PointerHandlerEvent,
-} from 'tweakpane/lib/common/view/pointer-handler';
+	Value,
+	ValueController,
+	ViewProps,
+} from '@tweakpane/core';
 
 import {Interval} from '../model/interval';
 import {RangeSliderView} from '../view/range-slider';
@@ -20,7 +20,9 @@ interface Config {
 
 type Grabbing = 'min' | 'length' | 'max';
 
-export class RangeSliderController implements ValueController<Interval> {
+export class RangeSliderController
+	implements ValueController<Interval, RangeSliderView>
+{
 	public readonly value: Value<Interval>;
 	public readonly view: RangeSliderView;
 	public readonly viewProps: ViewProps;

src/converter/interval.ts

@@ -1,4 +1,4 @@
-import {BindingTarget} from 'tweakpane/lib/common/binding/target';
+import {BindingTarget} from '@tweakpane/core';
 
 import {Interval} from '../model/interval';
 

src/index.ts

@@ -1,9 +1 @@
-import {intervalInputPlugin} from 'plugin';
-import Tweakpane from 'tweakpane';
-
-{
-	Tweakpane.registerPlugin({
-		type: 'input',
-		plugin: intervalInputPlugin,
-	});
-}
+export {IntervalInputPlugin as plugin} from './plugin';

src/model/interval.ts

@@ -1,4 +1,4 @@
-import {PointNdAssembly} from 'tweakpane/lib/input-binding/common/model/point-nd';
+import {PointNdAssembly} from '@tweakpane/core/dist/cjs/input-binding/common/model/point-nd';
 
 export interface IntervalObject {
 	max: number;