Use Solid-js

.github/workflows/CI.yml

@@ -25,7 +25,9 @@ jobs:
           channel: ${{ matrix.atom_channel }}
 
       - name: Install dependencies
-        run: apm install
+        run: |
+          apm install --production
+          npm install --only=dev
 
       # The tests are flaky
       - name: Run tests

.gitignore

@@ -3,3 +3,4 @@
 npm-debug.log
 node_modules
 dist
+.parcel-cache

README.md

@@ -9,6 +9,8 @@ Intentions is a base package that provides an easy-to-use API to show intentions
 - Use <kbd>ALT</kbd>+<kbd>ENTER</kbd> to open the intensions list and press <kbd>ENTER</kbd> (or select by mouse) to choose the action.
 - To see the all available actions hold <kbd>CTRL</kbd> (<kbd>⌘</kbd> on macOS).
 
+![intentions-list](https://user-images.githubusercontent.com/16418197/122294624-dd304100-cebd-11eb-9232-d015cde1516f.gif)
+
 #### APIs
 
 Intentions provides two kinds of APIs, there's Intentions List API that allows you to add items

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["babel-preset-solid"]
+}

babel.unit.config.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "babel-preset-solid",
+    [
+      "babel-preset-atomic",
+      {
+        "addModuleExports": false,
+        "react": false,
+        "typescript": true
+      }
+    ]
+  ],
+  "sourceMap": "inline"
+}

lib/elements/highlight.ts

