Find common errors in code

[mrozbarry]

Hyperapp debug should be able to find common errors, like not wrapping text in text('...'), or using the wrong casing for event names.

After finding the error, it should be able to make a recommendation on how to fix the error, and the exact location of the error.

[mrozbarry]

My initial thought is something like:

import withDebug, { devMode } from 'https://unpkg.com/hyperapp-debug?module=1';
import * as hyperapp from 'https://unpkg.com/hyperapp?module=1';

const { app, h } = devMode(hyperapp);
// Now app and h report warnings/common mistakes
// This is separate from `withDebug` which communicates with the devtool

[zaceno]

Some suggestions on things to warn about (unsure how common they are):

• Forgetting to wrap strings in text, e g h('h1', {}, 'hello')
• Forgetting the property object in h e g h('h1', text('hello'))
• Passing mulitple children as separate args, rather than an array:

h('div', {},
  h('h1', {}, text('hello'),
  h('p', {}, text('foo bar baz')
)

• Nested arrays in children:

h('div', {}, [
  h('h1', {}, text('hello')),
  [
    h('p', {}, text('some paragraph')),
    h('p', {}, text('another paragraph')),
  ]
 ])

• Using plain string for style attribute: h('button', {style: 'color: #f00; border-radius: 5px'}, text('click me'))

• Using invalid event-names: eg h('button', {oncilck: SomeAction}, text('click me')) or h('button', {onClick: SomeAction}, text('click me'))

[zaceno]

I think it's worth noting that once hyperapp has type definitions available, VSCode or other type-aware editors will warn you about these sorts of mistakes (and many others) anyway. What this sort of library could add on top of that is more helpful messages on how to fix the errors. (Because the type errors VSCode will report are probably quite inscrutable)