https://github.com/k1r0s/superpie

minimal dom lib based on superfine
https://github.com/k1r0s/superpie

frontend hyperapp state-management superfine virtual-dom web-components

Last synced: 10 days ago
JSON representation

minimal dom lib based on superfine

• Host: GitHub
• URL: https://github.com/k1r0s/superpie
• Owner: k1r0s
• Created: 2019-06-25T06:10:36.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:00:19.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T02:13:51.849Z (24 days ago)
• Topics: frontend, hyperapp, state-management, superfine, virtual-dom, web-components
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/superpie
• Size: 1.63 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### SUPERPIE for superfine v6

[As superfine updates to v7 several unreconcilable changes push superpie to 6.*](https://github.com/jorgebucaran/superfine/issues/167)

> this readme is not completed yet

Lightweight library based on [superfine](https://github.com/jorgebucaran/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](/demo/form) - Form management and state binding as a component.

- [Router](/demo/router) - HTML5 history API management as a component.

- [Select](/demo/select) - Native `` tag with filter and scoped styles.

##### What does it include?

- scoped state

```jsx

import { h } from 'superfine';

import { statefine } from "superpie";

const Counter = statefine(({ state, setState }) => (

  
 setState({ amount: 0 })}>

    


      {state.amount}

       setState(prev => ({ amount: prev.amount + 1 }))}>+

    

  


))


```

- scoped css

```jsx

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

    {children}

  )

)

```

- cheap classy syntax

```jsx

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 (

      


        {message}

      

    )

  }

})


```