Updated io-gui

.eslintignore

@@ -1,2 +1 @@
-/build/**
-/node_modules/**
+/build/**

.eslintrc.json

@@ -43,6 +43,7 @@
     }]
   },
   "plugins": [
+    "html",
     "@typescript-eslint"
   ],
   "env": {

.gitignore

@@ -1,8 +1,108 @@
 .DS_Store
-.git/
-editor
-io
-p
-three-ui
-three.js
-three.js-controls
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.vscode/
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.DS_Store

index.html

@@ -77,7 +77,9 @@
     <script type="importmap">
       {
         "imports": {
-          "io-gui": "./node_modules/io-gui/build/iogui.js"
+          "io-gui": "./node_modules/io-gui/build/iogui.js",
+          "marked": "./node_modules/io-gui/node_modules/marked/lib/marked.esm.js",
+          "dompurify": "./node_modules/io-gui/node_modules/dompurify/dist/purify.es.js"
         }
       }
     </script>

package.json

@@ -19,7 +19,6 @@
   "scripts": {
     "clean": "rm -rf build && rm -rf bundle",
     "lint": "eslint src --fix",
-    "docs": "typedoc",
     "build": "yarn clean && yarn lint && tsc && rollup -c && rm -rf build && mv bundle build",
     "dev": "yarn clean && yarn lint && tsc -w"
   },
@@ -34,14 +33,16 @@
   },
   "homepage": "https://akirodic.com",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.34.0",
-    "@typescript-eslint/parser": "^5.34.0",
-    "io-gui": "1.3.4",
-    "eslint": "^8.22.0",
-    "rollup": "^2.78.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@types/gtag.js": "^0.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-plugin-html": "^7.1.0",
+    "io-gui": "1.4.0-rc6",
+    "rollup": "^3.5.0",
     "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3"
   }
 }

rollup.config.js

@@ -2,11 +2,12 @@ import path from 'path';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import { terser } from "rollup-plugin-terser";
 
-const externals = [];
+function makeBundleTarget(src, target, externals = [], debug) {
+
+  externals.forEach(function(part, index) {
+    externals[index] = path.resolve(externals[index]);
+  });
 
-function makeBundleTarget(src, target) {
-  const _externals = [...externals];
-  externals.push(path.resolve(src));
   return {
     input: src,
     plugins: [
@@ -16,14 +17,14 @@ function makeBundleTarget(src, target) {
         keep_fnames: true,
       })
     ],
-    treeshake: false,
-    inlineDynamicImports: true,
+    treeshake: true,
     output: [{
+      inlineDynamicImports: true,
       format: 'es',
       file: target,
       indent: '  '
     }],
-    external: _externals,
+    external: externals,
     onwarn: (warning, warn) => {
       if (warning.code === 'THIS_IS_UNDEFINED') return;
       warn(warning);

src/index.ts

@@ -1,32 +1,32 @@
 export * from 'io-gui';
-import { IoStorage as $, IoSelectorTabs, RegisterIoElement, Property, Options, Item, Path } from 'io-gui';
+import { IoStorage as $, IoNavigator, RegisterIoElement, Property, MenuOptions } from 'io-gui';
 
-const OPTIONS = new Options([
-  new Item('About'),
-  new Item({value: 'Projects', options: new Options([
+const OPTIONS = new MenuOptions([
+  'About',
+  {value: 'Projects', options: [
     'WebGL Jellyfish',
     'Dreams of Black',
     'Daily Routines',
     'Flux Factory',
     'Just Reflector',
     'Star Wars 1313',
     'TED Installation'
-  ])}),
-  new Item('Contact')
+  ]},
+  'Contact'
 ], {
-  path: new Path({string: $({key: 'page', storage: 'hash', value: 'About'})}),
-});
+  path: $({key: 'path', storage: 'hash', value: 'About'}),
+} as any);
 
 @RegisterIoElement
-export class IoMainPage extends IoSelectorTabs {
+export class IoMainPage extends IoNavigator {
 
-  @Property(true)
-  declare precache: boolean;
+  // @Property(true)
+  // declare precache: boolean;
 
   @Property({value: OPTIONS})
-  declare options: string;
+  declare options: MenuOptions;
 
-  @Property(OPTIONS.path.bind('root'))
+  @Property(OPTIONS.bind('first'))
   declare selected: string;
 
   @Property('main')
@@ -37,25 +37,27 @@ export class IoMainPage extends IoSelectorTabs {
 
   init() {
     this.elements = [
-    ['io-md-view', {name: 'About', class: 'about', path :'./docs/about.md'}],
-    ['io-selector-sidebar', {
-      name: 'Projects',
-      precache: true,
+    ['io-md-view', {id: 'About', class: 'about', src :'./docs/about.md'}],
+    ['io-navigator', {
+      id: 'Projects',
+
+      // precache: true,
+
+      menu: 'left',
       class: 'projects',
       vertical: true,
-      selected: OPTIONS.option('Projects').path.bind('leaf'),
-      options: OPTIONS.option('Projects').options,
+      options: OPTIONS.getItem('Projects').options,
       elements: [
-        ['io-md-view', {name: 'WebGL Jellyfish', path :'./docs/archive/webgl-jellyfish.md'}],
-        ['io-md-view', {name: 'Dreams of Black', path :'./docs/archive/rome.md'}],
-        ['io-md-view', {name: 'Daily Routines', path :'./docs/archive/daily-routines.md'}],
-        ['io-md-view', {name: 'Flux Factory', path :'./docs/archive/flux-factory.md'}],
-        ['io-md-view', {name: 'Just Reflector', path :'./docs/archive/just-a-reflector.md'}],
-        ['io-md-view', {name: 'Star Wars 1313', path :'./docs/archive/star-wars-1313.md'}],
-        ['io-md-view', {name: 'TED Installation', path :'./docs/archive/unnumbered-sparks.md'}],
+        ['io-md-view', {id: 'WebGL Jellyfish', src :'./docs/archive/webgl-jellyfish.md'}],
+        ['io-md-view', {id: 'Dreams of Black', src :'./docs/archive/rome.md'}],
+        ['io-md-view', {id: 'Daily Routines', src :'./docs/archive/daily-routines.md'}],
+        ['io-md-view', {id: 'Flux Factory', src :'./docs/archive/flux-factory.md'}],
+        ['io-md-view', {id: 'Just Reflector', src :'./docs/archive/just-a-reflector.md'}],
+        ['io-md-view', {id: 'Star Wars 1313', src :'./docs/archive/star-wars-1313.md'}],
+        ['io-md-view', {id: 'TED Installation', src :'./docs/archive/unnumbered-sparks.md'}],
       ]
     }],
-    ['io-md-view', {name: 'Contact', path :'./docs/contact.md'}],
+    ['io-md-view', {id: 'Contact', src :'./docs/contact.md'}],
     ];
   }
 }

tsconfig.json

@@ -35,23 +35,5 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": true
   },
-  "typedocOptions": {
-    "hideBreadcrumbs": true,
-    "hideInPageTOC": true,
-    "hideGenerator": true,
-    "hideMembersSymbol": true,
-    "excludePrivate": true,
-    "excludeProtected": true,
-    "excludeInternal": true,
-    "excludeExternals": true,
-    "cleanOutputDir": true,
-    "githubPages": false,
-    "readme": "none",
-    "gitRevision": "main",
-    "entryPoints": [
-      "src/iogui.ts"
-    ],
-    "out": "docs/tsdoc"
-  },
   "include": ["./src"]
 }