cuppa
A fun little frontend application framework. A wee cuppa: only 2.6kb gzipped.
Install
npm i cuppa --save
Simple setup
Initialize an instance with routes:
const cuppa = const h = const app =
Mount instance to DOM with initial state object:
Enjoy while it's hot!
Full usage
Below is a functioning front-end app with async routing.
// App.jsconst h = module { return h` <div class='app'> <nav> <ul> <li><a href='/'>Home</a></li> <li><a href='/about'>About</a></li> </ul> </nav> </div> `}
// Page.jsconst h = module { return h` <h1>You are on page: </h1> `}
// index.jsconst cuppa = const Page = const app = document count: 0
The cuppa instance emits an event when a link is clicked:
app
And right after rendering has occurred:
app
State management
Initial state was set when you called cuppa(routes, initialState)
in index.js
. cuppa/state
then exports a higher-order function connect
that you can use to read and update state.
// app/Counter.jsconst h = const connect = moduleexports = { return h` <div> <h1>The count is </h1> <button onclick=>Down</button> <button onclick=>Up</button> </div> `}
Since state is global, it can be controlled via any component
// app/ExternalTrigger.jsconst h = const connect = moduleexports = { return h` <div> In this component, state.count is set to 12. <button onclick= </div> `}
Server side rendering
Server-side is simple, just don't mount the application to the DOM
// app/index.jsconst cuppa = const Page = const app =
// server/template.jsmodule { return ` <!doctype html> <html> <head> </head> <body> <script>window.initialState = </script> </body> </html> `}
On the server, the cuppa
instance accepts a route path and initial state object. Use this to send data from your server to the rendered markup.
// server/index.jsconst app = const template = const program = const template = app app
Then on the client, mount to the DOM and hydrate state.
const app = const state = Object
Extending the template parser
The h
export from cuppa/html
can be modified by the other export of that file: the addTransform
method. Think of this like a higher-order function that can extend the template parser.
const addTransform = const cxs =
With the above, you can now use a css
attribute on your components and it will be translated to classes in the browser:
const h = module { return h` <div css=></div> `}
MIT License