Deploying to gh-pages from @ a7acf17 🚀

README.md

@@ -40,7 +40,7 @@ gui.add(s, 'someFunction');
 
 produces
 
-<img src="./images/muigui-screenshot.png" style="max-width: 250px">
+<img src="./images/muigui-screenshot.png" width="250">
 
 ## 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,15 +268,55 @@ 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
   it's a color. So in the end only 2 of the 5 would work without
   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
 

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;
+      }
+    });
+  });
+}

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);
+  }
+});
+

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});

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');

index.html

@@ -661,6 +661,7 @@ <h2>Form Theme:</h2>
   pointer-events: none;
 }
 #forkongithub a {
+    pointer-events: initial;
     background: #000;
     color: #fff;
     text-decoration: none;

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",