From 20176ebc8924096d117c05696f12946f8bb1a2c5 Mon Sep 17 00:00:00 2001 From: greggman Date: Mon, 4 Dec 2023 19:15:58 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20greggman?= =?UTF-8?q?/muigui@a7acf174f3553ce52faee668d220d25caade8eb9=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 53 +++++++++++++++++++++++++++++++++++--- build/copy.js | 47 +++++++++++++++++++++++++++++++++ build/prep-for-deploy.js | 18 +++++++++++++ build/serve.js | 49 ++--------------------------------- dist/0.x/muigui.js | 2 +- dist/0.x/muigui.module.js | 2 +- examples/js/index/index.js | 2 +- index.html | 1 + package-lock.json | 4 +-- package.json | 8 +++--- 10 files changed, 126 insertions(+), 60 deletions(-) create mode 100644 build/copy.js diff --git a/README.md b/README.md index 4c7410f..bbd232d 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ gui.add(s, 'someFunction'); produces - + ## Why @@ -213,6 +213,8 @@ into using tweakpane and it doesn't meet my needs as of v4.0.0. Examples below So, I thought I'd try to write a library that handled that case. +## Exploration + I also wanted to explore various things though many of them have not made it into muigui yet. @@ -266,7 +268,15 @@ have not made it into muigui yet. gui.add(s); ``` - At the moment that won't work. `someNumber` could only become + You could implement that like this + + ```js + for (const key of Object.keys(s)) { + gui.add(s, key); + } + ``` + + But that won't work. `someNumber` could only become a `TextNumber` because there's no range. `someOption` would only become a `Text` because there's no info that it's an enum. `someColor` would become a `Text` because there's no info that @@ -274,7 +284,39 @@ have not made it into muigui yet. having to provide more info. It's not clear in JS that adding that info would be a win - for keeping it simple but it sure would be nice. + for keeping it simple but it sure would be nice. I've thought + about passing a second object with options. The simplest version + would be something like this + + ```js + const s = { + someNumber: 123, + someString: 'hello', + someOption: 'dog', + someColor: '#ED3281', + someFunction: () => console.log('called') + }; + const argsByName: { + someNumber: [{ min: 1, max: 200 }], + someOption: [['cat', 'bird', 'dog']], + someColor: [{type: 'color'}], + }; + addObject(s, argsByName) { + for (const key of Object.keys(s)) { + gui.add(s, key, ...(argsByName[key] || []); + } + } + ``` + + But that's not really what you get from a typed system. + In a typed system, the fact that `someOption` is an enum + is known from its type. Similar that `someColor` is a + a color is known from it's type. `someNumber` is still + problematic because it needs a range which is probably + not part of its type. + + In any case, I'd be nice to find a way to get an + instant UI like C#/Unity does. * ## Modularity @@ -389,12 +431,15 @@ some hidden gui state like whether or not a folder is expanded. You still run into the issue though that the data being edited might not be easily serializable so you'd have to find another solution. +To put it another way, it's not the responsibility of a UI library +to serialize. + ## Future I'm under sure how much time I'll continue to put into this. I get the feeling other people are far more motivated to make UIs. Maybe if I'm lucky they'll take some inspiration from -the thoughts above and I'll find they've covered it all. +the thoughts and ideas above and I'll find they've covered it all. ## License diff --git a/build/copy.js b/build/copy.js new file mode 100644 index 0000000..ce3b9e8 --- /dev/null +++ b/build/copy.js @@ -0,0 +1,47 @@ +import path from 'path'; +import fsPromise from 'fs/promises'; +import chokidar from 'chokidar'; + +export function copy({watch, transformFn = v => v}) { + return new Promise(resolve => { + const outDir = 'out'; + + async function copyFile(srcFilename) { + const dstFilename = path.join(outDir, srcFilename); + const dirname = path.dirname(dstFilename); + try { + await fsPromise.stat(dirname); + } catch { + await fsPromise.mkdir(dirname, { recursive: true }); + } + console.log('copy', srcFilename, '->', dstFilename); + const src = await fsPromise.readFile(srcFilename); + const dst = transformFn(src, srcFilename, dstFilename); + await fsPromise.writeFile(dstFilename, dst); + } + + chokidar.watch('.', { + ignored: [ + '.git', + 'node_modules', + 'build', + 'out', + 'src', + 'dist', + '**/.*', + ], + }).on('all', (event, path) => { + switch (event) { + case 'add': + case 'change': + copyFile(path); + break; + case 'ready': + if (!watch) { + resolve(); + } + break; + } + }); + }); +} \ No newline at end of file diff --git a/build/prep-for-deploy.js b/build/prep-for-deploy.js index e87158a..e27ecbe 100644 --- a/build/prep-for-deploy.js +++ b/build/prep-for-deploy.js @@ -3,7 +3,25 @@ import path from 'path'; import * as url from 'url'; const dirname = url.fileURLToPath(new URL('.', import.meta.url)); + const ignoreFilename = path.join(dirname, '..', '.gitignore'); const ignore = fs.readFileSync(ignoreFilename, {encoding: 'utf8'}); const newIgnore = ignore.replace(/# -- clip-for-deploy-start --[\s\S]*?# -- clip-for-deploy-end --/, ''); fs.writeFileSync(ignoreFilename, newIgnore); + +const version = parseInt(JSON.parse(fs.readFileSync('package.json', {encoding: 'utf8'})).version); + +function transformJS(src) { + return src.replace(/'.*?';\s+\/\*\s+muigui-include\s+\*\//g, `'/dist/${version}.x/muigui.module.js';`); +} + +[ + 'examples/js/index/index.js', +].forEach(filename => { + const src = fs.readFileSync(filename, {encoding: 'utf8'}); + const dst = transformJS(src); + if (src !== dst) { + fs.writeFileSync(filename, dst); + } +}); + diff --git a/build/serve.js b/build/serve.js index db9e638..25e04ca 100644 --- a/build/serve.js +++ b/build/serve.js @@ -1,7 +1,5 @@ -import path from 'path'; -import fsPromise from 'fs/promises'; import {spawn} from 'child_process'; -import chokidar from 'chokidar'; +import {copy} from './copy.js'; spawn('./node_modules/.bin/tsc', [ '--watch', @@ -17,47 +15,4 @@ spawn('./node_modules/.bin/servez', [ stdio: 'inherit', }); -const ignoreFns = [ - fn => fn.startsWith('.git'), - fn => fn.startsWith('node_modules'), - fn => fn.startsWith('build'), - fn => fn.startsWith('out'), - fn => fn.startsWith('src'), - fn => fn.startsWith('dist'), - fn => fn.startsWith('.'), -]; - -function ignore(fn) { - for (const ignoreFn of ignoreFns) { - if (ignoreFn(fn)) { - return true; - } - } - return false; -} - -const outDir = 'out'; - -async function copyFile(srcFilename) { - const dstFilename = path.join(outDir, srcFilename); - const dirname = path.dirname(dstFilename); - try { - await fsPromise.stat(dirname); - } catch { - await fsPromise.mkdir(dirname, { recursive: true }); - } - console.log('copy', srcFilename, '->', dstFilename); - await fsPromise.copyFile(srcFilename, dstFilename); -} - -chokidar.watch('.').on('all', (event, path) => { - switch (event) { - case 'add': - case 'change': - if (ignore(path)) { - return; - } - copyFile(path); - break; - } -}); +copy({watch: true}); diff --git a/dist/0.x/muigui.js b/dist/0.x/muigui.js index b756fae..6883404 100644 --- a/dist/0.x/muigui.js +++ b/dist/0.x/muigui.js @@ -1,4 +1,4 @@ -/* muigui@0.0.14, license MIT */ +/* muigui@0.0.15, license MIT */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : diff --git a/dist/0.x/muigui.module.js b/dist/0.x/muigui.module.js index 4ca797e..468c4af 100644 --- a/dist/0.x/muigui.module.js +++ b/dist/0.x/muigui.module.js @@ -1,4 +1,4 @@ -/* muigui@0.0.14, license MIT */ +/* muigui@0.0.15, license MIT */ var css = { default: ` .muigui { diff --git a/examples/js/index/index.js b/examples/js/index/index.js index 2620286..358cabb 100644 --- a/examples/js/index/index.js +++ b/examples/js/index/index.js @@ -2,7 +2,7 @@ import * as twgl from '../../3rdParty/twgl-full.module.js'; import VSAEffect from './VSAEffect.js'; import effects from './effects.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars -import GUI, { helpers, Direction, TextNumber } from '../../../src/esm.js'; +import GUI, { helpers, Direction, TextNumber } from '/dist/0.x/muigui.module.js'; const canvas = document.querySelector('#bg'); const gl = canvas.getContext('webgl'); diff --git a/index.html b/index.html index c60e30d..1532635 100644 --- a/index.html +++ b/index.html @@ -661,6 +661,7 @@

Form Theme:

pointer-events: none; } #forkongithub a { + pointer-events: initial; background: #000; color: #fff; text-decoration: none; diff --git a/package-lock.json b/package-lock.json index bc77080..9cc52d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "muigui", - "version": "0.0.14", + "version": "0.0.15", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "muigui", - "version": "0.0.14", + "version": "0.0.15", "license": "MIT", "devDependencies": { "@rollup/plugin-node-resolve": "^15.0.1", diff --git a/package.json b/package.json index d288459..feeca95 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "muigui", - "version": "0.0.14", + "version": "0.0.15", "description": "A Simple GUI", - "main": "muigui.js", - "module": "src/muigui.js", + "main": "dist/0.x/muigui.js", + "module": "dist/0.x/muigui-module.js", "type": "module", "scripts": { "build": "npm run build-normal", @@ -33,7 +33,7 @@ "url": "https://github.com/greggman/muigui/issues" }, "files": [ - "muigui.js", + "dist/**/*", "src/**/*" ], "homepage": "https://github.com/greggman/muiguiy#readme",