From d8b2ba1de375f5a8278378421d499aa518e71bde Mon Sep 17 00:00:00 2001 From: cocopon Date: Sun, 6 Aug 2023 23:15:36 +0900 Subject: [PATCH] Upgrade Tweakpane to v4-beta.2 --- .prettierrc.js | 7 ------- .prettierrc.json | 7 +++++++ package.json | 19 +++++++++++-------- rollup.config.js | 21 ++++----------------- scripts/assets-append-version.js | 14 +++++++++----- scripts/dist-name.js | 16 ++++++++++++++++ src/controller.ts | 2 +- src/index.ts | 11 +++++++++-- src/plugin.ts | 22 +++++++++------------- src/sass/plugin.scss | 16 ++++++++-------- src/tsconfig.json | 2 +- test/browser.html | 11 ++++++----- 12 files changed, 81 insertions(+), 67 deletions(-) delete mode 100644 .prettierrc.js create mode 100644 .prettierrc.json create mode 100644 scripts/dist-name.js diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 9aebbb4..0000000 --- a/.prettierrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - arrowParens: 'always', - bracketSpacing: false, - singleQuote: true, - trailingComma: 'all', - useTabs: true, -}; diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..1a0ff79 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "arrowParens": "always", + "bracketSpacing": false, + "singleQuote": true, + "trailingComma": "all", + "useTabs": true +} \ No newline at end of file diff --git a/package.json b/package.json index 8488f36..7c7ee5f 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.0.0", "description": "Plugin template for Tweakpane", "main": "dist/tweakpane-plugin-template.js", + "type": "module", "types": "dist/types/index.d.ts", "author": "cocopon", "license": "MIT", @@ -12,11 +13,11 @@ "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", @@ -25,6 +26,7 @@ "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" @@ -34,14 +36,15 @@ "@rollup/plugin-node-resolve": "^13.0.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.62.0", + "@typescript-eslint/parser": "^5.62.0", "autoprefixer": "^10.2.4", - "eslint": "^7.20.0", + "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", "onchange": "^7.1.0", "postcss": "^8.2.6", @@ -51,9 +54,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" } } diff --git a/rollup.config.js b/rollup.config.js index 0b7eb71..6b7aec7 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/scripts/assets-append-version.js b/scripts/assets-append-version.js index 811c5cc..61141dc 100644 --- a/scripts/assets-append-version.js +++ b/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/*'; diff --git a/scripts/dist-name.js b/scripts/dist-name.js new file mode 100644 index 0000000..792e8b1 --- /dev/null +++ b/scripts/dist-name.js @@ -0,0 +1,16 @@ +/* eslint-disable no-console */ +/* eslint-env node */ + +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` +const name = Package.name + .split(/[@/-]/) + .reduce((comps, comp) => (comp !== '' ? [...comps, comp] : comps), []) + .join('-'); +console.log(name); diff --git a/src/controller.ts b/src/controller.ts index fc7e0ab..feb083e 100644 --- a/src/controller.ts +++ b/src/controller.ts @@ -7,7 +7,7 @@ import { ViewProps, } from '@tweakpane/core'; -import {PluginView} from './view'; +import {PluginView} from './view.js'; interface Config { value: Value; diff --git a/src/index.ts b/src/index.ts index a060c6b..aebec14 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,11 @@ -import {TemplateInputPlugin} from './plugin'; +import {TemplateInputPlugin} from './plugin.js'; -// Export your plugin(s) as constant `plugins` +// The identifier of the plugin bundle. +export const id = 'template'; + +// This plugin template injects a compiled CSS by @rollup/plugin-replace +// See rollup.config.js for details +export const css = '__css__'; + +// Export your plugin(s) as a constant `plugins` export const plugins = [TemplateInputPlugin]; diff --git a/src/plugin.ts b/src/plugin.ts index ed1827d..d41fc3a 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -2,14 +2,14 @@ import { BaseInputParams, BindingTarget, CompositeConstraint, + createPlugin, createRangeConstraint, createStepConstraint, InputBindingPlugin, - ParamsParsers, - parseParams, + parseRecord, } from '@tweakpane/core'; -import {PluginController} from './controller'; +import {PluginController} from './controller.js'; export interface PluginInputParams extends BaseInputParams { max?: number; @@ -18,7 +18,7 @@ export interface PluginInputParams extends BaseInputParams { view: 'dots'; } -// NOTE: You can see JSDoc comments of `InputBindingPlugin` for details about each property +// NOTE: JSDoc comments of `InputBindingPlugin` can be useful to know details about each property // // `InputBindingPlugin` means... // - The plugin receives the bound value as `Ex`, @@ -29,18 +29,15 @@ export const TemplateInputPlugin: InputBindingPlugin< number, number, PluginInputParams -> = { +> = createPlugin({ id: 'input-template', // type: The plugin type. // - 'input': Input binding // - 'monitor': Monitor binding + // - 'blade': Blade without binding 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 !== 'number') { // Return null to deny the user input @@ -48,15 +45,14 @@ export const TemplateInputPlugin: 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('dots'), max: p.optional.number, min: p.optional.number, step: p.optional.number, - }); + })); if (!result) { return null; } @@ -108,4 +104,4 @@ export const TemplateInputPlugin: InputBindingPlugin< viewProps: args.viewProps, }); }, -}; +}); diff --git a/src/sass/plugin.scss b/src/sass/plugin.scss index ef4d748..e0073f8 100644 --- a/src/sass/plugin.scss +++ b/src/sass/plugin.scss @@ -1,27 +1,27 @@ // Import core styles -@import '../../node_modules/@tweakpane/core/lib/sass/plugin'; +@use '../../node_modules/@tweakpane/core/lib/sass/tp'; // Additional style for the plugin -.#{$prefix}-tmpv { +.#{tp.$prefix}-tmpv { // Extend a general input view style - @extend %input; + @extend %tp-input; cursor: pointer; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(auto-fit, 10px); - height: calc(var(--bld-us) * 3); + height: calc(#{tp.cssVar('container-unit-size')} * 3); overflow: hidden; position: relative; - &.#{$prefix}-v-disabled { + &.#{tp.$prefix}-v-disabled { opacity: 0.5; } &_text { // You can use CSS variables for styling. See declarations for details: // ../../node_modules/@tweakpane/core/lib/sass/common/_defs.scss - color: var(--in-fg); + color: tp.cssVar('input-fg'); bottom: 2px; font-size: 0.9em; @@ -37,7 +37,7 @@ text-align: center; &::before { - background-color: var(--in-fg); + background-color: tp.cssVar('input-fg'); content: ''; border-radius: 1px; height: 2px; @@ -50,7 +50,7 @@ } } &_frac { - background-color: var(--in-fg); + background-color: tp.cssVar('input-fg'); border-radius: 1px; height: 2px; left: 50%; diff --git a/src/tsconfig.json b/src/tsconfig.json index f324fce..f46494b 100644 --- a/src/tsconfig.json +++ b/src/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "lib": ["DOM", "ES2015"], - "moduleResolution": "Node", + "moduleResolution": "Node16", "strict": true, "target": "ES6" } diff --git a/test/browser.html b/test/browser.html index afa8520..8994a25 100644 --- a/test/browser.html +++ b/test/browser.html @@ -5,19 +5,20 @@ - - -