selfup/hyperapp-one

Hyperapp One is a Parcel boilerplate for quickstarting a web application with Hyperapp (V1), JSX, and Prettier.

Hyperapp One

Hyperapp One is a Parcel boilerplate for quickstarting a web application with Hyperapp V1, JSX, and Prettier.

Redux Dev Tools support is included as well 😄

Table of Contents

• Installing
• Testing
• Development
  • Wiping the Commit History
  • Deploying to GitHub Pages
    • First Time
    • Every Time After
• License

Installing

git clone https://github.com/selfup/hyperapp-one
cd hyperapp-one
npm install
npm start

Testing

npm test

All tests are in the root test directory. 🎉

Development

Access localhost:1234.

The browser will reload as you save new code. 🚀

Now go code something awesome!

Wiping the Commit History

Make sure you are in the boilerplate root and run:

npm run wipe

Add your remote:

git remote add origin <ssh_or_https_url>

Then work as usual.

Or if you prefer to do it yourself from scratch:

rm -rf .git
git init
git add .
git commit -m "initial commit"

Then add your remote and work from there as usual.

git remote add origin <ssh_or_https_url>

Deploying to GitHub Pages

This will be interactive as it merges master into the gh-pages branch 🙏

./scripts/gh_pages.sh

Sometimes it will say there is nothing to commit even though you have more commits.

Just do a git push or a git push -f and then check back out to master 🙏

Now visit:

• No custom domain: yourUserName.github.io/yourRepoName
• With a custom domain: yourCustomDomain/yourRepoName

License

Hyperapp One is MIT licensed. See LICENSE.

hyperapp-one's Issues

Add minification plugin?

I guess we could go on and on with plugins to recommend, but it should feature at least a way to mangle and minify the code.

Side note: What about tree shaking? Does it work OTTB in Webpack@2?

Consider removing unused files from the main repo.

For example bundle.js and bundle.css.

Use hyperapp/hyperxify to remove Hyperx from bundle and transform template functions to raw h calls

Will involve including the transform loader as well.

This will improve performance by transpiling

html`<h1>Hi</h1>`

into

h("h1", {}, ["Hi"])

and also by removing the entire hyperx code from the result bundle.

• Depends on https://github.com/substack/hyperxify/pull/8.

Upgrade to webpack v4 once it comes out (really soon!)

Reasons

1. Less config
2. Better performance
3. Stay up to date

Where is webpack 4 being tracked?

Right here! https://github.com/webpack/webpack/milestone/15

Updating deps causes install errors

I tried updating the deps, many of which are now pretty old, but got a lot of errors. In the end I stopped exploring the reasons

Positioning with new CSS changes

@lukejacksonn ^ ^