diff --git a/packages/2d/src/lib/components/Txt.ts b/packages/2d/src/lib/components/Txt.ts index 0403b54d..128bd9bd 100644 --- a/packages/2d/src/lib/components/Txt.ts +++ b/packages/2d/src/lib/components/Txt.ts @@ -11,7 +11,7 @@ import {is} from '../utils'; import type {Node} from './Node'; import type {ShapeProps} from './Shape'; import {Shape} from './Shape'; -import {TxtLeaf} from './TxtLeaf'; +import {TXT_TYPE, TxtLeaf} from './TxtLeaf'; import type {ComponentChildren} from './types'; type TxtChildren = string | Node | (string | Node)[]; @@ -24,6 +24,8 @@ export interface TxtProps extends ShapeProps { @nodeName('Txt') export class Txt extends Shape { + public readonly [TXT_TYPE] = true; + /** * Create a bold text node. * diff --git a/packages/2d/src/lib/components/TxtLeaf.ts b/packages/2d/src/lib/components/TxtLeaf.ts index b8512db1..b3e938f7 100644 --- a/packages/2d/src/lib/components/TxtLeaf.ts +++ b/packages/2d/src/lib/components/TxtLeaf.ts @@ -15,6 +15,8 @@ export interface TxtLeafProps extends ShapeProps { text?: SignalValue; } +export const TXT_TYPE = Symbol('Txt'); + @nodeName('TxtLeaf') export class TxtLeaf extends Shape { @lazy(() => { @@ -43,7 +45,15 @@ export class TxtLeaf extends Shape { @computed() protected parentTxt() { const parent = this.parent(); - return parent?.constructor.name === 'Txt' ? parent : null; + if (!parent) { + return null; + } + + if (!(TXT_TYPE in parent)) { + return null; + } + + return parent; } protected override async draw(context: CanvasRenderingContext2D) { diff --git a/packages/2d/src/lib/jsx-runtime.ts b/packages/2d/src/lib/jsx-runtime.ts index 84f7a7ba..ed27400d 100644 --- a/packages/2d/src/lib/jsx-runtime.ts +++ b/packages/2d/src/lib/jsx-runtime.ts @@ -21,7 +21,8 @@ function isClassComponent( return !!fn.prototype?.isClass; } -export const Fragment = Symbol.for('@revideo/2d/fragment'); +export const Fragment: FunctionComponent = ({children}) => children; + export function jsx( type: NodeConstructor | FunctionComponent | typeof Fragment, config: JSXProps,