replace cycle js with preact

The cyclejs version we are using is really old
and preact, being very similar to react (but a lot
smaller) is much easier to learn.

Author: archaeron

lib/typings/cycle-core.d.ts

@@ -1,7 +1,13 @@
-import * as CycleDOM from '@cycle/dom'
+import * as Preact from 'preact'
 import Logger from './Logger'
 
-const highlightInfoListToOb = (list: any) => {
+export type HighlightInformation = {
+    classes: Array<string>
+    word: string
+    description: string
+}
+
+const highlightInfoListToOb = (list: Array<any>) => {
     const obj: { [key: string]: any } = {}
     for (let x of list) {
         const key = x[0].slice(1)
@@ -13,7 +19,7 @@ const highlightInfoListToOb = (list: any) => {
 
 // Use the right CSS classes, so that we can use the
 // syntax highlighting built into atom.
-const decorToClasses = (decor: any) => {
+const decorToClasses = (decor: string) => {
     switch (decor) {
         case ':type':
             return ['syntax--storage', 'syntax--type']
@@ -36,7 +42,7 @@ const decorToClasses = (decor: any) => {
     }
 }
 
-const highlightWord = (word: string, info: any) => {
+const highlightWord = (word: string, info: any): HighlightInformation => {
     const type = info.info.type || ''
     const doc = info.info['doc-overview'] || ''
 
@@ -51,22 +57,26 @@ const highlightWord = (word: string, info: any) => {
 
 // Build highlighting information that we can then pass to one
 // of our serializers.
-export const highlight = (code: string, highlightingInfo: any) => {
+export const highlight = (
+    code: string,
+    highlightingInfo: Array<[number, number, Array<any>]>,
+): Array<HighlightInformation> => {
     const highlighted = highlightingInfo
-        .map(function ([start, length, info]: [any, any, any]) {
+        .map(function ([start, length, info]) {
             return {
                 start,
                 length,
                 info: highlightInfoListToOb(info),
             }
         })
-        .filter((i: any) => i.info.decor != null)
-        .reduce(
-            ([position, text]: any, info: any) => {
+        .filter((i) => i.info.decor != null)
+        .reduce<[number, Array<HighlightInformation>]>(
+            ([position, text], info) => {
                 const newPosition = info.start + info.length
-                const unhighlightedText = {
+                const unhighlightedText: HighlightInformation = {
                     classes: [],
                     word: code.slice(position, info.start),
+                    description: '',
                 }
                 const highlightedWord = highlightWord(
                     code.slice(info.start, newPosition),
@@ -79,10 +89,11 @@ export const highlight = (code: string, highlightingInfo: any) => {
             [0, []],
         )
 
-    const [position, text] = Array.from(highlighted)
+    const [position, text] = highlighted
     const rest = {
         classes: [],
         word: code.slice(position),
+        description: '',
     }
     const higlightedWords = text.concat(rest)
     return higlightedWords.filter(
@@ -91,9 +102,9 @@ export const highlight = (code: string, highlightingInfo: any) => {
 }
 
 // Applies the highlighting and returns the result as an html-string.
-export const highlightToString = (highlights: any) =>
+export const highlightToString = (highlights: Array<HighlightInformation>) =>
     highlights
-        .map(function ({ classes, word }: any) {
+        .map(function ({ classes, word }) {
             if (classes.length === 0) {
                 return word
             } else {
@@ -103,8 +114,8 @@ export const highlightToString = (highlights: any) =>
         .join('')
 
 // Applies the highlighting and returns the result as a DOM-objects.
-export const highlightToHtml = (highlights: any) => {
-    const spans = highlights.map(function ({ classes, word }: any) {
+export const highlightToHtml = (highlights: Array<HighlightInformation>) => {
+    const spans = highlights.map(function ({ classes, word }) {
         if (classes.length === 0) {
             return document.createTextNode(word)
         } else {
@@ -119,15 +130,19 @@ export const highlightToHtml = (highlights: any) => {
     return container
 }
 
-export const highlightToCycle = (highlights: any) =>
-    highlights.map(({ classes, word, description }: any) => {
+export const highlightToPreact = (
+    highlights: Array<HighlightInformation>,
+): Preact.VNode => {
+    const highlighted = highlights.map(({ classes, word, description }) => {
         if (classes.length === 0) {
-            return word
+            return word as string
         } else {
-            return CycleDOM.h(
+            return Preact.h(
                 'span',
                 { className: classes.join(' '), title: description },
                 word,
             )
         }
     })
+    return Preact.h('div', {}, highlighted)
+}

lib/typings/cycle-dom.d.ts

@@ -0,0 +1,97 @@
+import * as Preact from 'preact'
+import { useState, StateUpdater } from 'preact/hooks'
+import * as highlighter from '../utils/highlighter'
+import * as Rx from 'rx-lite'
+import { fontOptions } from '../utils/dom'
+import { IdrisController } from '../idris-controller'
+import { IdrisModel } from '../idris-model'
+import { HighlightInformation } from '../utils/highlighter'
+
+const styles = fontOptions()
+
+const ask = (
+    model: IdrisModel,
+    question: string,
+    setAnswer: StateUpdater<Array<HighlightInformation>>,
+) => {
+    model
+        .apropos(question)
+        .map((e: any): {
+            code: string
+            highlightInfo: Array<[number, number, Array<any>]>
+        } => ({
+            code: e.msg[0],
+            highlightInfo: e.msg[1],
+        }))
+        .catch((e: any) =>
+            Rx.Observable.just({
+                code: e.message,
+                highlightInfo: e.highlightInformation,
+            }),
+        )
+        .subscribe(
+            ({ code, highlightInfo }) => {
+                const answer = highlighter.highlight(code, highlightInfo)
+                setAnswer(answer)
+            },
+            (err) =>
+                setAnswer([
+                    { word: err.message, classes: [], description: '' },
+                ]),
+        )
+}
+
+type AnswerProps = { highlightInfo: Array<HighlightInformation> }
+
+const Answer: Preact.FunctionComponent<AnswerProps> = (props) => {
+    const { highlightInfo } = props
+    return (
+        <pre className="idris-apropos-output" style={styles}>
+            {highlighter.highlightToPreact(highlightInfo)}
+        </pre>
+    )
+}
+
+type AproposProps = { model: IdrisModel }
+
+const Apropos: Preact.FunctionComponent<AproposProps> = (props) => {
+    const { model } = props
+    const [input, setInput] = useState<string>('')
+    const [answer, setAnswer] = useState<Array<HighlightInformation>>([])
+
+    return (
+        <div className="idris-panel-view">
+            <input
+                type="text"
+                className="native-key-bindings idris-repl-input-field"
+                onInput={(e) => {
+                    console.log(e)
+                    setInput(e.currentTarget.value)
+                }}
+                onKeyPress={(e) => {
+                    if (e.keyCode === 13) {
+                        console.log('pressed enter')
+                        ask(model, input, setAnswer)
+                    }
+                }}
+            >
+                {input}
+            </input>
+            <div className="idris-repl-lines">
+                <Answer highlightInfo={answer} />
+            </div>
+        </div>
+    )
+}
+
+export class AproposView {
+    0: HTMLDivElement = document.createElement('div')
+
+    constructor(params: { controller: IdrisController }) {
+        const hostElement = this[0]
+
+        const { model } = params.controller
+
+        Preact.render(<Apropos model={model} />, hostElement)
+    }
+}

lib/utils/highlighter.ts

@@ -1,5 +1,3 @@
-const Cycle = require('@cycle/core')
-const CycleDOM = require('@cycle/dom')
 const highlighter = require('../utils/highlighter')
 const Rx = require('rx-lite')
 const { fontOptions } = require('../utils/dom')