@tsei/ctrl v0.32.0

@tsei/ctrl

@tsei/ctrl is Open Source figma like cms controller

🌐 Website ▶︎ | 💬 Discussion forum ▶︎ | 😎 Showcase submission ▶︎

Installation

npm i @tsei/ctrl

Basic Example

React Support

import { useCtrl } from '@tsei/ctrl/react'

function App() {
        const { hello } = useCtrl({ hello: 'world' })
        return <div>{hello}</div>
}

Solid Support

import { useCtrl } from '@tsei/ctrl/solid'

export default function App() {
        const c = useCtrl({ hello: 'world' })
        return <div>{c.hello}</div>
}

Vue Support

<script setup>
import '@tsei/ctrl/style'
import { useCtrl } from '@tsei/ctrl/vue3'
const c = useCtrl({ hello: 'world' })
</script>

<template>
        {{ c.hello }}
</template>

ESM Support

<div id="root">world</div>
<script type="module">
        import { ctrl } from 'https://esm.sh/@tsei/ctrl@0.11.0/es2022'
        const c = ctrl({ hello: 'world' })
        c.sub(() => {
                document.getElementById('root').innerText = c.current.hello
        })
</script>

Render Controller

React Support

import '@tsei/ctrl/style'
import { Controller, useCtrl } from '@tsei/ctrl/react'

function App() {
        const { a, b, c } = useCtrl({ a: 0, b: 1, c: 2 })
        return (
                <Controller>
                        <ul>
                                <li>{a}</li>
                                <li>{b}</li>
                                <li>{c}</li>
                        </ul>
                </Controller>
        )
}

Solid Support

import '@tsei/ctrl/style'
import { Controller, useCtrl } from '@tsei/ctrl/react'

function App() {
        const c = useCtrl({ a: 0, b: 1, c: 2 })
        return (
                <>
                        <Controller />
                        <ul>
                                <li>{c.a}</li>
                                <li>{c.b}</li>
                                <li>{c.c}</li>
                        </ul>
                </>
        )
}

Vue Support

<script setup>
import '@tsei/ctrl/style'
import { Controller, useCtrl } from '@tsei/ctrl/src/vue3'
const c = ctrl({ a: 0, b: 1, c: 2 })
</script>

<template>
        <Controller />
        <ul>
                <li>{c.a}</li>
                <li>{c.b}</li>
                <li>{c.c}</li>
        </ul>
</template>

ESM Support

<link rel="stylesheet" href="https://esm.sh/@tsei/ctrl@latest/dist/index.css" />
<script type="module">
        import {
                Controller,
                ctrl,
        } from 'https://esm.sh/@tsei/ctrl@latest/es2022/index.mjs'
        const c = ctrl({ a: 0, b: 1, c: 2 })
        const _ = ctrl.create

        ctrl.append(
                _(
                        Controller,
                        {},
                        _('ul', {}, [
                                _('li', { id: 'a' }, '0'),
                                _('li', { id: 'b' }, '1'),
                                _('li', { id: 'c' }, '2'),
                        ])
                ),
                document.body
        )

        c.sub((key) => {
                document.getElementById(key).innerText = c.current[key]
        })
</script>

Interface of ctrl

export interface Ctrl<
        T extends Target = Target,
        K extends keyof T & string = keyof T & string
> {
        get updated(): number
        get mounted(): number
        get parent(): null | Ctrl
        set parent(parent: Ctrl)
        get id(): string
        set id(id: string)
        get current(): T
        listeners: Set<Function>
        cleanups: Set<Function>
        updates: Set<Function>
        mounts: Set<Function>
        mount(): void
        clean(): void
        update(k: K, a: T[K]): void
        sub(fn?: Function): Function
        get(): number
        set(k: K, a: T[K]): void
        sync(k: K, a?: T[K]): void
        ref(target: T | null): void
        isC: true
        cache: any
}

Input Types

Number

const c = ctrl({
        number0: 0 // or
        number1: { value: 1 },
})

Vector

const c = ctrl({
        vector0: [0, 0, 0], // or
        vector1: { x: 1, y: 1, z: 1 }, // or
        vector2: { value: [0, 0, 0] }, // or
        vector3: { value: { x: 1, y: 1, z: 1 } },
})

String

const c = ctrl({
        string0: 'HELLO', // or
        string1: { value: 'WORLD' },
})

Boolean

const c = ctrl({
        boolean0: true // or
        boolean1: { value: false },
})

Color

const c = ctrl({
        color0: '#fff', // or
        color1: { r: 1, g: 1, b: 1 }, // or
        color2: { h: 0, s: 0, l: 100 }, // or
        color3: { Y: 1, x: 1, y: 1 }, // or
        color4: { value: '#fff' }, // or
        color5: { value: { r: 1, g: 1, b: 1 } }, // or
        color6: { value: { h: 0, s: 0, l: 100 } }, // or
        color7: { value: { Y: 1, x: 1, y: 1 } },
})

Button

const c = ctrl({
        button0: { onclick: () => alert('CLICKED') }, // or
        button1: { value: { onclick: () => alert('CLICKED') },
})

Select

const c = ctrl({
        select0: { options: ['#f00', '#0f0', '#00f'] }, // or
        select1: { options: document.querySelectorAll('option') }, // or
        select2: document.querySelector('select'), // or
        select3: { value: { options: ['#f00', '#0f0', '#00f'] } }, // or
        select4: { value: { options: document.querySelectorAll('option') } }, // or
        select5: { value: document.querySelector('select') },
})

Audio

const c = ctrl({
        audio0: { src: '.wav' }, // or
        audio1: { value: { src: '.wav' } },
})

Image

const c = ctrl({
        image0: { src: '.png' }, // or
        image1: { value: { src: '.png' } },
})

Video

const c = ctrl({
        video0: { src: '.webm' }, // or
        video1: { value: { src: '.webm' } },
})

Nested

const c = ctrl({
        nested0: { a: { b: { c: 0 } } }, // or
        nested1: { value: { a: { b: { c: 0 } } } }, // or
        nested2: { array: [0, 1, [2, 3]] }, // or
        nested3: { value: { array: [0, 1, [2, 3]] } },
})

CSS Plugin

const c = ctrl({
        css0: {"style":"width:1280px; height:800px;"}, // or
        css1: {"style":{"width":"1280px","height":"800px"}}, // or
        css2: {"value":{"style":"width:1280px; height:800px;"}}, // or
        css3: {"value":{"style":{"width":"1280px","height":"800px"}}},
}

Update value

Manuary Update

const c = ctrl({ hello: 'world' })

const reset = () => {
        c.set('hello', 'world')
}

function App() {
        const { hello } = useCtrl(c)
        return <button onClick={reset}>{hello}</button>
}

Listen Change

const c = ctrl({ hello: 'world' })

const update = () => console.log(c.current.hello)

c.listeners.add(update)

function App() {
        const { hello } = useCtrl(c)
        return <button>{hello}</button>
}

Recipies

DevTool

const c = ctrl<HTMLDivElement>(null!)

function App() {
        return <div ref={c.ref}></div>
}

r3f DevTool

const c = ctrl<THREE.MeshBasicMaterial>(null!)

function Box() {
        return (
                <mesh ref={c.ref}>
                        <boxGeometry />
                        <meshBasicMaterial />
                </mesh>
        )
}

HTMLElement

ctrl(document.body).sub()

Uniforms

const uniforms = { uResolution: { value: [1280, 800] } }
const mat = THREE.MeshBasicMaterial({ uniforms })

ctrl(mat.uniforms).sub()