Skip to content

k1r0s/superpie

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SUPERPIE for superfine v6

As superfine updates to v7 several unreconcilable changes push superpie to 6.*

this readme is not completed yet

Lightweight library based on superfine.

Why?

Superfine is tiny vdom library used to build web interfaces. It comes with the minimum features to provide flexibility and simplicity. But when facing any serious development you need at least to add several features such as state management and styling.

This library size is only 717 Bytes and is the perfect complement to superfine if you want to quickly develop simple and blazing fast web apps.

Samples
  • Form - Form management and state binding as a component.
  • Router - HTML5 history API management as a component.
  • Select - Native <select/> tag with filter and scoped styles.
What does it include?
  • scoped state
import { h } from 'superfine';
import { statefine } from "superpie";

const Counter = statefine(({ state, setState }) => (
  <div oncreate={() => setState({ amount: 0 })}>
    <p>
      <span>{state.amount}</span>
      <a onclick={() => setState(prev => ({ amount: prev.amount + 1 }))}>+</a>
    </p>
  <div>
))
  • scoped css
import { h } from 'superfine';
import { stylefine } from "superpie";

const FancyButton = stylefine(
  `
    button {
      cursor: pointer;
      border-style: none;
      padding: .5rem;
      margin: 0 .5rem .5rem 0;
    }

  `,
  ({ children, ...props }) => (
    <button {...props}>{children}</button>
  )
)
  • cheap classy syntax
import { h } from 'superfine';
import { cyclefine } from "superpie";

const DisplayMessage = cyclefine({
  // this is a superfine component hook
  oncreate() {
    SomeService.fetch().then(res =>
      this.setState({ message: res.message }));
  },
  onrender() {
    const message = this.state && this.state.message
    return (
      <div>
        {message}
      </div>
    )
  }
})