Merge pull request #121 from RationAI/feat-vanjs

Playground + new UI components

.gitignore

@@ -33,6 +33,7 @@
 #rubbish
 *.txt
 *.old
+*.temp
 .idea/
 Thumbs.db
 

CHANGELOG.md

@@ -3,6 +3,14 @@
 The changelog file describes changes made since v2.0.0, which made significant changes
 to the versions 1.x.x.
 
+### 2.2.0
+**NEW UI SYSTEM**. The UI now supports component system using Van.js library. A lightweight
+way of re-using defined components, supported newly by tailwind css. The ui will be further
+separated from the viewer core in the future.
+
+**Features:** new UI component system & developer UI tools. Server support for .mjs files - 
+support for native JS modules.
+
 ### 2.1.1
 **Features:** standalone wsi tile source module. Edge navigation optional.
 

Gruntfile.js

@@ -1,3 +1,4 @@
+const {execSync: exec} = require("child_process");
 module.exports = function(grunt) {
     // import utils first to initialize them
     require('./server/utils/grunt/utils')(grunt);
@@ -40,13 +41,18 @@ module.exports = function(grunt) {
             server: {
                 options: {
                     port: 9000,
-                    base: 'docs/build/'
+                    base: ""
                 }
             }
         },
         watch: {
-            files: [],
-            tasks: ["docs"]
+            options: {
+                livereload: true
+            },
+            components: {
+                files: ["ui/*", "./tailwind.config.js"],
+                tasks: "css"
+            }
         },
         uglify: {
 
@@ -80,6 +86,10 @@ module.exports = function(grunt) {
     grunt.registerTask('all', ["uglify"]);
     grunt.registerTask('plugins', ["uglify:plugins"]);
     grunt.registerTask('modules', ["uglify:modules"]);
+    grunt.registerTask('css', 'Generate Tailwind CSS files for usage.', function (file) {
+        grunt.log.writeln('Tailwind');
+        const result = exec('npx tailwindcss -i ./src/assets/tailwind-spec.css -o ./src/libs/tailwind.min.css --minify');
+        grunt.log.writeln(result);
+    });
     // Default task(s).
-    grunt.registerTask('default', ['env']);
 };

docs/include.js

@@ -25,14 +25,16 @@ const webglConfig = parseJsonFile('modules/webgl/include.json');
 const config = parseJsonFile('src/config.json');
 
 // add your extensions if necessary, by default all except 'js' have only extracted comments
-const allowedExtensions = ['js', 'json', 'css'];
+const allowedExtensions = ['js', 'json', 'css', 'mjs'];
 module.exports = {
     //source javascript files and README
     files: [
         ...flatten(config.js.external).map(x => `src/external/${x}`),
         ...flatten(config.js.src).map(x => `src/${x}`),
         ...flatten(webglConfig.includes).map(x => `modules/webgl/${x}`),
         'README.md',
+        'ui/components/buttons.mjs',
+        'ui/components/baseComponent.mjs',
         //other things we want to keep in docs, need @fileoverview tag, input as opts: {include: X }
         // 'src/assets/style.css',
         'src/config.json',