73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import ReactDOM from 'react-dom/client'
|
|
import App from './App'
|
|
import type {ToolsetConfig} from '@theatre/studio'
|
|
import studio from '@theatre/studio'
|
|
import extension from '@theatre/r3f/dist/extension'
|
|
import {Atom, prism, val} from '@theatre/dataverse'
|
|
import {onChange} from '@theatre/core'
|
|
|
|
/**
|
|
* Let's take a look at how we can use `prism`, `Ticker`, and `val` from Theatre.js's Dataverse library
|
|
* to create a switch with state that is updated automatically,
|
|
* and is even stored in a Theatre.js object.
|
|
*
|
|
* Without going into the details of `prism`, `Ticker`, and `val`, note that by wrapping our `ToolsetConfig` in a prism, our
|
|
* ```ts
|
|
* ... .onChange(Ticker.raf, (toolset) => {
|
|
* set(toolset)
|
|
* }, true)
|
|
* ```
|
|
* code will be called whenever `val(obj.props.exampleProp)` changes (whenever the user clicks the switch and the `onChange` callback is called).
|
|
* This will ensure that our switch's value matches its state and is reflected in the UI via `set(toolset)`.
|
|
*/
|
|
|
|
studio.extend(extension)
|
|
studio.extend({
|
|
id: '@theatre/hello-world-extension',
|
|
toolbars: {
|
|
global(set, studio) {
|
|
const exampleBox = new Atom('mobile')
|
|
|
|
const untapFn = onChange(
|
|
prism<ToolsetConfig>(() => [
|
|
{
|
|
type: 'Switch',
|
|
value: val(exampleBox.prism),
|
|
onChange: (value) => exampleBox.set(value),
|
|
options: [
|
|
{
|
|
value: 'mobile',
|
|
label: 'view mobile version',
|
|
svgSource: '😀',
|
|
},
|
|
{
|
|
value: 'desktop',
|
|
label: 'view desktop version',
|
|
svgSource: '🪢',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'Icon',
|
|
title: 'Example Icon',
|
|
svgSource: '👁🗨',
|
|
onClick: () => {
|
|
console.log('hello')
|
|
},
|
|
},
|
|
]),
|
|
(value) => {
|
|
set(value)
|
|
},
|
|
)
|
|
// listen to changes to this prism using the requestAnimationFrame shared ticker
|
|
|
|
return untapFn
|
|
},
|
|
},
|
|
panes: [],
|
|
})
|
|
studio.initialize()
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
|