k1r0s / superpie

minimal dom lib based on superfine

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>
    )
  }
})