feat: UI overhaul featuring Vuetify.js (#48) (Fix #47)

* New and improved collapsible tree * Fuzzy search for components * Hot reload tree, render, and source
pangolinjs · Jul 3, 2019 · a5ea3fc · a5ea3fc
1 parent 6d76790
commit a5ea3fc
Show file tree

Hide file tree

Showing 83 changed files with 1,792 additions and 1,338 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,13 +1,6 @@
 {
   "root": true,
   "extends": [
-    "@pangolin/eslint-config",
-    "plugin:ava/recommended"
-  ],
-  "plugins": [
-    "ava"
-  ],
-  "env": {
-    "browser": true
-  }
+    "@pangolin/eslint-config"
+  ]
 }
diff --git a/.github/main.workflow b/.github/main.workflow
@@ -1,6 +1,6 @@
-workflow "Lint and test on push" {
+workflow "Test on push" {
   on = "push"
-  resolves = ["Lint CSS", "Lint JavaScript", "Unit testing"]
+  resolves = ["Lint CSS", "Lint JavaScript", "Unit testing", "Build UI"]
 }
 
 action "Install" {
@@ -25,3 +25,9 @@ action "Unit testing" {
   needs = ["Lint JavaScript", "Lint CSS"]
   args = "run test:unit"
 }
+
+action "Build UI" {
+  uses = "actions/npm@master"
+  needs = ["Unit testing"]
+  args = "run build:ui"
+}
diff --git a/lib/commands/dev.js b/lib/commands/dev.js
@@ -75,10 +75,10 @@ module.exports = async function (options) {
     })
 
     if (shouldReload) {
-      // Broadcast 'window-reload via WebSocket
+      // Broadcast reload message via WebSocket
       webSocketServer.clients.forEach(client => {
         if (client.readyState === WebSocket.OPEN) {
-          client.send('window-reload')
+          client.send('reload')
         }
       })
     }

diff --git a/lib/config/base.js b/lib/config/base.js
@@ -4,8 +4,8 @@ const path = require('path')
 const webpack = require('webpack')
 const WebpackBar = require('webpackbar')
 
-const ComponentsIndexPlugin = require('../nunjucks/components-index-plugin')
 const generateFileLoaderOptions = require('../utils/generate-file-loader-options')
+const PangolinPlugin = require('../webpack/pangolin-plugin.js')
 const store = require('../store')
 
 /**
@@ -138,20 +138,16 @@ module.exports = (context, options = {}) => {
     config.entry('main')
       .add('./src/main.scss')
 
-    // HTML
-
-    config.module
-      .rule('html')
-        .test(/\.njk$/)
-        .use('nunjucks-loader')
-          .loader(require.resolve('../nunjucks/loader'))
-
-    // Plugins
-
     if (process.env.PANGOLIN_ENV !== 'build') {
+      config.module
+        .rule('pangolin')
+          .test(/\.njk$/)
+          .use('pangolin-loader')
+            .loader(require.resolve('../webpack/pangolin-loader.js'))
+
       config
-        .plugin('pangolin-components-index')
-        .use(ComponentsIndexPlugin)
+        .plugin('pangolin-plugin')
+        .use(PangolinPlugin)
     }
   }
 

diff --git a/lib/nunjucks/components-index-plugin.js b/lib/nunjucks/components-index-plugin.js
diff --git a/lib/nunjucks/generate-preview-head.js → lib/nunjucks/generate-head.js b/lib/nunjucks/generate-preview-head.js → lib/nunjucks/generate-head.js
diff --git a/lib/nunjucks/generate-preview-template.js → lib/nunjucks/generate-template.js b/lib/nunjucks/generate-preview-template.js → lib/nunjucks/generate-template.js
diff --git a/lib/nunjucks/loader.js b/lib/nunjucks/loader.js
diff --git a/lib/utils/escape-html.js b/lib/utils/escape-html.js
@@ -0,0 +1,17 @@
+/**
+ * Escape HTML
+ * @see {@link https://stackoverflow.com/a/4835406/9208523}
+ * @param {String} html Raw HTML
+ * @returns {String} Escaped HTML
+ */
+module.exports = function (html) {
+  const replacements = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  }
+
+  return html.replace(/[&<>"']/g, match => replacements[match])
+}
diff --git a/lib/utils/generate-index.js b/lib/utils/generate-index.js
@@ -0,0 +1,15 @@
+const fs = require('fs-extra')
+const store = require('../store.js')
+
+const template = fs.readFileSync('../../ui/index.html').toString()
+
+/**
+ * Generate index html
+ * @returns {String} Index HTML
+ */
+module.exports = function () {
+  return template
+    .replace(/{{ project }}/g, store.state.config.project.name)
+    .replace(/{{ base }}/g, store.state.config.project.base)
+    .replace(/{{ socketPath }}/g, store.state.config.devServer.webSocketPath)
+}
diff --git a/lib/utils/get-config.js b/lib/utils/get-config.js
@@ -26,8 +26,13 @@ module.exports = (context) => {
     },
     nunjucks: {},
     project: {
+      id: require(`${context}/package.json`).name,
       name: 'Pangolin',
-      base: '/'
+      base: '/',
+      branding: {
+        colorTheme: '#ff721f',
+        favicon: 'favicon.ico'
+      }
     },
     fileNameHash: true
   }