fidgetv2.js

// Rebuilding the old fidget interface using hyperapp.js.org (h), replacing the old react
// For comparison, see: https://github.com/phred/fidget/blob/master/index.html#L16-L121

// Nothing's wired up, it's just a text editor that shows you what line you have selected
// and echoes the line's content in a column to the right.

import { h, app } from "hyperapp"

var getCurrentLine = function (node) {
    var lineNum = node.value.substr(0, node.selectionStart).split("\n").length - 1;
    return 1 + lineNum;
}

const state = {
  input: "hello",
  line: 1,
  result: [],
}


const ProgramInput = ({onCursorMove, onInput, input}) =>
  h("textarea",
    {
      className: "programInput",
      onclick: (evt) => onCursorMove(getCurrentLine(evt.target)),
      onkeyup: (evt) => {
      	onInput(evt.target.value);
      	onCursorMove(getCurrentLine(evt.target));
      }
    },
    input)

const Column = (children) =>
	h("div", {className: "col"}, children)

const ResultCells = (results, line) =>
	results.map((res, ndx) => h("span", {className: (ndx+1 == line && "hl" || null)}, res || "_"))

const view = (state, actions) =>
  h("div", {className: "program"}, [
  	Column(
	  ProgramInput({
	  	input: state.input,
	  	onCursorMove: actions.updateLine,
	  	onInput: actions.updateInput}),
	  ),
	  Column([
	  	h("div", {id: "result"}, ResultCells(state.result, state.line)),
		  h("p", {}, state.line),
	  ]),
	]);

const actions = {
  updateLine: value => state => ({ line: value }),
  updateInput: value => state =>({
  	input: value,
  	result: value.split('\n')
  }),
}

const main = app(state, actions, view, document.getElementById('app'))