hyperapp-tsx-parser v0.2.2

hyperapp-tsx-parser

A simple TSX parser for Hyperapp.

Usage

Install using npm or yarn

npm install --dev hyperapp-tsx-parser

yarn add --dev hyperapp-tsx-parser

Ensure you have the following configuration in your tsconfig.json

{
  "compilerOptions": {
    ...
    "jsx": "react",
    "jsxFactory": "hyperappTsxParser"
  }
}

Files containing TSX elements will need the following import statement

import hyperappTsxParser from "hyperapp-tsx-parser"

Example

import { h, text, app } from "https://unpkg.com/hyperapp"
import hyperappTsxParser from "hyperapp-tsx-parser"

const AddTodo = (state) => ({
  ...state,
  todos: state.todos.concat(state.value),
})

const NewValue = (state, event) => ({
  ...state,
  value: event.target.value,
})

app({
  init: { todos: [], value: "" },
  view: ({ todos, value }) =>
    <main>
      <input type="text" oninput={NewValue}>{value}</input>
      <button onclick={AddTodo}>Add</button>
      <ul>
        {todos.map((todo) => <li>{todo}</li>)}
      </ul>
    </main>,
  node: document.getElementById("app"),
})