https://github.com/9elt/miniframe

Everything you need to create nodes with states, in 200 LOC
https://github.com/9elt/miniframe

vanilla-js

Last synced: 1 day ago
JSON representation

Everything you need to create nodes with states, in 200 LOC

• Host: GitHub
• URL: https://github.com/9elt/miniframe
• Owner: 9elt
• License: mit
• Created: 2023-07-28T18:19:11.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-20T22:14:13.000Z (about 2 months ago)
• Last Synced: 2024-12-20T19:35:57.849Z (25 days ago)
• Topics: vanilla-js
• Language: TypeScript
• Homepage:
• Size: 246 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Miniframe

Everything you need to create nodes with states, in 200 LOC

> This is a beta, do not use in production!

## usage

In your `tsconfig.json` add:

```json

{

  "compilerOptions": {

    "jsx": "react-jsx",

    "jsxImportSource": "@9elt/miniframe"

  }

}

```

## example

A simple counter that stops at 10

```js

import { createNode, State } from "@9elt/miniframe";

const counter = new State(0);

const div = createNode(

    


        
current count: {counter}

        
 (c < 10 ? "green" : "red")),

            }}

        >

            {counter.as((c) => (c < 10 ? "keep going" : "stop!"))}

        

         counter.value++}

            disabled={counter.as((c) => c === 10)}

        >

            increment

        

    

);


document.body.append(div);

```