@safe-engine/pixi 8.4.3 → 8.4.6

package/dist/spine/lib/Spine.js

@@ -28,12 +28,10 @@
  *****************************************************************************/
 import { AnimationState, AnimationStateData, AtlasAttachmentLoader, ClippingAttachment, Color, MeshAttachment, Physics, Pool, RegionAttachment, Skeleton, SkeletonBinary, SkeletonBounds, SkeletonClipping, SkeletonData, SkeletonJson, Vector2, } from '@esotericsoftware/spine-core';
 import { Assets, Cache, Container, DEG_TO_RAD, fastCopy, Graphics, Texture, Ticker, ViewContainer, } from 'pixi.js';
-;
 const vectorAux = new Vector2();
 Skeleton.yDown = true;
 const clipper = new SkeletonClipping();
-;
-const maskPool = new Pool(() => new Graphics);
+const maskPool = new Pool(() => new Graphics());
 /**
  * The class to instantiate a {@link Spine} game object in Pixi.
  * The static method {@link Spine.from} should be used to instantiate a Spine game object.
@@ -92,8 +90,12 @@ export class Spine extends ViewContainer {
         this.buildId = 0;
         this.renderPipeId = 'spine';
         this._didSpineUpdate = false;
-        this.beforeUpdateWorldTransforms = () => { };
-        this.afterUpdateWorldTransforms = () => { };
+        this.beforeUpdateWorldTransforms = () => {
+            /** */
+        };
+        this.afterUpdateWorldTransforms = () => {
+            /** */
+        };
         this.darkTint = false;
         this._debug = undefined;
         this._slotsObject = Object.create(null);
