From 87ee5333151a1266587e55e334e293796996f3a0 Mon Sep 17 00:00:00 2001 From: LuchoTurtle Date: Sun, 10 Dec 2023 23:57:04 +0000 Subject: [PATCH 01/12] chore: Making changes for v4. --- package.json | 52 +++++++++++++++--------------------- rollup.config.js | 21 +++------------ src/controller/controller.ts | 2 +- src/index.ts | 4 ++- src/plugin.ts | 19 +++++-------- src/sass/plugin.scss | 8 +++--- test/browser.html | 9 ++++--- test/test-util.ts | 6 ----- 8 files changed, 46 insertions(+), 75 deletions(-) delete mode 100644 test/test-util.ts diff --git a/package.json b/package.json index 3b67e3f..50616ec 100644 --- a/package.json +++ b/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-alias": "^3.1.2", + "@rollup/plugin-node-resolve": "^13.0.0", "@rollup/plugin-replace": "^2.4.1", - "@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-typescript": "^8.2.0", + "@tweakpane/core": "^2.0.1", + "@typescript-eslint/eslint-plugin": "^5.62.0", + "@typescript-eslint/parser": "^5.62.0", "autoprefixer": "^10.2.4", - "eslint": "^8.42.0", - "eslint-config-prettier": "^9.0.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", + "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", - "nyc": "^15.1.0", "onchange": "^7.1.0", "postcss": "^8.2.6", - "prettier": "3.1.0", - "release-it": "^17.0.0", + "prettier": "^2.2.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" + } } diff --git a/rollup.config.js b/rollup.config.js index e4386e9..219ed34 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', }, ], }), @@ -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), diff --git a/src/controller/controller.ts b/src/controller/controller.ts index f410432..cad891f 100644 --- a/src/controller/controller.ts +++ b/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; diff --git a/src/index.ts b/src/index.ts index 43ec897..acbcda8 100644 --- a/src/index.ts +++ b/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]; diff --git a/src/plugin.ts b/src/plugin.ts index 0cc28bc..59730b6 100644 --- a/src/plugin.ts +++ b/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,16 +19,12 @@ 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) { if (typeof exValue !== 'string') { // Return null to deny the user input @@ -36,14 +32,13 @@ export const TweakpaneFileInputPlugin: InputBindingPlugin< } // Parse parameters object - const p = ParamsParsers; - const result = parseParams(params, { + const result = parseRecord(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, }); }, -}; +}); diff --git a/src/sass/plugin.scss b/src/sass/plugin.scss index 489a566..d8ad7b0 100644 --- a/src/sass/plugin.scss +++ b/src/sass/plugin.scss @@ -1,10 +1,10 @@ // Import core styles -@import '../../node_modules/@tweakpane/core/lib/sass/plugin'; +@use '../../node_modules/@tweakpane/core/lib/sass/tp'; // Styles for the container .#{$prefix}-ctnv { // Extend a general input view style - @extend %input; + @extend %tp-input; cursor: pointer; display: flex; @@ -17,7 +17,7 @@ -webkit-border-radius: 5px; border-radius: 5px; - &.#{$prefix}-v-disabled { + &.#{tp.$disabled} { opacity: 0.5; } @@ -99,6 +99,6 @@ } // Styles for the button -.#{$prefix}-btnv_b { +.#{tp.$prefix}-btnv_b { margin-top: 10px; } diff --git a/test/browser.html b/test/browser.html index 72434e4..3ca82d3 100644 --- a/test/browser.html +++ b/test/browser.html @@ -5,9 +5,10 @@ - - - + + - - -``` - -## Package - -Alternatively, you can install with `npm`: +You can install with `npm`: ```sh npm i tweakpane-plugin-file-import @@ -59,6 +44,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. diff --git a/test/browser.html b/test/browser.html index 3ca82d3..42089e4 100644 --- a/test/browser.html +++ b/test/browser.html @@ -6,13 +6,13 @@ +> +> +> ``` + + # Installation You need [Tweakpane `v4`](https://github.com/cocopon/tweakpane) to install this plugin. @@ -16,24 +43,12 @@ You need [Tweakpane `v4`](https://github.com/cocopon/tweakpane) to install this You may use https://unpkg.com/tweakpane-plugin-file-import to get the latest version and add it as a `