Using Create React App with Hyperapp
(Or indeed, any other frontend system)
Why would you want too!? After all, Hyperapp is a tiny, view + single tree state, ‘framework’ with a strong emphasis on KISS. It’s a kind of React + Redux “Lite”. Meanwhile, Create React App (CRA) is a large, full-featured tool chain configuration using reliable, best of breed tools and which provides a great developer experience plus full production ready builds.
Well, the point is that, yes, you can very easily knock up cool little test apps with Hyperapp, even directly in a single HTML file without build tooling. However, if you want to publish something for end users you need production quality. Which is exactly where Create React App comes in.
But, you say “Isn’t there a clue in the name and CRA is only for react?” A good guess, but it turns out that nearly all of the tooling and configuration is pretty generic and suitable for many SPA web apps. Even some of the tools with “React” in their name are not totally React Specific. Plus JSX is definitely used outside of React apps, including working really well with Hyperapp.
In actual fact, you can easily build Hyperapp apps with CRA. You do need to change a couple of config options to stop errors when using JSX, but that may be all. If you don’t use JSX you might not need do anything to get solid dev and builds for Hyperapp.
Other React specific settings do not appear to be a problem either. Probably because they do not get triggered. But if you do hit any other issues, the CRA configs are on GitHub. If you find further issues then do leave a comment so I can update this post.
So here are the minimal steps to configure CRA to use JSX with Hyperapp..
- `Eject` your CRA project so the config files are made available in your project (you may not need to do this, see below)
- Modify your `package.json` to alter the `babel` and `eslint` configs as follows:
"babel": {
"plugins": [
["transform-react-jsx", { "pragma": "h" }]],
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": ["react-app"],
"rules": {
"react/react-in-jsx-scope": "off",
"no-unused-vars": ["warn", {"args": "none",
"ignoreRestSiblings": true,
"varsIgnorePattern": "^h$"}]
}
}The babel setting allows JSX to use the Hyperapp `h()` function rather than the default `React.CreateElement()`.
Get SteveALee’s stories in your inbox
Join Medium for free to get updates from this writer.
Meanwhile, the eslint settings turn off errors caused by React not being declared and h being declared for JSX but not used in the source code .
I don’t want to eject
That’s perfectly understandable as you will have effectively taken over the config and won’t be able to use CRA updates without merging changes.
[Update: 29/01/18) One very nice approach from Wolfgang of the Hyperapp team is https://github.com/okwolf/cra-hyperapp. This uses a script to modify and delegate to the CRA scripts.
An alternative is to fork the CRA scripts and maintain them as a ‘flavour’ for others as well as yourself. Perhaps the Hyperapp team might do this if there is enough interest.
TypeScript?
Of course. You can use the forked CRA script create-react-script-ts. This uses `tsc` and tslint rather than `babel` and `eslint`.
Fortunately, `tsc` specifically lets you change the JSX function. Use the jsx: react (yuck) and jsxFactory: h settings. I’ve not checked to see if the tslint settings need to be tweeked.
Alternatives
There are several boilerplates over at Awesome Hyperapp, but to be honest a well maintained solution like CRA provides a much better maintenance experience IMHO.