@@ -110,9 +112,7 @@ export class Spine extends ViewContainer {
         this.state = new AnimationState(new AnimationStateData(skeletonData));
         this.autoUpdate = (_a = options === null || options === void 0 ? void 0 : options.autoUpdate) !== null && _a !== void 0 ? _a : true;
         // dark tint can be enabled by options, otherwise is enable if at least one slot has tint black
-        this.darkTint = (options === null || options === void 0 ? void 0 : options.darkTint) === undefined
-            ? this.skeleton.slots.some(slot => !!slot.data.darkColor)
-            : options === null || options === void 0 ? void 0 : options.darkTint;
+        this.darkTint = (options === null || options === void 0 ? void 0 : options.darkTint) === undefined ? this.skeleton.slots.some((slot) => !!slot.data.darkColor) : options === null || options === void 0 ? void 0 : options.darkTint;
         const slots = this.skeleton.slots;
         for (let i = 0; i < slots.length; i++) {
             this.attachmentCacheData[i] = Object.create(null);
@@ -244,11 +244,11 @@ export class Spine extends ViewContainer {
             return;
         }
         // assign the currentClippingSlot mask to the slot object
-        let currentClippingSlot = this.currentClippingSlot;
-        let slotObject = this._slotsObject[slot.data.name];
+        const currentClippingSlot = this.currentClippingSlot;
+        const slotObject = this._slotsObject[slot.data.name];
         if (currentClippingSlot && slotObject) {
-            let slotClipping = currentClippingSlot.slot;
-            let clippingAttachment = slotClipping.attachment;
+            const slotClipping = currentClippingSlot.slot;
+            const clippingAttachment = slotClipping.attachment;
             // create the pixi mask, only the first time and if the clipped slot is the first one clipped by this currentClippingSlot
             let mask = currentClippingSlot.mask;
             if (!mask) {
@@ -262,7 +262,7 @@ export class Spine extends ViewContainer {
                 const worldVerticesLength = clippingAttachment.worldVerticesLength;
                 const vertices = currentClippingSlot.vertices;
                 clippingAttachment.computeWorldVertices(slotClipping, 0, worldVerticesLength, vertices, 0, 2);
-                mask.clear().poly(vertices).stroke({ width: 0 }).fill({ alpha: .25 });
+                mask.clear().poly(vertices).stroke({ width: 0 }).fill({ alpha: 0.25 });
             }
             slotObject.container.mask = mask;
         }
@@ -278,7 +278,8 @@ export class Spine extends ViewContainer {
         if (last) {
             for (const key in this.clippingSlotToPixiMasks) {
                 const clippingSlotToPixiMask = this.clippingSlotToPixiMasks[key];
-                if ((!(clippingSlotToPixiMask.slot.attachment instanceof ClippingAttachment) || !clippingSlotToPixiMask.maskComputed) && clippingSlotToPixiMask.mask) {
+                if ((!(clippingSlotToPixiMask.slot.attachment instanceof ClippingAttachment) || !clippingSlotToPixiMask.maskComputed) &&
+                    clippingSlotToPixiMask.mask) {
                     this.removeChild(clippingSlotToPixiMask.mask);
                     maskPool.free(clippingSlotToPixiMask.mask);
                     clippingSlotToPixiMask.mask = undefined;
@@ -368,9 +369,9 @@ export class Spine extends ViewContainer {
         const { vertices, uvs, indices } = clippedData;
         for (let i = 0; i < verticesCount; i++) {
             vertices[i * 2] = clippedVertices[i * 2];
-            vertices[(i * 2) + 1] = clippedVertices[(i * 2) + 1];
-            uvs[i * 2] = clippedUVs[(i * 2)];
-            uvs[(i * 2) + 1] = clippedUVs[(i * 2) + 1];
+            vertices[i * 2 + 1] = clippedVertices[i * 2 + 1];
+            uvs[i * 2] = clippedUVs[i * 2];
+            uvs[i * 2 + 1] = clippedUVs[i * 2 + 1];
         }
         clippedData.vertexCount = verticesCount;
         for (let i = 0; i < indicesCount; i++) {
@@ -613,9 +614,7 @@ export class Spine extends ViewContainer {
         const skeletonAsset = Assets.get(skeleton);
         const atlasAsset = Assets.get(atlas);
         const attachmentLoader = new AtlasAttachmentLoader(atlasAsset);
-        const parser = skeletonAsset instanceof Uint8Array
-            ? new SkeletonBinary(attachmentLoader)
-            : new SkeletonJson(attachmentLoader);
+        const parser = skeletonAsset instanceof Uint8Array ? new SkeletonBinary(attachmentLoader) : new SkeletonJson(attachmentLoader);
         parser.scale = scale;
         const skeletonData = parser.readSkeletonData(skeletonAsset);
         Cache.set(cacheKey, skeletonData);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@safe-engine/pixi",
-  "version": "8.4.3",
+  "version": "8.4.6",
   "description": "safex pixi plugin",
   "type": "module",
   "main": "dist/index.js",
@@ -16,16 +16,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@esotericsoftware/spine-core": "^4.2.84",
+    "@esotericsoftware/spine-core": "^4.2.87",
     "@pixi/ui": "^2.2.4",
-    "@types/node": "^24.0.10",
+    "@types/node": "^24.0.15",
     "box2d-wasm": "^7.0.0",
     "copyfiles": "^2.4.1",
     "dragonbones-pixijs": "^1.0.5",
     "entityx-ts": "^2.2.1",
-    "pixi-action-ease": "^3.0.6",
+    "pixi-action-ease": "^3.2.3",
     "pixi-tagged-text-plus": "0.0.1-next.2",
-    "pixi.js": "8.10.2",
+    "pixi.js": "8.11.0",
     "planck": "^1.4.2"
   },
   "devDependencies": {

package/src/app.ts

@@ -1,5 +1,5 @@
 import { actionManager } from 'pixi-action-ease'
-import { Application, AssetsClass } from 'pixi.js'
+import { Application, AssetsClass, Renderer } from 'pixi.js'
 
 import { GameWorld } from './base'
 import { CollideSystem } from './collider'
@@ -12,7 +12,7 @@ export async function startGame(
   designedResolution = { width: 720, height: 1280 },
   assetManager: AssetsClass,
   id = 'gameCanvas',
-) {
+): Promise<Application<Renderer>> {
   const app = new Application()
   await app.init({
     antialias: true,

package/src/base/EnhancedComponent.ts

@@ -1,10 +1,11 @@
 import { Constructor } from 'entityx-ts'
-import { BaseComponentProps } from '../@types/safex'
+import { BaseComponentProps } from '..'
 import { NodeComp } from '../components/NodeComp'
 
 export class EnhancedComponent<Props = {}, N extends NodeComp<any> = NodeComp<any>> {
   props: Props = {} as any
-  constructor(data?: BaseComponentProps & Props) {
+  enabled = true
+  constructor(data?: BaseComponentProps<EnhancedComponent> & Props) {
     this.init(data)
   }
   init(data?: Props) {
@@ -16,7 +17,7 @@ export class EnhancedComponent<Props = {}, N extends NodeComp<any> = NodeComp<an
     }
   }
   node: N
-  // actionsMap: { [key: string]: Animation } = {}
+
   addComponent<T extends EnhancedComponent>(instance): T {
     return this.node.addComponent(instance)
   }

package/src/components/NodeComp.ts

@@ -27,6 +27,7 @@ export class NodeComp<C extends Container = Container> {
   name: string
   // private lastMove: { x: number; y: number }
   private _group = 0
+  private _active = true
 
   onTouchStart?: TouchEventCallback
   onTouchMove?: TouchEventCallback
@@ -183,10 +184,17 @@ export class NodeComp<C extends Container = Container> {
   }
 
   get active() {
+    if (!this._active) return false
+    let p = this.parent
+    while (p) {
+      if (!p.active) return false
+      p = p.parent
+    }
     return this.instance.visible && !this.instance.destroyed
   }
 
   set active(val: boolean) {
+    this._active = val
     this.instance.visible = val
   }
 

package/src/core/loader.ts

@@ -1,10 +1,12 @@
-import { Assets } from 'pixi.js'
+import { AssetsClass } from 'pixi.js'
 
 const jsonCache = {}
-export async function loadJsonAsync<T>(filePath: string): Promise<T> {
-  const json = await Assets.load(filePath)
-  jsonCache[filePath] = json
-  return json
+export function loadJsonAsync<T>(Assets: AssetsClass) {
+  return async (filePath: string): Promise<T> => {
+    const json = await Assets.load(filePath)
+    jsonCache[filePath] = json
+    return json
+  }
 }
 
 export function loadJsonFromCache<T>(filePath: string): T {

package/src/gui/GUIComponent.ts

@@ -1,6 +1,7 @@
 import { CheckBox, CheckBoxOptions, Input, List, ProgressBar, RadioGroup, Slider, SliderOptions } from '@pixi/ui'
-import { Assets, Container, FillInput, Point, Text } from 'pixi.js'
+import { Assets, Container, Point, Text } from 'pixi.js'
 
+import { BaseComponentProps } from '..'
 import { ComponentX, NoRenderComponentX } from '../components/BaseComponent'
 import { Color4B } from '../core/Color'
 import { LoadingBarMode, ProgressTimer } from '../core/LoadingBar'
@@ -10,10 +11,10 @@ export const FillType = {
   VERTICAL: 1,
   RADIAL: 2,
 }
-type Keys = keyof typeof FillType
-type Values = (typeof FillType)[Keys]
+// type Keys = keyof typeof FillType
+// type Values = (typeof FillType)[Keys]
 
-interface ButtonCompProps {
+interface ButtonCompProps extends BaseComponentProps<ButtonComp> {
   normalImage?: string
   selectedImage?: string
   disableImage?: string
@@ -24,10 +25,9 @@ export class ButtonComp extends NoRenderComponentX<ButtonCompProps> {
   // setOnPress(cb: (target: ButtonComp) => void) {
   //   this.onPress = cb
   // }
-
-  set enabled(val) {
-    this.node.instance.interactive = val
-  }
+  // set enabled(val) {
+  //   this.node.instance.interactive = val
+  // }
 }
 
 export class ProgressBarComp extends ComponentX<{}, ProgressBar> {
@@ -44,13 +44,12 @@ export class ProgressBarComp extends ComponentX<{}, ProgressBar> {
     this.node.instance.progress = val
   }
 }
-interface LabelCompProps {
+interface LabelCompProps extends BaseComponentProps<LabelComp> {
   font?: string
   string?: string
   size?: number
 }
 export class LabelComp extends ComponentX<LabelCompProps, Text> {
-
   get string() {
     return this.props.string
   }
@@ -92,21 +91,18 @@ interface ScrollViewProps {
   width: number
   height: number
 }
-export class ScrollView extends NoRenderComponentX<ScrollViewProps> {
+export class ScrollView extends NoRenderComponentX<ScrollViewProps> {}
 
-}
+export class BlockInputEventsComp extends NoRenderComponentX {}
 
-export class BlockInputEventsComp extends NoRenderComponentX { }
-
-interface ProgressTimerProps {
+interface ProgressTimerProps extends BaseComponentProps<ProgressTimerComp> {
   spriteFrame: string
   fillType?: number
   fillRange?: number
   fillCenter?: Point
   isReverse?: boolean
 }
-export class ProgressTimerComp extends ComponentX<ProgressTimerProps & { $ref?: ProgressTimerComp }, ProgressTimer> {
-
+export class ProgressTimerComp extends ComponentX<ProgressTimerProps, ProgressTimer> {
   getFillRange() {
     return this.node.instance.progress
   }
@@ -125,35 +121,35 @@ interface LabelOutlineCompProps {
   color: Color4B
   width: number
 }
-export class LabelOutlineComp extends NoRenderComponentX<LabelOutlineCompProps> {
-
-}
+export class LabelOutlineComp extends NoRenderComponentX<LabelOutlineCompProps> {}
 
-interface LabelShadowCompProps {
+interface LabelShadowCompProps extends BaseComponentProps<LabelShadowComp> {
   color: Color4B
   blur: number
   offset?: Point
 }
-export class LabelShadowComp extends NoRenderComponentX<LabelShadowCompProps> {
+export class LabelShadowComp extends NoRenderComponentX<LabelShadowCompProps> {}
 
+interface InputCompProps extends BaseComponentProps<InputComp> {
+  placeHolder?: string
+  font?: string
+  size?: Integer
+  maxLength?: Integer
+  isPassword?: boolean
+  bg?: string
+  // fill?: FillInput
 }
-
-export class InputComp extends ComponentX<{}, Input> {
-  bg: string
-  fill: FillInput
-  font: string
-  string: string
-  size = 64
+export class InputComp extends ComponentX<InputCompProps, Input> {
+  get string() {
+    return this.node.instance.value
+  }
 }
 
-export class ListComp extends ComponentX<{}, List> {
-}
+export class ListComp extends ComponentX<{}, List> {}
 export class SliderComp extends ComponentX<{}, Slider> {
   bg: string
   fill: SliderOptions['fill']
   slider: Container
 }
-export class RadioGroupComp extends ComponentX<{}, RadioGroup> {
-}
-export class CheckBoxComp extends ComponentX<{ style: CheckBoxOptions['style'] }, CheckBox> {
-}
+export class RadioGroupComp extends ComponentX<{}, RadioGroup> {}
+export class CheckBoxComp extends ComponentX<{ style: CheckBoxOptions['style'] }, CheckBox> {}

package/src/gui/GUISystem.ts

@@ -1,14 +1,15 @@
-import { Button, CheckBox, List, RadioGroup, ScrollBox } from '@pixi/ui'
+import { Button, CheckBox, Input, List, RadioGroup, ScrollBox } from '@pixi/ui'
 import { EventManager, EventTypes, System } from 'entityx-ts'
 import { callFunc, easeBackIn, scaleTo, sequence } from 'pixi-action-ease'
 import { Text } from 'pixi.js'
 
-import { NodeComp } from '..'
+import { Color4B, NodeComp } from '..'
 import { GameWorld } from '../base'
 import { LoadingBarMode, ProgressTimer } from '../core/LoadingBar'
 import {
   ButtonComp,
   CheckBoxComp,
+  InputComp,
   LabelComp,
   LabelOutlineComp,
   LabelShadowComp,
@@ -30,6 +31,7 @@ export class GUISystem implements System {
       component.node = nodeComp
       // component.node = entity.assign(new NodeComp(node, entity))
       button.onPress.connect(() => {
+        if (!component.enabled) return
         // console.log('onPress.connect')
         const scale = scaleTo(0.5, 1.2)
         const scaleDown = scaleTo(0.5, 1)
@@ -53,11 +55,12 @@ export class GUISystem implements System {
     // })
     event_manager.subscribe(EventTypes.ComponentAdded, ProgressTimerComp, ({ entity, component }) => {
       // console.log(component, '.progress')
-      const { spriteFrame, fillCenter } = component.props
+      const { spriteFrame, fillCenter, fillRange = 0 } = component.props
       const node = new ProgressTimer(LoadingBarMode.BAR, spriteFrame)
       if (fillCenter) {
         node.fillCenter = fillCenter
       }
+      node.progress = fillRange * 100
       component.node = entity.assign(new NodeComp(node, entity))
     })
     event_manager.subscribe(EventTypes.ComponentAdded, ScrollView, ({ entity, component }) => {
@@ -83,11 +86,11 @@ export class GUISystem implements System {
       const view = new CheckBox({ style })
       component.node = entity.assign(new NodeComp(view, entity))
     })
-    // event_manager.subscribe(EventTypes.ComponentAdded, InputComp, ({ entity, component }) => {
-    //   const { bg, size = 48, fill } = component.props
-    //   const view = new Input({ bg, textStyle: { fontSize: size, fill } })
-    //   component.node = entity.assign(new NodeComp(view, entity))
-    // })
+    event_manager.subscribe(EventTypes.ComponentAdded, InputComp, ({ entity, component }) => {
+      const { bg, size = 48 } = component.props
+      const view = new Input({ bg, textStyle: { fontSize: size, fill: { color: Color4B(255, 255, 255, 255) } } })
+      component.node = entity.assign(new NodeComp(view, entity))
+    })
     event_manager.subscribe(EventTypes.ComponentAdded, LabelComp, ({ entity, component }) => {
       // console.log('ComponentAddedEvent LabelComp', component)
       const node = new Text()
@@ -107,7 +110,7 @@ export class GUISystem implements System {
       }
     })
     event_manager.subscribe(EventTypes.ComponentAdded, LabelShadowComp, ({ entity, component }) => {
-      const { color, blur, offset } = component.props
+      const { color, blur } = component.props
       const node = entity.getComponent(NodeComp)
       if (node.instance instanceof Text) {
         node.instance.style.dropShadow = { color, blur, alpha: 1, angle: 0, distance: 0 }

package/src/index.ts

@@ -1,4 +1,3 @@
-export * from 'pixi-action-ease'
 export * from 'pixi.js'
 export * from './app'
 export * from './base'
@@ -18,4 +17,3 @@ export * from './render/RenderComponent'
 export * from './render/RenderSystem'
 export * from './richtext'
 export * from './spine'
-

package/src/norender/Touch.ts

@@ -8,8 +8,8 @@ export class Touch {
     this.event = event
   }
 
-  getLocation() {
-    return this.event.global
+  getLocation(): ReturnType<typeof Vec2> {
+    return Vec2(this.event.global)
   }
   getLocationX() {
     return this.event.globalX
@@ -17,7 +17,7 @@ export class Touch {
   getLocationY() {
     return this.event.globalY
   }
-  getDelta() {
+  getDelta(): ReturnType<typeof Vec2> {
     return Vec2(this.event.movementX, this.event.movementY)
   }
   getDeltaX() {

package/src/render/RenderComponent.ts

@@ -1,6 +1,6 @@
 import { Graphics, Sprite, Texture } from 'pixi.js'
 
-import { Color4B, Vec2 } from '..'
+import { BaseComponentProps, Color4B, Vec2 } from '..'
 import { ComponentX } from '../components/BaseComponent'
 import { LoadingBarMode } from '../core/LoadingBar'
 import { SpriteTypes } from './RenderSystem'
@@ -9,7 +9,7 @@ export class NodeRender extends ComponentX {
   nodeName?: string
 }
 
-interface SpriteRenderProps {
+interface SpriteRenderProps extends BaseComponentProps<SpriteRender> {
   spriteFrame: string
   type?: SpriteTypes
   fillType?: LoadingBarMode
@@ -18,7 +18,7 @@ interface SpriteRenderProps {
   // loadingBar: LoadingBar
 }
 
-export class SpriteRender extends ComponentX<SpriteRenderProps & { $ref?: SpriteRender }, Sprite> {
+export class SpriteRender extends ComponentX<SpriteRenderProps, Sprite> {
   // protected _spriteFrame: string
   // set fillStart(val: number) {
   //   if (this.node.instance instanceof cc.ProgressTimer) {
@@ -60,16 +60,16 @@ enum PointType {
   Circle,
   Rect,
 }
-interface GraphicsRenderProps {
+interface GraphicsRenderProps extends BaseComponentProps<GraphicsRender> {
   lineWidth?: number
   strokeColor?: Color4B
   fillColor?: Color4B
 }
-export class GraphicsRender extends ComponentX<GraphicsRenderProps & { $ref?: GraphicsRender }, Graphics> {
-  drawPoint(position: Vec2, pointSize: Float, color: Color4B, pointType = PointType.Rect) {}
+export class GraphicsRender extends ComponentX<GraphicsRenderProps, Graphics> {
+  drawPoint(position: Vec2, pointSize: Float, color: Color4B, pointType = PointType.Rect) { }
   // drawPoints(points: Vec2[], color: Color4B) {
   // }
-  drawLine(origin: Vec2, destination: Vec2, color: Color4B, thickness: Float) {}
+  drawLine(origin: Vec2, destination: Vec2, color: Color4B, thickness: Float) { }
   drawRect(origin: Vec2, destination: Vec2, color: Color4B) {
     const { x, y } = origin
     const width = destination.x - x
@@ -77,7 +77,7 @@ export class GraphicsRender extends ComponentX<GraphicsRenderProps & { $ref?: Gr
     this.node.instance.rect(x, y, width, height)
     this.node.instance.fill(color)
   }
-  drawSolidRect(origin: Vec2, destination: Vec2, color: Color4B) {}
+  drawSolidRect(origin: Vec2, destination: Vec2, color: Color4B) { }
   drawCircle(
     center: Vec2,
     radius: Float,
@@ -93,17 +93,17 @@ export class GraphicsRender extends ComponentX<GraphicsRenderProps & { $ref?: Gr
     this.node.instance.circle(x, y, radius)
     this.node.instance.fill(color)
   }
-  drawSolidCircle(origin: Vec2, destination: Vec2, color: Color4B) {}
-  drawQuadBezier(origin: Vec2, destination: Vec2, color: Color4B) {}
-  drawCubicBezier(origin: Vec2, destination: Vec2, color: Color4B) {}
-  drawCardinalSpline(points: Vec2[], color: Color4B) {}
-  drawCatmullRom(points: Vec2[], color: Color4B) {}
+  drawSolidCircle(origin: Vec2, destination: Vec2, color: Color4B) { }
+  drawQuadBezier(origin: Vec2, destination: Vec2, color: Color4B) { }
+  drawCubicBezier(origin: Vec2, destination: Vec2, color: Color4B) { }
+  drawCardinalSpline(points: Vec2[], color: Color4B) { }
+  drawCatmullRom(points: Vec2[], color: Color4B) { }
   drawPoly(points: Vec2[], color?: Color4B, thickness?: Float) {
     this.node.instance.poly(points, true)
     this.node.instance.fill(color || this.props.fillColor)
   }
-  drawSolidPoly(points: Vec2[], color: Color4B) {}
-  drawDot(points: Vec2[], color: Color4B) {}
+  drawSolidPoly(points: Vec2[], color: Color4B) { }
+  drawDot(points: Vec2[], color: Color4B) { }
   drawSegment(from: Vec2, to: Vec2, thickness?: Float, color?: Color4B) {
     this.node.instance.moveTo(from.x, from.y)
     this.node.instance.lineTo(to.x, to.y)
@@ -124,9 +124,9 @@ export class GraphicsRender extends ComponentX<GraphicsRenderProps & { $ref?: Gr
   }
 }
 
-interface MaskRenderProps {
+interface MaskRenderProps extends BaseComponentProps<MaskRender>{
   type?: number
   segments?: number
   inverted?: boolean
 }
-export class MaskRender extends ComponentX<MaskRenderProps> {}
+export class MaskRender extends ComponentX<MaskRenderProps> { }

package/src/richtext/RichTextComp.ts

@@ -1,25 +1,29 @@
 import TaggedText from 'pixi-tagged-text-plus'
+import { BaseComponentProps } from '..'
 import { ComponentX } from '../components/BaseComponent'
-import { generateStringFromStyledElements, generateStylesFromStyledElements, parseFontString, transformToStyledElements } from './html-text-parser'
+import {
+  generateStringFromStyledElements,
+  generateStylesFromStyledElements,
+  parseFontString,
+  transformToStyledElements,
+} from './html-text-parser'
 
-interface RichTextCompProps {
+interface RichTextCompProps extends BaseComponentProps<RichTextComp> {
   font?: string
   string?: string
   size?: number
 }
 
 export class RichTextComp extends ComponentX<RichTextCompProps, TaggedText> {
-
   get string() {
     return this.props.string
   }
 
-
   set string(val: string) {
     this.props.string = val
     if (!this.node) return
-    const jObj = parseFontString(val);
-    const styledOutput = transformToStyledElements(jObj);
+    const jObj = parseFontString(val)
+    const styledOutput = transformToStyledElements(jObj)
     const newText = generateStringFromStyledElements(styledOutput)
     const styles = generateStylesFromStyledElements(styledOutput)
     // console.log(styledOutput)

package/src/spine/SpineComponent.ts

@@ -1,4 +1,6 @@
-import { ComponentX } from "../components/BaseComponent"
+import { BaseComponentProps } from '..'
+import { ComponentX } from '../components/BaseComponent'
+import { Spine } from './lib'
 
 interface SpineData {
   atlas: string
@@ -6,13 +8,11 @@ interface SpineData {
   texture?: string
 }
 
-interface SpineSkeletonProps {
+interface SpineSkeletonProps extends BaseComponentProps<SpineSkeleton> {
   data: SpineData
   skin?: string
   animation?: string
   timeScale?: number
   loop?: boolean
 }
-export class SpineSkeleton extends ComponentX<SpineSkeletonProps> {
-
-}
+export class SpineSkeleton extends ComponentX<SpineSkeletonProps, Spine> {}