Merge pull request #2 from kitschpatrol/tweakpane-v4

feat: support for tweakpane v4

.eslintignore

@@ -2,5 +2,5 @@
 /docs/**/*
 /ts*/**/*
 /types/**/*
-.eslintrc.js
+.eslintrc.cjs
 rollup.config.js

README.md

@@ -9,28 +9,29 @@ Rotation input plugin for Tweakpane
 [Sandbox](https://0b5vr.github.io/tweakpane-plugin-rotation)
 
 ```html
-<script src="https://unpkg.com/tweakpane@3.0.5/dist/tweakpane.js"></script>
-<script src="./tweakpane-plugin-rotation.js"></script>
-<script>
+<script type="module">
+  import * as Tweakpane from 'https://unpkg.com/tweakpane@4.0.1/dist/tweakpane.js';
+  import * as TweakpaneRotationInputPlugin from './tweakpane-plugin-rotation.js';
+
   const pane = new Tweakpane.Pane();
 
   pane.registerPlugin(TweakpaneRotationInputPlugin);
 
   const params = {
     euler: { x: 0.0, y: 0.0, z: 0.0 },
     quat: { x: 0.0, y: 0.0, z: 0.0, w: 1.0 },
-  }
+  };
 
   // euler
-  const guiEuler = pane.addInput(params, 'euler', {
+  const guiEuler = pane.addBinding(params, 'euler', {
     view: 'rotation',
     rotationMode: 'euler',
     order: 'XYZ', // Extrinsic rotation order. optional, 'XYZ' by default
     unit: 'deg', // or 'rad' or 'turn'. optional, 'rad' by default
   });
 
   // quaternion
-  const guiQuat = pane.addInput(params, 'quat', {
+  const guiQuat = pane.addBinding(params, 'quat', {
     view: 'rotation',
     rotationMode: 'quaternion', // optional, 'quaternion' by default
     picker: 'inline', // or 'popup'. optional, 'popup' by default

index.html

@@ -83,15 +83,15 @@ <h1 id="title"><span id="namespace">@0b5vr/</span>tweakpane-plugin-rotation</h1>
 }
 
 // euler
-const guiEuler = pane.addInput(params, 'euler', {
+const guiEuler = pane.addBinding(params, 'euler', {
   view: 'rotation',
   rotationMode: 'euler',
   order: 'XYZ', // Extrinsic rotation order. optional, 'XYZ' by default
   unit: 'deg', // or 'rad' or 'turn'. optional, 'rad' by default
 });
 
 // quaternion
-const guiQuat = pane.addInput(params, 'quat', {
+const guiQuat = pane.addBinding(params, 'quat', {
   view: 'rotation',
   rotationMode: 'quaternion', // optional, 'quaternion' by default
   picker: 'inline', // or 'popup'. optional, 'popup' by default
@@ -109,11 +109,12 @@ <h1 id="title"><span id="namespace">@0b5vr/</span>tweakpane-plugin-rotation</h1>
     </main>
 
     <script src="https://unpkg.com/three@0.137.0"></script>
-    <script src="https://unpkg.com/tweakpane@3.0.7"></script>
     <script src="https://www.unpkg.com/codemirror@5.62.3/lib/codemirror.js"></script>
     <script src="https://www.unpkg.com/codemirror@5.62.3/mode/javascript/javascript.js"></script>
-    <script src="./dist/tweakpane-plugin-rotation.js"></script>
-    <script>
+    <script type="module">
+      import * as Tweakpane from 'https://unpkg.com/tweakpane@4.0.1/dist/tweakpane.js';
+      import * as TweakpaneRotationInputPlugin from './dist/tweakpane-plugin-rotation.js';
+
       const pane = new Tweakpane.Pane();
 
       pane.registerPlugin( TweakpaneRotationInputPlugin );
@@ -123,13 +124,13 @@ <h1 id="title"><span id="namespace">@0b5vr/</span>tweakpane-plugin-rotation</h1>
         sphere: { x: 0.24, y: 0.13, z: -0.23, w: 0.93 },
       };
 
-      const guiTitle = pane.addInput( params, 'title', {
+      const guiTitle = pane.addBinding( params, 'title', {
         view: 'rotation',
         rotationMode: 'euler',
         unit: 'deg',
       } );
 
-      const guiSphere = pane.addInput( params, 'sphere', {
+      const guiSphere = pane.addBinding( params, 'sphere', {
         view: 'rotation',
         picker: 'inline',
         expanded: true,

package.json

@@ -1,31 +1,26 @@
 {
   "name": "@0b5vr/tweakpane-plugin-rotation",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "3D rotation input plugin for Tweakpane",
   "main": "dist/tweakpane-plugin-rotation.js",
-  "types": "types/index.d.ts",
+  "type": "module",
+  "types": "dist/types/index.d.ts",
   "author": "0b5vr",
   "license": "MIT",
   "files": [
-    "/dist/",
-    "/ts*/",
-    "/types/",
-    "/LICENSE",
-    "/package.json",
-    "/README.md"
+    "dist"
   ],
   "scripts": {
     "prepare": "run-s clean build",
-    "version": "yarn build",
-    "start": "npm run watch",
-    "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/ types/ ts*/",
+    "prepublishOnly": "npm test",
+    "start": "run-p watch server",
+    "test": "eslint --ext .ts \"src/**/*.ts\"",
+    "clean": "rimraf 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",
-    "build:types": "tsc --declaration --declarationDir ./types --emitDeclarationOnly && downlevel-dts types ts3.4/types",
+    "server": "http-server -c-1 -o /index.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"
@@ -35,25 +30,25 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "@tweakpane/core": "^1.0.8",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@tweakpane/core": "^2.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "autoprefixer": "^10.2.4",
-    "downlevel-dts": "^0.7.0",
-    "eslint": "^7.20.0",
+    "eslint": "^8.46.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "node-sass": "^6.0.0",
+    "http-server": "^14.1.1",
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
     "postcss": "^8.2.6",
     "rimraf": "^3.0.2",
     "rollup": "^2.39.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-terser": "^7.0.2",
-    "tweakpane": "^3.0.7",
-    "typescript": "^4.1.5"
+    "sass": "^1.49.9",
+    "tweakpane": "^4.0.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "tweakpane": "^3.0.7"
+    "tweakpane": "^4.0.0"
   }
 }

rollup.config.js

@@ -1,17 +1,17 @@
+/* eslint-env node */
+
 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';
-import NodeSass from 'node-sass';
 import Postcss from 'postcss';
 import Cleanup from 'rollup-plugin-cleanup';
 import {terser as Terser} from 'rollup-plugin-terser';
-
-import Package from './package.json';
+import Sass from 'sass';
 
 async function compileCss() {
-	const css = NodeSass.renderSync({
+	const css = Sass.renderSync({
 		file: 'src/sass/plugin.scss',
 		outputStyle: 'compressed',
 	}).css.toString();
@@ -24,16 +24,17 @@ 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'
+				}
+			]
+		}),
+		Typescript({
+			tsconfig: 'src/tsconfig.json'
 		}),
-		Typescript(),
 		nodeResolve(),
 		Replace({
 			__css__: css,
@@ -63,11 +64,10 @@ export default async () => {
 		external: ['tweakpane'],
 		output: {
 			file: `dist/${distName}${postfix}.js`,
-			format: 'umd',
+			format: 'esm',
 			globals: {
 				tweakpane: 'Tweakpane',
 			},
-			name: 'TweakpaneRotationInputPlugin',
 		},
 		plugins: getPlugins(css, production),
 

src/Euler.ts

@@ -1,9 +1,9 @@
-import { Quaternion } from './Quaternion';
-import { Rotation } from './Rotation';
-import { clamp } from './utils/clamp';
-import { sanitizeAngle } from './utils/sanitizeAngle';
-import type { EulerOrder } from './EulerOrder';
-import type { EulerUnit } from './EulerUnit';
+import { Quaternion } from './Quaternion.js';
+import { Rotation } from './Rotation.js';
+import { clamp } from './utils/clamp.js';
+import { sanitizeAngle } from './utils/sanitizeAngle.js';
+import type { EulerOrder } from './EulerOrder.js';
+import type { EulerUnit } from './EulerUnit.js';
 
 export class Euler extends Rotation {
   public static fromQuaternion( quat: Quaternion, order: EulerOrder, unit: EulerUnit ): Euler {

src/PointProjector.ts

@@ -1,4 +1,4 @@
-import { Vector3 } from './Vector3';
+import { Vector3 } from './Vector3.js';
 
 export class PointProjector {
   public offset: [ number, number, number ];

src/Quaternion.ts

@@ -1,8 +1,8 @@
-import { Euler } from './Euler';
-import { EulerOrder } from './EulerOrder';
-import { EulerUnit } from './EulerUnit';
-import { Rotation } from './Rotation';
-import { Vector3 } from './Vector3';
+import { Euler } from './Euler.js';
+import { EulerOrder } from './EulerOrder.js';
+import { EulerUnit } from './EulerUnit.js';
+import { Rotation } from './Rotation.js';
+import { Vector3 } from './Vector3.js';
 
 export class Quaternion extends Rotation {
   public static fromAxisAngle( axis: Vector3, angle: number ): Quaternion {

src/QuaternionAssembly.ts

@@ -1,5 +1,5 @@
-import { Quaternion } from './Quaternion';
-import type { PointNdAssembly } from '@tweakpane/core/dist/cjs/input-binding/common/model/point-nd';
+import { Quaternion } from './Quaternion.js';
+import type { PointNdAssembly } from '@tweakpane/core/dist/input-binding/common/model/point-nd.js';
 
 export const QuaternionAssembly: PointNdAssembly<Quaternion> = {
   toComponents: ( r: Quaternion ) => [

src/Rotation.ts

@@ -1,7 +1,7 @@
-import { Euler } from './Euler';
-import { EulerOrder } from './EulerOrder';
-import { EulerUnit } from './EulerUnit';
-import { Quaternion } from './Quaternion';
+import { Euler } from './Euler.js';
+import { EulerOrder } from './EulerOrder.js';
+import { EulerUnit } from './EulerUnit.js';
+import { Quaternion } from './Quaternion.js';
 
 export abstract class Rotation {
   public abstract get quat(): Quaternion;

src/RotationInputController.ts

@@ -1,9 +1,10 @@
 import { Controller, Foldable, PointNdTextController, PopupController, Value, ViewProps, bindFoldable, connectValues, findNextTarget, forceCast, supportsTouch } from '@tweakpane/core';
-import { RotationInputGizmoController } from './RotationInputGizmoController';
-import { RotationInputSwatchController } from './RotationInputSwatchController';
-import { RotationInputView } from './RotationInputView';
-import type { Rotation } from './Rotation';
-import type { RotationInputControllerConfig } from './RotationInputControllerConfig';
+import { RotationInputGizmoController } from './RotationInputGizmoController.js';
+import { RotationInputSwatchController } from './RotationInputSwatchController.js';
+import { RotationInputView } from './RotationInputView.js';
+import type { PointNdAssembly } from '@tweakpane/core';
+import type { Rotation } from './Rotation.js';
+import type { RotationInputControllerConfig } from './RotationInputControllerConfig.js';
 
 export class RotationInputController implements Controller<RotationInputView> {
   public readonly value: Value<Rotation>;
@@ -35,7 +36,7 @@ export class RotationInputController implements Controller<RotationInputView> {
     buttonElem.addEventListener( 'click', this.onButtonClick_ );
 
     this.textC_ = new PointNdTextController( doc, {
-      assembly: config.assembly as any, // TODO: resolve type puzzle
+      assembly: config.assembly as unknown as PointNdAssembly<Rotation>, // TODO: resolve type puzzle
       axes: config.axes,
       parser: config.parser,
       value: this.value,
@@ -72,11 +73,11 @@ export class RotationInputController implements Controller<RotationInputView> {
       this.view.element.appendChild( this.popC_.view.element );
       this.popC_.view.element.appendChild( gizmoC.view.element );
 
-      connectValues( {
+      connectValues<any, any>( {
         primary: this.foldable_.value( 'expanded' ),
         secondary: this.popC_.shows,
-        forward: ( p ) => p.rawValue,
-        backward: ( _, s ) => s.rawValue,
+        forward: ( p ) => p,
+        backward: ( _, s ) => s,
       } );
     } else if ( this.view.pickerElement ) {
       this.view.pickerElement.appendChild( this.gizmoC_.view.element );

src/RotationInputControllerConfig.ts

@@ -1,10 +1,10 @@
-import type { Euler } from './Euler';
+import type { Euler } from './Euler.js';
 import type { Parser, PickerLayout, Value, ViewProps } from '@tweakpane/core';
-import type { PointNdAssembly } from '@tweakpane/core/dist/cjs/input-binding/common/model/point-nd';
-import type { Quaternion } from './Quaternion';
-import type { Rotation } from './Rotation';
-import type { RotationInputAxis } from './RotationInputAxis';
-import type { RotationInputRotationMode } from './RotationInputRotationMode';
+import type { PointNdAssembly } from '@tweakpane/core/dist/input-binding/common/model/point-nd.js';
+import type { Quaternion } from './Quaternion.js';
+import type { Rotation } from './Rotation.js';
+import type { RotationInputAxis } from './RotationInputAxis.js';
+import type { RotationInputRotationMode } from './RotationInputRotationMode.js';
 
 export interface RotationInputControllerConfig {
   axes: RotationInputAxis[];

src/RotationInputGizmoController.ts

@@ -1,12 +1,12 @@
 import { Controller, PointerData, PointerHandler, PointerHandlerEvents, Value, ViewProps, createValue, getHorizontalStepKeys, getStepForKey, getVerticalStepKeys, isArrowKey } from '@tweakpane/core';
-import { Quaternion } from './Quaternion';
-import { Rotation } from './Rotation';
-import { RotationInputGizmoView } from './RotationInputGizmoView';
-import { Vector3 } from './Vector3';
-import { iikanjiEaseout } from './utils/iikanjiEaseout';
-import { linearstep } from './utils/linearstep';
-import { sanitizeAngle } from './utils/sanitizeAngle';
-import type { RotationInputGizmoControllerConfig } from './RotationInputGizmoControllerConfig';
+import { Quaternion } from './Quaternion.js';
+import { Rotation } from './Rotation.js';
+import { RotationInputGizmoView } from './RotationInputGizmoView.js';
+import { Vector3 } from './Vector3.js';
+import { iikanjiEaseout } from './utils/iikanjiEaseout.js';
+import { linearstep } from './utils/linearstep.js';
+import { sanitizeAngle } from './utils/sanitizeAngle.js';
+import type { RotationInputGizmoControllerConfig } from './RotationInputGizmoControllerConfig.js';
 
 const INV_SQRT2 = 1.0 / Math.sqrt( 2.0 );
 const VEC3_XP = new Vector3( 1.0, 0.0, 0.0 );

src/RotationInputGizmoControllerConfig.ts

@@ -1,5 +1,5 @@
 import type { PickerLayout, Value, ViewProps } from '@tweakpane/core';
-import type { Rotation } from './Rotation';
+import type { Rotation } from './Rotation.js';
 
 export interface RotationInputGizmoControllerConfig {
   value: Value<Rotation>;

src/RotationInputGizmoView.ts

@@ -1,12 +1,12 @@
 import { ClassName, SVG_NS, Value, View } from '@tweakpane/core';
-import { PointProjector } from './PointProjector';
-import { Quaternion } from './Quaternion';
-import { SVGLineStrip } from './SVGLineStrip';
-import { Vector3 } from './Vector3';
-import { createArcRotation } from './createArcRotation';
-import { createArcVerticesArray } from './createArcVerticesArray';
-import type { Rotation } from './Rotation';
-import type { RotationInputGizmoViewConfig } from './RotationInputGizmoViewConfig';
+import { PointProjector } from './PointProjector.js';
+import { Quaternion } from './Quaternion.js';
+import { SVGLineStrip } from './SVGLineStrip.js';
+import { Vector3 } from './Vector3.js';
+import { createArcRotation } from './createArcRotation.js';
+import { createArcVerticesArray } from './createArcVerticesArray.js';
+import type { Rotation } from './Rotation.js';
+import type { RotationInputGizmoViewConfig } from './RotationInputGizmoViewConfig.js';
 
 const className = ClassName( 'rotationgizmo' );
 

src/RotationInputGizmoViewConfig.ts

@@ -1,5 +1,5 @@
 import type { PickerLayout, Value, ViewProps } from '@tweakpane/core';
-import type { Rotation } from './Rotation';
+import type { Rotation } from './Rotation.js';
 
 export interface RotationInputGizmoViewConfig {
   value: Value<Rotation>;