diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c83b259..6764e70 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -13,7 +13,7 @@ jobs:
strategy:
matrix:
- node-version: [14.x, 16.x, 18.x, 20.x]
+ node-version: [16.x, 18.x, 20.x, latest]
steps:
- uses: actions/checkout@v3
@@ -25,8 +25,4 @@ jobs:
- run: npm install
- run: npm run build --if-present
- run: npm test
-
- - name: Upload coverage reports to Codecov
- uses: codecov/codecov-action@v3
- env:
- CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
\ No newline at end of file
diff --git a/README.md b/README.md
index 33838b5..2e28b8a 100644
--- a/README.md
+++ b/README.md
@@ -9,27 +9,41 @@ A Tweakpane plugin for importing files.
+> [!WARNING]
+>
+> The version `1.0.0` and upwards of this package
+> only supports `Tweakpane v4`.
+>
+> If you are still using `Tweakpane v3`,
+> **you can only use the `v0` of this package**.
+>
+>
+> You can install it.
+>
+> ```sh
+> npm i tweakpane-plugin-file-import@0.1.4
+> ```
+>
+> And use it like so.
+>
+> ```html
+>
+>
+>
+> ```
+
+
# Installation
-You need [Tweakpane](https://github.com/cocopon/tweakpane) to install this plugin.
+You need [Tweakpane `v4`](https://github.com/cocopon/tweakpane) to install this plugin.
You may use https://unpkg.com/tweakpane-plugin-file-import to get the latest version
and add it as a `
-
-
-```
-
-## Package
-
-Alternatively, you can install with `npm`:
+You can install with `npm`:
```sh
npm i tweakpane-plugin-file-import
@@ -45,6 +59,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.
@@ -54,6 +73,7 @@ const params = {
file: '',
};
+// If you're using Tweakpane v3 -------
pane
.addInput(params, 'file', {
view: 'file-input',
@@ -64,6 +84,17 @@ pane
console.log(ev.value);
});
+// If you're using Tweakpane v4 -------
+pane
+ .addBinding(params, 'file', {
+ view: 'file-input',
+ lineCount: 3,
+ filetypes: ['.png', '.jpg'],
+ })
+ .on('change', (ev) => {
+ console.log(ev.value);
+ });
+
```
### Optional parameters
@@ -77,20 +108,25 @@ pane
## Contributing
-If you want to contribute to this package, you are free to open a pull request.
+If you want to contribute to this package, you are free to open a pull request. 😊
### Quickstart
+> [!NOTE]
+>
+> You'll need to have `Node 16` or upwards installed
+> in order to properly install and run `package.json` script commands.
+
Install dependencies:
```sh
npm install
```
-To build the source codes and watch changes, run:
+To build the source code and watch changes, run:
```sh
-npm watch
+npm start
```
After this, simply open `test/browser.html` to see the results.
diff --git a/package.json b/package.json
index 8fc24ba..9951d82 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-replace": "^5.0.5",
- "@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-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": "^2.0.1",
+ "@typescript-eslint/eslint-plugin": "^6.14.0",
+ "@typescript-eslint/parser": "6.14.0",
"autoprefixer": "^10.2.4",
- "eslint": "^8.42.0",
- "eslint-config-prettier": "^9.0.0",
+ "eslint": "^8.46.0",
+ "eslint-config-prettier": "^9.1.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",
+ "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",
- "rimraf": "^5.0.5",
+ "prettier": "^3.1.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..394c541 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 {
+.#{tp.$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;
}
@@ -25,7 +25,7 @@
// 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;
display: inline-block;
@@ -45,7 +45,7 @@
}
&_frac {
- background-color: var(--in-fg);
+ background-color: tp.cssVar('input-fg');
border-radius: 1px;
height: 2px;
left: 50%;
@@ -99,6 +99,6 @@
}
// Styles for the button
-.#{$prefix}-btnv_b {
+.#{tp.$prefix}-btnv_b {
margin-top: 10px;
}
diff --git a/src/view/view.ts b/src/view/view.ts
index 198fd09..27f303a 100644
--- a/src/view/view.ts
+++ b/src/view/view.ts
@@ -36,7 +36,7 @@ export class FilePluginView implements View {
// Create container and children
this.container = doc.createElement('div');
- this.container.style.height = `calc(var(--bld-us) * ${config.lineCount})`;
+ this.container.style.height = `calc(20px * ${config.lineCount})`;
this.container.classList.add(containerClassName());
this.element.appendChild(this.container);
diff --git a/test/browser.html b/test/browser.html
index 72434e4..42089e4 100644
--- a/test/browser.html
+++ b/test/browser.html
@@ -5,19 +5,20 @@
-
-
-