Skip to content

nielssp/cstk

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

CSTK

CSTK is the "Classic Stylesheets Toolkit". It's intended as both a simple and (hopefully) performant JSX-based frontend TypeScript library based on reactive programming, and a set of widgets, layouts and utilities for building traditional desktop GUIs for the web.

Status

CSTK is still in the early experimental stages of development and may change or be abandoned at any time.

Reactivity

const a = bind(1);
const b = bind(2);
const c = zipWith([a, b], (a, b) => a + b);
console.log(c.value); // 3
a.value = 10
console.log(c.value); // 12
function Counter() {
    const count = bind(0);
    return <div>
        <button onClick={() => count.value++}>
            Increment
        </button>
        <div>The count is {count}</div>
    </div>;
}

Examples

How to use

Components

import { createElement, mount} from 'cstk';

// A component without inputs
function HelloWorld() {
    return <div>Hello, World!</div>;
}

// A component with a required input
function HelloName({name}: {
    name: string,
}) {
    return <div>Hello, {name}!</div>;
}

// The main application component
function App() {
    return <div>
        <HelloWorld/>
        <HelloName name='CSTK'/>
    </div>;
}

// Attach application component to the body
mount(document.body, <App/>);

Reactivity

  • bind()
  • ref()
  • zip()
  • zipWith()
  • bindList()
  • p.getAndObserve()
  • p.map()
  • p.mapDefined()
  • p.flatMap()
  • p.not
  • p.defined
  • p.undefined
  • p.eq()
  • p.and()
  • p.or()
  • p.props
  • p.orElse()
  • p.await()

Utilities

  • <Show>
  • <Deref>
  • <Unwrap>
  • <Lazy>
  • <Dynamic>
  • <Style>
  • <For>

Routing

  • createRouter()
  • r.navigate()
  • <r.Portal>
  • <r.Provider>
  • <r.Link>
  • <Link>

Forms

  • <Field>
  • CheckboxControl
  • TextControl
  • IntControl
  • RadioControl
  • RadioGroup

Context values

const Theme = createValue('light');

function App() {
    return <Theme.Provider value='dark'>
        <Toolbar/>
    </Theme.Provider>;
}

function Toolbar() {
    return <div>
        <Button label='Click me'/>
    </div>;
}

function Button({label}: {label: string}, context: Context) {
    const theme = context.use(Theme);
    return <button class={theme}>
        {label}
    </button>;
}

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published