Switch from hyperapp -> inferno (#20)

* Hyperapp is no longer a dep, use inferno instead
* Switch to using JSX via Babel (so to do type checking run `npm run check-types`)
* Added feather-icons dependency
* Various changes that I won't list

Co-authored-by: Christian Clason <[email protected]>

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": ["@babel/preset-typescript"],
+  "plugins": [
+    ["babel-plugin-inferno", { "imports": true }],
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-modules-commonjs"
+  ],
+  "ignore": ["**/legacy/", "**/future/"]
+}

.npmignore

@@ -0,0 +1,2 @@
+**/legacy/
+**/future/

.prettierrc.json

@@ -1,4 +1,6 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": true
 }

package.json

@@ -7,8 +7,9 @@
   "main": "build/bootstrap/main.js",
   "scripts": {
     "start": "node tools/start.js",
-    "start:release": "electron build/bootstrap/main.js",
+    "start:release": "NODE_ENV=production electron build/bootstrap/main.js",
     "build": "node tools/build.js",
+    "check-types": "tsc -p src/tsconfig.json --noEmit",
     "package": "node tools/package.js",
     "test": "mocha test/unit",
     "test:e2e": "mocha test/e2e -t 0",
@@ -18,7 +19,7 @@
     "test:integration:watch": "npm run test:integration -- -w",
     "gen:api": "node tools/gen-api.js",
     "gen:font-sizes": "electron tools/font-sizer/index.js",
-    "unused-exports": "ts-unused-exports tsconfig.json $(find src -name *.ts)",
+    "unused-exports": "ts-unused-exports src/tsconfig.json",
     "setup-mirrors": "node tools/setup-mirrors.js"
   },
   "repository": {
@@ -31,21 +32,27 @@
   "homepage": "https://github.com/smolck/uivonim#readme",
   "dependencies": {
     "diff-match-patch": "^1.0.5",
+    "feather-icons": "^4.28.0",
     "fuzzaldrin-plus": "^0.6.0",
-    "highlight.js": "^10.2.1",
-    "hyperapp": "1.2.9",
-    "hyperapp-feather": "0.4.0",
-    "hyperapp-seti": "^0.3.0",
+    "highlight.js": "^10.3.1",
+    "inferno": "^7.4.5",
     "marked": "^1.2.0"
   },
   "devDependencies": {
-    "@types/marked": "^1.1.0",
-    "@deomitrus/hyperapp-redux-devtools": "1.2.0",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.12.1",
+    "@babel/preset-typescript": "^7.12.1",
     "@medv/finder": "^2.0.0",
     "@types/diff-match-patch": "1.0.32",
     "@types/fuzzaldrin-plus": "^0.6.1",
+    "@types/marked": "^1.1.0",
     "@types/node": "^14.11.10",
     "@types/webgl2": "0.0.5",
+    "babel-plugin-inferno": "^6.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
     "electron": "^10.1.3",
     "electron-builder": "^22.9.1",
     "electron-devtools-installer": "^3.1.1",

src/bootstrap/galaxy.ts

@@ -5,13 +5,16 @@ import * as workspace from '../core/workspace'
 import { remote } from 'electron'
 import '../render/redraw'
 import '../core/screen-events'
+import { merge } from '../support/utils'
+import * as dispatch from '../messaging/dispatch'
+import { specs as titleSpecs } from '../core/title'
 
 // TODO: do we need to sync instance nvim state to main thread? see instance-api todo note
 // TODO: webgl line width
 // TODO: investigate no texture on unit0. im guessing the texture atlas are not
 // ready on load?
 // TODO: do we still need roboto-sizes.json? we generate the font atlas before
-// we can wrender anything to webgl, so we can probably grab the size then
+// we can render anything to webgl, so we can probably grab the size then
 
 // TODO: temp rows minus 1 because it doesn't fit. we will resize windows
 // individually once we get ext_windows working
@@ -23,32 +26,22 @@ requestAnimationFrame(() => {
 
   // high priority components
   requestAnimationFrame(() => {
-    // Need to focus hacky textarea so input is registered right off the bat.
-    document.getElementById('hacky-textarea')?.focus()
-
-    require('../components/statusline')
-    require('../components/command-line')
-    require('../components/vim-search')
+    requireDir(`${__dirname}/../components/nvim`)
   })
 
   setTimeout(() => {
     requireDir(`${__dirname}/../components`)
+    requireDir(`${__dirname}/../components/extensions`)
+    requireDir(`${__dirname}/../components/memes`)
   }, 600)
 
   setTimeout(() => {
-    // Focus on hacky textarea when clicking main window, since input events are
-    // received from that textarea.
-    document.addEventListener('click', (e: MouseEvent) => {
-      e.preventDefault()
-      document.getElementById('hacky-textarea')?.focus()
-    })
-
     require('../services/remote')
     require('../services/app-info')
 
     if (process.env.VEONIM_DEV) {
-      require('../dev/menu')
-      require('../dev/recorder')
+      // require('../dev/menu')
+      // require('../dev/recorder')
     }
   }, 199)
 })
@@ -77,3 +70,18 @@ win.on('enter-full-screen', () =>
 win.on('leave-full-screen', () =>
   window.removeEventListener('mousemove', mouseTrap)
 )
+
+const pluginsContainer = document.getElementById('plugins') as HTMLElement
+merge(pluginsContainer.style, {
+  position: 'absolute',
+  display: 'flex',
+  width: '100vw',
+  zIndex: 420,
+  // TODO: 24px for statusline. do it better
+  // TODO: and title. bruv do i even know css?
+  height: `calc(100vh - 24px - ${titleSpecs.height}px)`,
+})
+
+dispatch.sub('window.change', () => {
+  pluginsContainer.style.height = `calc(100vh - 24px - ${titleSpecs.height}px)`
+})

src/bootstrap/index.html

@@ -13,6 +13,21 @@
         src: url('../assets/roboto-mono.ttf');
       }
 
+      /* TODO(smolck): HACK that breaks stuff maybe potentially */
+      #plugins > div {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        /* Don't want these divs to obstruct clicking components/extensions, so
+         make them not visible. */
+        visibility: hidden;
+      }
+
+      #plugins > div > div {
+        /* Do want the actual components to be visible and thus clickable. */
+        visibility: visible;
+      }
+
       html {
         --font: 'Roboto Mono Veonim';
         --font-size: 14;
@@ -62,7 +77,7 @@
       }
 
       /* Without this, there's extra margin on the top and bottom of the
-         hover (src/components/hover.ts) */
+         hover (src/components/extensions/lsp-hover.ts) */
       p,
       pre {
         margin: 0;
@@ -143,7 +158,7 @@
   </head>
   <body>
     <div style="overflow: hidden; height: 0; position: absolute">
-      <textarea id="hacky-textarea"></textarea>
+      <textarea id="keycomp-textarea"></textarea>
     </div>
 
     <div id="notifications"></div>

src/components/README.md

@@ -0,0 +1,8 @@
+Implementations of the different UI elements used by Uivonim
+
+- top-level contains elements used by Uivomim itself
+- `nvim` contains elements replacing neovim builtin UI (command line, pum, search, statusline, messages)
+- `extensions` contains optional elements that can be called via `:Uivonim xxx` or bound to Lua (in particular, LSP hover, signature help, references, symbols)
+- `extensions/legacy` contains elements from veonim that are no longer exposed
+- `extensions/future` contains elements from veonim that are planned to be exposed in the future (requiring further work)
+- `memes` contains Nyancat