🇧🇷 🇺🇸. Passionate about programming and building things.
render(() => jsx`<p>Hello, world!</p>`)
viewof exampleText = render(({ useSetter }) => {
const [value, setValue] = useState("")
useSetter(value)
return jsx`
<${ExampleCounter} number=${exampleCount} />
<input
type="text"
placeholder="Enter some text..."
value=${value}
onChange=${useCallback(event => setValue(event.target.value), [setValue])}
/>
`
})
exampleText
ExampleCounter = component(({ number }) => jsx`
<p>
<strong>${number}</strong> second${number === 1 ? ' has' : 's have'} elapsed<br />
</p>
`)
render = render =>
__SECRET_INTERNALS('elements', String(render), {
init: state => ({
renderer: () => state.render(state.public),
id: __SECRET_CREATE_ID(),
element: DOM.element('div'),
public: {
useSetter: (setterOrValue, deps) => (
typeof setterOrValue === 'function'
? useEffect(() => state.public.setValue(setterOrValue(state.public.getValue())), deps)
: useEffect(() => state.public.setValue(setterOrValue), [setterOrValue])
),
getValue: () => state.element.value,
setValue: value => {
state.element.value = value
state.element.dispatchEvent(new CustomEvent('input'))
},
},
}),
update: { render },
effect: state => ReactDOM.render(createElement(state.renderer), state.element),
}).element
component = render =>
__SECRET_INTERNALS('components', String(render), {
init: (state, funcFor) => ({ component: funcFor('render') }),
update: { render }
}).component
jsx = htm.bind(createElement)
memo = (render, arePropsEqual) =>
__SECRET_INTERNALS('memos', JSON.stringify([String(render), String(arePropsEqual)]), {
init: (state, funcFor) => ({ component: React.memo(funcFor('render'), funcFor('arePropsEqual')), }),
update: { render, arePropsEqual }
}).component
forwardRef = render =>
__SECRET_INTERNALS('forwardRefs', String(render), {
init: (state, funcFor) => ({ component: React.forwardRef(funcFor('render')) }),
update: { render },
}).component
__SECRET_INTERNALS = function cache(type, key, { init, update, effect }) {
if (!cache[type]) cache[type] = Object.create(null)
if (!cache[type][key]) {
const state = Object.create(null)
Object.assign(state, init(state, key => (...args) => state[key](...args)))
cache[type][key] = state
}
const state = cache[type][key]
Object.assign(state, update)
if (effect) effect(state)
return state
}
__SECRET_CREATE_ID = () => Number(Math.random().toString().slice(2)).toString(36)
htm = require('htm@2.2.1/dist/htm.umd.js')
React = __SECRET_REQUIRE('react')
ReactDOM = __SECRET_REQUIRE('react-dom')
__SECRET_REQUIRE = require.alias({
react: `https://unpkg.com/react@${versionRange.react || versionRange}/umd/react.${dev ? 'development' : 'production.min'}.js`,
'react-dom': `https://unpkg.com/react-dom@${versionRange.dom || versionRange}/umd/react-dom.${dev ? 'development' : 'production.min'}.js`,
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
