variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Re-do bundling, compat tests, and extension API (#174)

Browse source
This commit is contained in:
Aria 2022-05-25 00:37:18 +02:00 • committed by GitHub
parent 5ee9a2543f
commit ec18687a98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
83 changed files with 1138 additions and 886 deletions
Download patch file Download diff file Expand all files Collapse all files

12
theatre/core/src/coreTicker.ts
View file

@ -1,15 +1,5 @@
import {Ticker} from '@theatre/dataverse'
const coreTicker = new Ticker()
const coreTicker = Ticker.raf
export default coreTicker
/**
* @remarks
* TODO users should also be able to define their own ticker.
*/
const onAnimationFrame = (t: number) => {
coreTicker.tick(t)
window.requestAnimationFrame(onAnimationFrame)
}
window.requestAnimationFrame(onAnimationFrame)

5
theatre/core/src/sequences/TheatreSequence.ts
View file

@ -308,6 +308,11 @@ async function resolveAudioBuffer(args: IAttachAudioArgs): Promise<{
// AudioContext is suspended, probably because the browser
// has blocked it since it is not initiated by a user gesture
// if in SSR, just resolve the promise, as there is not much more to be done
if (typeof window === 'undefined') {
return Promise.resolve(ctx)
}
return new Promise<AudioContext>((resolve) => {
const listener = () => {
ctx.resume()

15
theatre/devEnv/buildUtils.ts
View file

@ -2,10 +2,12 @@ import path from 'path'
import {build} from 'esbuild'
export const definedGlobals = {
global: 'window',
'process.env.version': JSON.stringify(
require('../studio/package.json').version,
),
// json-touch-patch (an unmaintained package) reads this value. We patch it to just 'Set', becauce
// this is only used in `@theatre/studio`, which only supports evergreen browsers
'global.Set': 'Set',
}
export function createBundles(watch: boolean) {
@ -17,7 +19,10 @@ export function createBundles(watch: boolean) {
loader: {'.png': 'file', '.svg': 'dataurl'},
bundle: true,
sourcemap: true,
define: {...definedGlobals, __IS_VISUAL_REGRESSION_TESTING: 'false'},
define: {
...definedGlobals,
__IS_VISUAL_REGRESSION_TESTING: 'false',
},
watch,
external: [
'@theatre/dataverse',
@ -38,9 +43,9 @@ export function createBundles(watch: boolean) {
* It's probably possible to bundle our own react version and somehow share it
* with the plugins, but that's not urgent atm.
*/
'react',
'react-dom',
'styled-components',
// 'react',
// 'react-dom',
// 'styled-components',
],
}

5
theatre/studio/package.json
View file

@ -26,10 +26,7 @@
"@theatre/core": "*"
},
"dependencies": {
"@theatre/dataverse": "workspace:*",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.3.0"
"@theatre/dataverse": "workspace:*"
},
"//": "Add packages here to make them externals of studio. Add them to theatre/package.json if you want to bundle them with studio."
}

3
theatre/studio/src/Studio.ts
View file

@ -52,7 +52,7 @@ export class Studio {
this.address = {studioId: nanoid(10)}
this.publicApi = new TheatreStudio(this)
if (process.env.NODE_ENV !== 'test') {
if (process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {
this.ui = new UI(this)
}
@ -170,6 +170,7 @@ export class Studio {
if (drafts.ephemeral.extensions.byId[extension.id]) {
throw new Error(`Extension id "${extension.id}" is already defined`)
}
drafts.ephemeral.extensions.byId[extension.id] = extension
const allPaneClasses = drafts.ephemeral.extensions.paneClasses

71
theatre/studio/src/TheatreStudio.ts
View file

@ -13,7 +13,6 @@ import {
import {getOutlineSelection} from './selectors'
import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
import getStudio from './getStudio'
import type React from 'react'
import {debounce} from 'lodash-es'
import type Sheet from '@theatre/core/sheets/Sheet'
import type {PaneInstanceId, ProjectId} from '@theatre/shared/utils/ids'
@ -67,21 +66,45 @@ export interface PaneClassDefinition {
* Each pane has a `class`, which is a string.
*/
class: string
/**
* A react component that renders the content of the pane. It is given
* a single prop, `paneId`, which is a unique identifier for the pane.
*
* If you wish to store and persist the state of the pane,
* simply use a sheet and an object.
*/
component: React.ComponentType<{
/**
* The unique identifier of the pane
*/
paneId: string
}>
// /**
// * A react component that renders the content of the pane. It is given
// * a single prop, `paneId`, which is a unique identifier for the pane.
// *
// * If you wish to store and persist the state of the pane,
// * simply use a sheet and an object.
// */
// component: React.ComponentType<{
// /**
// * The unique identifier of the pane
// */
// paneId: string
// }>
mount: (opts: {paneId: string; node: HTMLElement}) => () => void
}
export type ToolConfigIcon = {
type: 'Icon'
svgSource: string
title: string
onClick: () => void
}
export type ToolConfigSwitch = {
type: 'Switch'
value: string
onChange: (value: string) => void
options: {
value: string
label: string
svgSource: string
}[]
}
export type ToolConfig = ToolConfigIcon | ToolConfigSwitch
export type ToolsetConfig = Array<ToolConfig>
/**
* A Theatre.js Studio extension. You can define one either
* in a separate package, or within your project.
@ -98,15 +121,13 @@ export interface IExtension {
* @example
* TODO
*/
globalToolbar?: {
/**
* A basic react component.
*
* @example
* TODO
*/
component: React.ComponentType<{}>
toolbars?: {
[key in 'global' | string]: (
set: (config: ToolsetConfig) => void,
studio: IStudio,
) => () => void
}
/**
* Introduces new pane types.
* @example
@ -134,6 +155,8 @@ export interface IStudioUI {
* Makes the studio visible again.
*/
restore(): void
renderToolset(toolsetId: string, htmlNode: HTMLElement): () => void
}
export interface _StudioInitializeOpts {
@ -359,6 +382,10 @@ export default class TheatreStudio implements IStudio {
restore() {
getStudio().ui.restore()
},
renderToolset(toolsetId: string, htmlNode: HTMLElement) {
return getStudio().ui.renderToolset(toolsetId, htmlNode)
},
}
private readonly _cache = new SimpleCache()

11
theatre/studio/src/UI.ts
View file

@ -4,6 +4,9 @@ import React from 'react'
import ReactDOM from 'react-dom'
import type {Studio} from './Studio'
import {val} from '@theatre/dataverse'
import {getMounter} from './utils/renderInPortalInContext'
import {Toolbar} from './toolbars/GlobalToolbar/GlobalToolbar'
import {withStyledShadow} from './css'
export default class UI {
readonly containerEl = document.createElement('div')
@ -86,4 +89,12 @@ export default class UI {
val(this.studio.atomP.ahistoric.visibilityState) === 'everythingIsHidden'
)
}
renderToolset(toolsetId: string, htmlNode: HTMLElement) {
const s = getMounter()
s.mountOrRender(withStyledShadow(Toolbar), {toolbarId: toolsetId}, htmlNode)
return s.unmount
}
}

96
theatre/studio/src/UIRoot/UIRoot.tsx
View file

@ -2,9 +2,8 @@ import getStudio from '@theatre/studio/getStudio'
import {usePrism, useVal} from '@theatre/react'
import {val} from '@theatre/dataverse'
import React, {useEffect} from 'react'
import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
import styled, {createGlobalStyle} from 'styled-components'
import PanelsRoot from './PanelsRoot'
import ProvideTheme from './ProvideTheme'
import GlobalToolbar from '@theatre/studio/toolbars/GlobalToolbar/GlobalToolbar'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
import {PortalContext} from 'reakit'
@ -13,25 +12,17 @@ import useKeyboardShortcuts from './useKeyboardShortcuts'
import PointerEventsHandler from '@theatre/studio/uiComponents/PointerEventsHandler'
import TooltipContext from '@theatre/studio/uiComponents/Popover/TooltipContext'
import {ProvidePointerCapturing} from './PointerCapturing'
import {MountAll} from '@theatre/studio/utils/renderInPortalInContext'
import {PortalLayer, ProvideStyles} from '@theatre/studio/css'
const GlobalStyle = createGlobalStyle`
const MakeRootHostContainStatic =
typeof window !== 'undefined'
? createGlobalStyle`
:host {
all: initial;
contain: strict;
color: white;
font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;
}
* {
padding: 0;
margin: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
list-style: none;
}
`
: ({} as ReturnType<typeof createGlobalStyle>)
const Container = styled(PointerEventsHandler)`
z-index: 50;
@ -48,24 +39,11 @@ const Container = styled(PointerEventsHandler)`
}
`
const PortalLayer = styled.div`
z-index: 51;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
pointer-events: none;
`
export default function UIRoot() {
const studio = getStudio()
const [portalLayerRef, portalLayer] = useRefAndState<HTMLDivElement>(
undefined as $IntentionalAny,
)
const [containerRef, container] = useRefAndState<HTMLDivElement>(
undefined as $IntentionalAny,
)
useKeyboardShortcuts()
@ -85,37 +63,39 @@ export default function UIRoot() {
const initialised = val(studio.atomP.ephemeral.initialised)
return !initialised ? null : (
<StyleSheetManager
disableVendorPrefixes
target={
window.__IS_VISUAL_REGRESSION_TESTING === true
? undefined
: getStudio()!.ui.containerShadow
}
>
<>
<GlobalStyle />
<ProvidePointerCapturing>
<ProvideTheme>
<PortalContext.Provider value={portalLayer}>
<TooltipContext>
<Container
className={
visiblityState === 'everythingIsHidden' ? 'invisible' : ''
}
>
<PortalLayer ref={portalLayerRef} />
{<GlobalToolbar />}
{<PanelsRoot />}
</Container>
</TooltipContext>
</PortalContext.Provider>
</ProvideTheme>
</ProvidePointerCapturing>
</>
</StyleSheetManager>
<TooltipContext>
<ProvidePointerCapturing>
<MountExtensionComponents />
<PortalContext.Provider value={portalLayer}>
<ProvideStyles
target={
window.__IS_VISUAL_REGRESSION_TESTING === true
? undefined
: getStudio()!.ui.containerShadow
}
>
<>
<MakeRootHostContainStatic />
<Container
className={
visiblityState === 'everythingIsHidden' ? 'invisible' : ''
}
>
<PortalLayer ref={portalLayerRef} />
{<GlobalToolbar />}
{<PanelsRoot />}
</Container>
</>
</ProvideStyles>
</PortalContext.Provider>
</ProvidePointerCapturing>
</TooltipContext>
)
}, [studio, portalLayerRef, portalLayer])
return inside
}
const MountExtensionComponents: React.FC<{}> = () => {
return <MountAll />
}

45
theatre/studio/src/css.ts
View file

@ -1,45 +0,0 @@
import {lighten} from 'polished'
import {css} from 'styled-components'
/**
* This CSS string is used to correctly set pointer-events on an element
* when the pointer is dragging something.
* Naming explanation: "NormalMode" as opposed to dragging mode.
*
* @see PointerEventsHandler - the place that sets `.normal` on #pointer-root
*/
export const pointerEventsAutoInNormalMode = css`
#pointer-root & {
pointer-events: none;
}
#pointer-root.normal & {
pointer-events: auto;
}
`
export const theme = {
panel: {
bg: `#282b2f`,
head: {
title: {
color: `#bbb`,
},
punctuation: {
color: `#808080`,
},
},
body: {
compoudThing: {
label: {
get color(): string {
return lighten(0.6, theme.panel.bg)
},
},
},
},
},
}
export const panelUtils = {
panelBorder: `2px solid #1f1f1f`,
}

146
theatre/studio/src/css.tsx Normal file
View file

@ -0,0 +1,146 @@
import {lighten} from 'polished'
import {css} from 'styled-components'
import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
import React, {useLayoutEffect, useState} from 'react'
import ReactDOM from 'react-dom'
import type {$IntentionalAny} from '@theatre/shared/utils/types'
import {PortalContext} from 'reakit'
import useRefAndState from './utils/useRefAndState'
/**
* This CSS string is used to correctly set pointer-events on an element
* when the pointer is dragging something.
* Naming explanation: "NormalMode" as opposed to dragging mode.
*
* @see PointerEventsHandler - the place that sets `.normal` on #pointer-root
*/
export const pointerEventsAutoInNormalMode = css`
#pointer-root & {
pointer-events: none;
}
#pointer-root.normal & {
pointer-events: auto;
}
`
export const theme = {
panel: {
bg: `#282b2f`,
head: {
title: {
color: `#bbb`,
},
punctuation: {
color: `#808080`,
},
},
body: {
compoudThing: {
label: {
get color(): string {
return lighten(0.6, theme.panel.bg)
},
},
},
},
},
}
export const panelUtils = {
panelBorder: `2px solid #1f1f1f`,
}
const GlobalStyle =
typeof window !== 'undefined'
? createGlobalStyle`
:host {
all: initial;
color: white;
font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;
}
* {
padding: 0;
margin: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
list-style: none;
}
`
: ({} as ReturnType<typeof createGlobalStyle>)
export const PortalLayer = styled.div`
z-index: 51;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
pointer-events: none;
`
export const ProvideStyles: React.FC<{target: undefined | HTMLElement}> = (
props,
) => {
return (
<StyleSheetManager disableVendorPrefixes target={props.target}>
<>
<GlobalStyle />
{props.children}
</>
</StyleSheetManager>
)
}
export function withStyledShadow<Props>(
Comp: React.ComponentType<Props>,
): React.ComponentType<Props> {
return (props) => (
<ProvideStyledShadow>
<Comp {...props} />
</ProvideStyledShadow>
)
}
const ProvideStyledShadow: React.FC<{}> = (props) => {
const [template, ref] = useState<null | HTMLTemplateElement>(null)
const [shadowRoot, setShadowRoot] = useState<null | ShadowRoot>(null)
useLayoutEffect(() => {
if (!template) return
const shadowRoot = (template.parentNode as HTMLElement).attachShadow({
mode: 'open',
})
setShadowRoot(shadowRoot)
return () => {
template.parentNode?.removeChild(shadowRoot)
}
}, [template])
const [portalLayerRef, portalLayer] = useRefAndState<HTMLDivElement>(
undefined as $IntentionalAny,
)
if (!shadowRoot) {
return (
<template ref={ref} shadow-root={'open'}>
{props.children}
</template>
)
}
return ReactDOM.createPortal(
<ProvideStyles target={shadowRoot as $IntentionalAny as HTMLElement}>
<>
<PortalLayer ref={portalLayerRef} />
<PortalContext.Provider value={portalLayer}>
{props.children}
</PortalContext.Provider>
</>
</ProvideStyles>,
shadowRoot as $IntentionalAny as HTMLElement,
)
}

9
theatre/studio/src/index.ts
View file

@ -69,9 +69,10 @@ function registerStudioBundle() {
}
}
export {default as ToolbarSwitchSelect} from './uiComponents/toolbar/ToolbarSwitchSelect'
export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton'
// export {default as ToolbarSwitchSelect} from './uiComponents/toolbar/ToolbarSwitchSelect'
// export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton'
export {default as ToolbarDropdownSelect} from './uiComponents/toolbar/ToolbarDropdownSelect'
export type {IScrub} from '@theatre/studio/Scrub'
export type {
IStudio,
@ -80,4 +81,8 @@ export type {
PaneClassDefinition,
IStudioUI,
_StudioInitializeOpts,
ToolsetConfig,
ToolConfig,
ToolConfigIcon,
ToolConfigSwitch,
} from '@theatre/studio/TheatreStudio'

26
theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
View file

@ -1,7 +1,7 @@
import type {$FixMe} from '@theatre/shared/utils/types'
import type {PanelPosition} from '@theatre/studio/store/types'
import type {PaneInstance} from '@theatre/studio/TheatreStudio'
import React, {useCallback} from 'react'
import React, {useCallback, useLayoutEffect, useState} from 'react'
import styled from 'styled-components'
import {F2 as F2Impl, TitleBar} from './common'
import BasePanel from './BasePanel'
@ -136,7 +136,21 @@ const ErrorFallback: React.FC<{error: Error}> = (props) => {
const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
paneInstance,
}) => {
const Comp = paneInstance.definition.component
const [mountingPoint, setMountingPoint] = useState<HTMLElement | null>(null)
const mount = paneInstance.definition.mount
useLayoutEffect(() => {
if (!mountingPoint) return
const unmount = mount({
paneId: paneInstance.instanceId,
node: mountingPoint!,
})
if (typeof unmount === 'function') {
return unmount
}
}, [mountingPoint, mount, paneInstance.instanceId])
const closePane = useCallback(() => {
getStudio().paneManager.destroyPane(
paneInstance.instanceId as PaneInstanceId,
@ -155,11 +169,9 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
<Title>{paneInstance.instanceId}</Title>
</TitleBar>
</PanelDragZone>
<F2>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Comp paneId={paneInstance.instanceId} />
</ErrorBoundary>
</F2>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<F2 ref={setMountingPoint} />
</ErrorBoundary>
</Container>
)
}

11
theatre/studio/src/studioTicker.ts
View file

@ -1,14 +1,5 @@
import {Ticker} from '@theatre/dataverse'
const studioTicker = new Ticker()
const studioTicker = Ticker.raf
export default studioTicker
/**
* TODO users should also be able to define their own ticker.
*/
const onAnimationFrame = (t: number) => {
studioTicker.tick(t)
window.requestAnimationFrame(onAnimationFrame)
}
window.requestAnimationFrame(onAnimationFrame)

66
theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx
View file

@ -1,9 +1,13 @@
import {Box} from '@theatre/dataverse'
import {useVal} from '@theatre/react'
import type {IExtension} from '@theatre/studio'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import getStudio from '@theatre/studio/getStudio'
import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common'
import React from 'react'
import type {ToolsetConfig} from '@theatre/studio/TheatreStudio'
import React, {useLayoutEffect, useMemo} from 'react'
import styled from 'styled-components'
import Toolset from './Toolset'
const Container = styled.div`
position: fixed;
@ -36,28 +40,54 @@ const Bg = styled.div`
}
`
const ExtensionToolsetRender: React.FC<{
extension: IExtension
toolbarId: string
}> = ({extension, toolbarId}) => {
const toolsetConfigBox = useMemo(() => new Box<ToolsetConfig>([]), [])
useLayoutEffect(() => {
const detach = extension.toolbars?.[toolbarId]?.(
toolsetConfigBox.set.bind(toolsetConfigBox),
getStudio()!.publicApi,
)
if (typeof detach === 'function') return detach
}, [extension, toolbarId])
const config = useVal(toolsetConfigBox.derivation)
return <Toolset config={config} />
}
const GlobalToolbar: React.FC<{}> = (props) => {
const groups: Array<React.ReactNode> = []
const extensionsById = useVal(getStudio().atomP.ephemeral.extensions.byId)
for (const [, extension] of Object.entries(extensionsById)) {
if (!extension) continue
if (extension.globalToolbar) {
groups.push(
<extension.globalToolbar.component
key={'extensionToolbar-' + extension.id}
/>,
)
}
}
if (groups.length === 0) return null
return (
<Container>
<Bg>{groups}</Bg>
<Bg>
<Toolbar toolbarId="global" />
</Bg>
</Container>
)
}
export const Toolbar: React.FC<{toolbarId: string}> = ({toolbarId}) => {
const groups: Array<React.ReactNode> = []
const extensionsById = useVal(getStudio().atomP.ephemeral.extensions.byId)
for (const [, extension] of Object.entries(extensionsById)) {
if (!extension || !extension.toolbars?.[toolbarId]) continue
groups.push(
<ExtensionToolsetRender
extension={extension}
key={'extensionToolbar-' + extension.id}
toolbarId={toolbarId}
/>,
)
}
if (groups.length === 0) return null
return <>{groups}</>
}
export default GlobalToolbar

53
theatre/studio/src/toolbars/GlobalToolbar/Toolset.tsx Normal file
View file

@ -0,0 +1,53 @@
import didYouMean from '@theatre/shared/utils/didYouMean'
import type {$IntentionalAny} from '@theatre/shared/utils/types'
import userReadableTypeOfValue from '@theatre/shared/utils/userReadableTypeOfValue'
import type {ToolConfig, ToolsetConfig} from '@theatre/studio/TheatreStudio'
import React from 'react'
import IconButton from './tools/IconButton'
import Switch from './tools/Switch'
const Toolset: React.FC<{
config: ToolsetConfig
}> = (props) => {
return (
<>
{props.config.map((toolConfig, i) => {
return <Tool config={toolConfig} key={i} />
})}
</>
)
}
const toolByType: {
[Key in ToolConfig['type']]: React.FC<{
config: Extract<ToolConfig, {type: Key}>
}>
} = {
Icon: IconButton,
Switch: Switch,
}
function getToolByType<Type extends ToolConfig['type']>(
type: Type,
): React.FC<{config: Extract<ToolConfig, {type: Type}>}> {
return toolByType[type] as $IntentionalAny
}
const Tool: React.FC<{config: ToolConfig}> = ({config}) => {
const Comp = getToolByType(config.type)
if (!Comp) {
throw new Error(
`No tool with tool.type ${userReadableTypeOfValue(
config.type,
)} exists. Did you mean ${didYouMean(
config.type,
Object.keys(toolByType),
)}`,
)
}
return <Comp config={config} />
}
export default Toolset

28
theatre/studio/src/toolbars/GlobalToolbar/tools/IconButton.tsx Normal file
View file

@ -0,0 +1,28 @@
import React from 'react'
import ToolbarIconButton from '@theatre/studio/uiComponents/toolbar/ToolbarIconButton'
import styled from 'styled-components'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import type {ToolConfigIcon} from '@theatre/studio/TheatreStudio'
const Container = styled(ToolbarIconButton)`
${pointerEventsAutoInNormalMode};
& > svg {
width: 1em;
height: 1em;
pointer-events: none;
}
`
const IconButton: React.FC<{
config: ToolConfigIcon
}> = ({config}) => {
return (
<Container
onClick={config.onClick}
title={config.title}
dangerouslySetInnerHTML={{__html: config['svgSource'] ?? ''}}
/>
)
}
export default IconButton

32
theatre/studio/src/toolbars/GlobalToolbar/tools/Switch.tsx Normal file
View file

@ -0,0 +1,32 @@
import React from 'react'
import styled from 'styled-components'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import type {ToolConfigSwitch} from '@theatre/studio/TheatreStudio'
import ToolbarSwitchSelect from '@theatre/studio/uiComponents/toolbar/ToolbarSwitchSelect'
const IconContainer = styled.div`
${pointerEventsAutoInNormalMode};
& > svg {
width: 1em;
height: 1em;
pointer-events: none;
}
`
const IconButton: React.FC<{
config: ToolConfigSwitch
}> = ({config}) => {
return (
<ToolbarSwitchSelect
onChange={config.onChange}
options={config.options.map(({label, value, svgSource}) => ({
label,
value,
icon: <IconContainer dangerouslySetInnerHTML={{__html: svgSource}} />,
}))}
value={config.value}
/>
)
}
export default IconButton

6
theatre/studio/src/uiComponents/isSafari.ts
View file

@ -1,3 +1,3 @@
export const isSafari = /^((?!chrome|android).)*safari/i.test(
navigator.userAgent,
)
export const isSafari =
typeof window !== 'undefined' &&
/^((?!chrome|android).)*safari/i.test(navigator.userAgent)

58
theatre/studio/src/utils/contextualWebComponents.tsx Normal file
View file

@ -0,0 +1,58 @@
import type {$IntentionalAny} from '@theatre/shared/utils/types'
import type React from 'react'
import {getMounter} from './renderInPortalInContext'
export function registerContextualWebComponent<Props>(
ReactComponent: React.ComponentType<Props>,
componentName: string,
// currently only supporting string prop types
propKeys: {[propKey in keyof Props]: 'string'},
): void {
if (typeof window === 'undefined' || typeof customElements === 'undefined')
return
const propList = Object.keys(propKeys)
class CustomWebComponent extends HTMLElement {
_mounted = false
_mountOrRender: ReturnType<typeof getMounter>['mountOrRender']
_unmount: ReturnType<typeof getMounter>['unmount']
static get observedAttributes() {
return propList
}
constructor() {
super()
const {mountOrRender, unmount} = getMounter()
this._mountOrRender = mountOrRender
this._unmount = unmount
}
connectedCallback() {
// const shadow = this.attachShadow({mode: 'open'})
this._mounted = true
this._render()
}
_render() {
const props = Object.fromEntries(
propList.map((propName) => [
propName,
this.getAttribute(propName as $IntentionalAny),
]),
)
this._mountOrRender(ReactComponent, props as $IntentionalAny, this)
}
attributeChangedCallback() {
if (!this._mounted) return
this._render()
}
disconnectedCallback() {
this._mounted = false
this._unmount()
}
}
customElements.define(componentName, CustomWebComponent)
}

3
theatre/studio/src/utils/isMac.ts
View file

@ -1,2 +1,3 @@
export const isMac =
navigator && navigator.platform.toUpperCase().indexOf('MAC') >= 0
typeof navigator !== 'undefined' &&
navigator.platform.toUpperCase().indexOf('MAC') >= 0

66
theatre/studio/src/utils/renderInPortalInContext.tsx Normal file
View file

@ -0,0 +1,66 @@
import {Atom} from '@theatre/dataverse'
import {useVal} from '@theatre/react'
import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
import React from 'react'
import {createPortal} from 'react-dom'
type ElToRenderInContext = {
comp: React.ComponentType<$IntentionalAny>
props: {}
portalNode: HTMLElement | SVGElement
}
const theAtom = new Atom<{
set: Record<number, true>
byId: Record<number, ElToRenderInContext>
}>({
set: {},
byId: {},
})
let lastId = 1
export const getMounter = () => {
const id = lastId++
function mountOrRender<Props>(
comp: React.ComponentType<Props>,
props: Props,
portalNode: HTMLElement,
) {
theAtom.reduceState([], (s) => {
return {
byId: {...s.byId, [id]: {comp, props, portalNode}},
set: {...s.set, [id]: true},
}
})
}
function unmount() {
theAtom.reduceState([], (s) => {
const set = {...s.set}
const byId = {...s.byId}
delete set[id]
return {byId, set}
})
}
return {mountOrRender, unmount}
}
export const MountAll = () => {
const ids = Object.keys(useVal(theAtom.pointer.set))
return (
<>
{ids.map((id) => (
<Mount key={'id-' + id} id={id} />
))}
</>
)
}
const Mount = ({id}: {id: number}) => {
const {comp, portalNode, props} = useVal(theAtom.pointer.byId[id])
const Comp = comp as $FixMe
return createPortal(<Comp {...props} />, portalNode)
}