@@ -1,7 +1,8 @@
 export const PADDING_CHARACTER = " "
 export function create(length: number): HTMLElement {
   let tries = 0
-  const element = document.createElement("intention-inline")
+  const element = document.createElement("div")
+  element.className = "intentions-inline"
   element.style.opacity = "0"
   element.textContent = PADDING_CHARACTER.repeat(length)
 

lib/elements/list.tsx

@@ -1,79 +1,102 @@
-/** @jsx jsx */
-// eslint-disable-next-line no-unused-vars
-import { createClass, jsx } from "vanilla-jsx"
+import { createSignal, createSelector, For, createComputed, on } from "solid-js"
 
 import { $class } from "../helpers"
-import type { ListMovement } from "../types"
+import type { ListItem } from "../types"
 
-export default createClass({
-  renderView(suggestions, selectCallback) {
-    let className = "select-list popover-list"
+export interface Props {
+  suggestions: Array<ListItem>
+  selectCallback: (suggestion: ListItem) => void
+}
 
-    if (suggestions.length > 7) {
-      className += " intentions-scroll"
-    }
+export function ListElement(props: Props) {
+  // current active index
+  const [getActiveIndex, setActiveIndex] = createSignal(-1)
+  // current active id
+  const isSelected = createSelector(getActiveIndex)
+  // movement state
+  const [getMovement, setMovement] = createSignal<string | undefined>("move-to-top")
+  // selected state
+  const [getConfirmed, setConfirmed] = createSignal(false)
 
-    this.suggestions = suggestions
-    this.suggestionsCount = suggestions.length
-    this.suggestionsIndex = -1
-    this.selectCallback = selectCallback
-    return (
-      <intentions-list class={className} id="intentions-list">
-        <ol className="list-group" ref="list">
-          {suggestions.map(function (suggestion) {
-            return (
-              <li>
-                <span
-                  className={suggestion[$class]}
-                  on-click={function () {
-                    selectCallback(suggestion)
-                  }}
-                >
-                  {suggestion.title}
-                </span>
-              </li>
-            )
-          })}
-        </ol>
-      </intentions-list>
-    )
-  },
+  function handleSelection(suggestion: ListItem, index: number) {
+    // call its associated callback
+    props.selectCallback(suggestion)
+    // store it in the signal
+    setActiveIndex(index)
+  }
+
+  function handleMove() {
+    const suggestionsCount = props.suggestions.length
 
-  move(movement: ListMovement) {
-    let newIndex = this.suggestionsIndex
+    const prevIndex = getActiveIndex()
+    let index = prevIndex
 
+    const movement = getMovement()
     if (movement === "up") {
-      newIndex--
+      index--
     } else if (movement === "down") {
-      newIndex++
+      index++
     } else if (movement === "move-to-top") {
-      newIndex = 0
+      index = 0
     } else if (movement === "move-to-bottom") {
-      newIndex = this.suggestionsCount
+      index = suggestionsCount
     }
 
     // TODO: Implement page up/down
-    newIndex %= this.suggestionsCount
+    index %= suggestionsCount
 
-    if (newIndex < 0) {
-      newIndex = this.suggestionsCount + newIndex
+    if (index < 0) {
+      index = suggestionsCount + index
     }
 
-    this.selectIndex(newIndex)
-  },
-
-  selectIndex(index) {
-    if (this.refs.active) {
-      this.refs.active.classList.remove("selected")
+    if (index !== prevIndex) {
+      setActiveIndex(index)
     }
 
-    this.refs.active = this.refs.list.children[index]
-    this.refs.active.classList.add("selected")
-    this.refs.active.scrollIntoViewIfNeeded(false)
-    this.suggestionsIndex = index
-  },
+    // unset the movement to allow solid to check the next movement
+    setMovement(undefined)
+  }
 
-  select() {
-    this.selectCallback(this.suggestions[this.suggestionsIndex])
-  },
-})
+  createComputed(
+    on(getConfirmed, () => {
+      if (getConfirmed()) {
+        // Runs the selection callback when the user confirms the selection using keyboard
+        // Updating prop.select in the parent result in running this function
+        const index = getActiveIndex()
+        handleSelection(props.suggestions[index], index)
+      }
+    })
+  )
+  createComputed(on(getMovement, handleMove))
+
+  let className = "select-list popover-list"
+  // add scrolling if more than 7 itmes
+  if (props.suggestions.length > 7) {
+    className += " intentions-scroll"
+  }
+
+  const component = (
+    <div class={className} id="intentions-list">
+      <ol className="list-group">
+        <For each={props.suggestions}>
+          {(suggestion, getIndex) => {
+            const index = getIndex()
+            return (
+              <li class={isSelected(index) ? "selected" : ""}>
+                <span
+                  className={suggestion[$class]}
+                  onClick={() => {
+                    handleSelection(suggestion, index)
+                  }}
+                >
+                  {suggestion.title}
+                </span>
+              </li>
+            )
+          }}
+        </For>
+      </ol>
+    </div>
+  )
+  return { component, setMovement, setConfirmed }
+}

lib/tsconfig.json

@@ -16,8 +16,9 @@
     "inlineSources": true,
     "preserveSymlinks": true,
     "removeComments": false,
-    "jsx": "react",
-    "jsxFactory": "jsx",
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
     "lib": ["ES2018", "dom"],
     "target": "ES2018",
     "allowJs": true,

lib/view-list.ts

@@ -1,29 +1,43 @@
+import { render } from "solid-js/web"
 import { CompositeDisposable, Emitter } from "sb-event-kit"
 import type { Disposable } from "sb-event-kit"
 import type { TextEditor } from "atom"
 
-import ListElement from "./elements/list"
+import { ListElement } from "./elements/list"
 import type { ListItem, ListMovement } from "./types"
 
 export default class ListView {
   emitter: Emitter
-  element: typeof ListElement
+  // root element
+  element: HTMLElement
   subscriptions: CompositeDisposable
 
+  setMovement?: (movement: ListMovement) => void
+  setConfirmed?: (confiremd: boolean) => void
+
   constructor() {
+    this.element = document.createElement("div")
+
     this.emitter = new Emitter()
-    this.element = new ListElement()
     this.subscriptions = new CompositeDisposable()
     this.subscriptions.add(this.emitter)
-    this.subscriptions.add(this.element)
   }
 
   activate(editor: TextEditor, suggestions: Array<ListItem>) {
-    this.element.render(suggestions, (selected) => {
-      this.emitter.emit("did-select", selected)
-      this.dispose()
+    const { component, setMovement, setConfirmed } = ListElement({
+      suggestions,
+      selectCallback: (selectedSuggestion: ListItem) => {
+        this.emitter.emit("did-select", selectedSuggestion)
+        this.dispose()
+      },
     })
-    this.element.move("move-to-top")
+    // store setters
+    this.setMovement = setMovement
+    this.setConfirmed = setConfirmed
+
+    // render the list element component
+    render(() => component, this.element)
+
     const bufferPosition = editor.getCursorBufferPosition()
     const marker = editor.markBufferRange([bufferPosition, bufferPosition], {
       invalidate: "never",
@@ -38,11 +52,12 @@ export default class ListView {
   }
 
   move(movement: ListMovement) {
-    this.element.move(movement)
+    this.setMovement?.(movement)
   }
 
   select() {
-    this.element.select()
+    // runs only once
+    this.setConfirmed?.(true)
   }
 
   onDidSelect(callback: (...args: Array<any>) => any): Disposable {

package.json

@@ -1,6 +1,7 @@
 {
   "name": "intentions",
   "main": "./dist/index.js",
+  "source": "./lib/index.ts",
   "version": "2.0.0",
   "description": "Base package for showing intentions in Atom",
   "keywords": [],
@@ -12,14 +13,20 @@
   "dependencies": {
     "disposable-event": "^2.0.0",
     "sb-event-kit": "^3.0.0",
-    "vanilla-jsx": "^3.0.2"
+    "solid-js": "^0.26.5"
   },
   "devDependencies": {
+    "@babel/cli": "^7.14.5",
     "@types/atom": "latest",
     "@types/jasmine": "v1",
+    "babel-preset-atomic": "^4.1.0",
+    "babel-preset-solid": "^0.26.5",
     "build-commit": "^0.1.4",
+    "cross-env": "^7.0.3",
     "eslint-config-atomic": "^1.16.0",
     "jasmine-fix": "^1.3.1",
+    "module-alias": "^2.2.2",
+    "parcel": "^2.0.0-beta.3.1",
     "prettier-config-atomic": "^2.0.5",
     "typescript": "^4.3.2"
   },
@@ -41,9 +48,33 @@
     "test.format": "prettier --check .",
     "lint": "eslint . --fix",
     "test.lint": "eslint .",
-    "test": "npm run build && atom --test spec",
-    "dev": "tsc -p ./lib/tsconfig.json --watch",
-    "build": "tsc -p ./lib/tsconfig.json || echo done",
+    "test": "npm run build.unit && npm run build && npm run test.only",
+    "test.only": "atom --test spec",
+    "clean": "shx rm -rf ./dist",
+    "types": "tsc -p ./lib/tsconfig.json --noEmit",
+    "build.unit": "(npm run types || echo done) && babel ./lib --out-dir ./dist --config-file ./babel.unit.config.json --extensions .tsx,.ts",
+    "dev": "cross-env NODE_ENV=development parcel watch --target main ./lib/index.ts",
+    "build": "cross-env NODE_ENV=production parcel build --target main ./lib/index.ts --detailed-report",
     "build-commit": "build-commit -o dist"
+  },
+  "targets": {
+    "main": {
+      "context": "electron-renderer",
+      "includeNodeModules": {
+        "atom": false,
+        "electron": false,
+        "disposable-event": false
+      },
+      "outputFormat": "commonjs",
+      "isLibrary": true
+    }
+  },
+  "alias": {
+    "solid-js": "solid-js/dist/solid.js",
+    "solid-js/web": "solid-js/web/dist/web.js"
+  },
+  "_moduleAliases": {
+    "solid-js": "./node_modules/solid-js/dist/solid.cjs",
+    "solid-js/web": "./node_modules/solid-js/web/dist/web.cjs"
   }
 }